文章分类

热门文章

公众号:iMyShare 关注微信公众号

产品汪,爱好设计,业余Coding,想学运营,定期分享实用互联网小技巧!

Chrome谷歌浏览器F12开发者工具使用详解,修改、下载网页中的内容,调试js,抓包等

MeetUp
2020-07-18
695
0

Chrome内核凭借各种好用碾压各个浏览器,就连微软都逃不过,现在已经是一家独大了。然而你以为chrome仅仅是因为各种速度快、体验好、插件丰富且无敌等等俘获大量粉丝的吗?太年轻了,下面就介绍一下Chrome自带的developer tool神器(开发者工具),从此让你的chrome开挂!😎

本文主要分为以下几个方面介绍,不管你是不是开发者,都会有所收获:

  • Elements面板:主要介绍如何实时修改网页中的内容和样式,保存网页中任何禁止保存的图片、文字。还可以模拟手机版网页。
  • Console面板:主要可以查看控制台信息输出,取一些变量的值,写js控制网页等等。
  • Sources面板:查看网页的资源文件列表,比如js源码。主要还是对js调试。
  • Network面板:查看当前网页中所有的网络请求,相当于抓包。既然都能抓包了,所以对于所有的网页内容基本都能保存了,包括音乐、视频等等内容。
  • Application面板:取网站的所有存储数据,比如:Cookies、Web SQL、Session、Local Storage等。

打开Chrome的开发者工具(Developer Tool)

我们在浏览网页的时候,只需要按一下F12,或者右键网页,在右键菜单中选择“检查”即可打开Chrome的开发者工具。备注:我经常使用,所以装了皮肤插件,看起来会好看点,哈哈哈~喜欢的可以自行下载安装:DevTools Theme

chrome谷歌浏览器开发者工具(developer tool)

Chrome开发者工具 - Elements面板

打开Chrome开发者工具的时候,默认打开的就是Elements面板了,此面板会显示当前网页的静态HTML代码,以及每个元素的样式。我们可以在此面板中随意修改任何元素、保存任何显示的内容。

Elements面板 - 元素选择工具

元素选择工具(Elements面板的左上角的箭头一样的按钮),顾名思义就是用它可以选择当前页面上的任何内容。有了它,我们就可以点哪里,选哪里了,选择了之后就可以随意删除、修改、保存了。

保存网页中禁止保存的图片

比如保存网页中的图片,只需要用选择工具点击一下图片,就可以看到图片的链接了,右键链接选择“Open in new tab”就可以下载此图片了。

使用Chrome谷歌浏览器开发者工具(developer tool)保存禁止保存的图片

复制网页中禁止复制的的文字

如果遇到有的网页文字不让复制,比如360文库,还在搞什么复制要登录。。。有用吗?我们只需要用元素选择工具选择我们需要复制的段落,然后双击之后右键就可以复制了。

使用Chrome谷歌浏览器开发者工具(developer tool)复制禁止复制的文字

修改网页中的元素

哎呀,可怜我知乎写了近60个回答,却无人点赞,无人关注😭。所以手动把关注数量修改一下吧,直接元素选中工具选一下关注数字,然后双击进行修改就可以了,想改多少就改多少。

使用Chrome谷歌浏览器开发者工具(developer tool)修改网页中的内容

修改网页元素的样式

之前看有人分享稿定做设计快,然后上去看了一下发现不要钱的有水印,收费价格又不便宜,索性只能盘他了。比如这个PPT上面有个很明显的全屏水印,我们只需要用元素选择工具选中水印,然后将水印元素的样式修改为隐藏(样式中加一个“display:none;”)就OK了。

使用Chrome谷歌浏览器开发者工具(developer tool)修改网页元素样式

删除元素

删除就很简单了,只需要选中后,按delete就可以删除了。印象中好像只有要截图,发现有广告的时候,删一下广告,用的比较少,就不介绍了。

Elements面板 - 模拟手机

现在很多网页针对手机和电脑做差异化处理已经很常见了,不仅仅是显示内容上的差异化,就连反爬虫手段上也有差异,学过爬虫的人都知道的,这里就不细说了。然后我们平时的生产力工具主要还是电脑,所以需要在电脑上模拟手机网页。仅仅只需要在“Elements面板”点击一下手机图标的按钮,然后刷新一下页面,即可模拟手机网页效果了。比如:QQ音乐同一个页面的电脑端和手机端差异性就很大。

使用Chrome谷歌浏览器开发者工具(developer tool)移动模式,模拟手机、Pad网页

Chrome开发者工具 - Console面板

此面板对于开发者来说,主要还是用来查看控制台信息输出的,除了开发者自己定义的一些输出会打印除了,页面中的一些错误也会毫无保留的打印在这里。不过也可以用来取一些变量的值,写js控制网页等等(写js和在编辑器中写无差异)。比如百度到现在还在想着改变世界,还真是初心写的很清楚,但是却走偏了,哈哈哈。然后你可以在Console面板中输出一段表示不想去百度搬砖的代码,调侃一下,哈哈哈~

Chrome谷歌浏览器开发者工具(developer tool)Console面板的使用

Chrome开发者工具 - Sources面板

source也就是网页资源了,资源面板会将浏览器加载当前页面时,所用到的资源文件,按照URL来和目录进行分类展示。这部分相当于网页的源代码了,可以随意保存、修改等。不过最终的还是在Source面板可以对网页的js进行调试,可以帮助网页开发者解决问题,当然也可以帮助爬虫的人分析网页的各种js操作啦,哈哈哈~

Chrome谷歌浏览器开发者工具(developer tool)Sources面板的使用

Sources面板 - js手动断点调试

需要对页面的哪个js文件进行调试,只需要在source面板中找到这个js,然后在具体需要调试的方法对应的行数处单机一下鼠标,就可以进行下断点了。有些网页的js可能进行了压缩,格式是乱的,只有一行,这时候只需要点击一下左下角的大括号一样的图标,就可以对此js进行格式化了。

以有道翻译为例,我找到了fanyi.min.js,并在发送的位置下了断点,然后再次点击“翻译”就进入到我下的断点位置了,此时就可以进行调试了。大进入调试后有几个常用操作:

  • 右上方有一排控制js执行的按钮,依次是:停止断点调试;继续,但不进入函数(F10);进入到函数中(F11);从函数中跳出;禁用所有断点,不做任何调试;程序遇到异常时是否中断的开关。
  • Watch中可以添加需要监控的变量,添加后会一直监控显示此变量的值和变化。
  • Call Stack这个是js的调用栈,可以理解为js执行的顺序,比如:上一步调用了什么方法,下一步会调哪些方法。
  • Scope选项中会列出了断点处私有和公有的变量信息。
  • 在js代码中,鼠标浮上具体的变量时,会显示当前此变量对应的值。

Chrome谷歌浏览器开发者工具(developer tool)js断点调试

然后单步走进行调试,走的时候观察可疑调用栈,很容易就找到有道翻译的翻译接口的加密参数的生成方法了。

Chrome谷歌浏览器开发者工具(developer tool)js调试分析

Sources面板 - 事件监听、监听请求等等进行js调试

上面举的例子是找到js和对应的方法直接下断点进行调试,而有时候我们甚至都不知道是哪个js执行的操作,找起来还挺麻烦。但万万没想到Chrome提供了各种事件的监听,监听到对应的事件后会自动断下来进入调试。比如:

  • 在XHR/fetch Breakpoints中可添加监听请求链接,只要请求此接口时就会断下来
  • 在Event Listener Breakpoints添加需要监听的事件,比如鼠标点击

Chrome谷歌浏览器开发者工具(developer tool)监听请求,事件监听调试

Chrome开发者工具 - Network面板

Network面板就一个作用就是会记录当前页面的所有请求和响应,比如:在有道翻译页面,点击“翻译”后就会请求“http://fanyi.youdao.com/translate_o?smartresult=dict&smartresult=rule”,点击此请求后就能看到对应的请求方法、请求状态、响应头信息、请求头信息、请求的表单参数、以及响应数据。

Chrome谷歌浏览器开发者工具(developer tool)Network面板的使用,请求数据查看Chrome谷歌浏览器开发者工具(developer tool)Network面板的使用,请求相应数据查看然后此面板也有些常用的功能,比如请求分类筛选(全部、JS、图片、媒体文件等),禁用缓存(刷新页面时不会使用缓存数据,会重新加载最新的数据),设置网络环境(可以模拟4G、3G、2G、不在线等等)。

利用Network面板进行抓包,保存网页音乐、视频等媒体文件

网页上所有的资源都是需要请求服务器才能显示到网页上的,所以只要是网页上显示的内容,无论是音乐、视频、图片还是文档等等,理论上都是可以保存到本地的。比如保存QQ音乐的歌曲,我们只需要在Network面板中刷新页面,然后筛选媒体文件的请求,很容易就找到当前歌曲的请求了。然后就只需要右键此请求,选中“Open in new tab”,然后在新页面中点击下载,就可以下次此音乐了。

Chrome谷歌浏览器开发者工具(developer tool)下载音乐、视频

上面介绍的其实挺简单的,但是实际中,网站的开发者对于一些重要的数据,也会做好相应的防护工作的,不可能这么轻易的就让你获取了。比如腾讯视频的1080P视频,这样就可以保存的话,就没那么多人充会员了😂。原因是视频会进行分段,分成N个小段,这样就会有N个请求,然后视频数据还会进行加密处理。好了,有兴趣的就去斗智斗勇吧,哈哈哈

Chrome开发者工具 - Application面板

Application面板主要是用来展示当前网站中存储的一些数据,比如:Cookies、Web SQL、Session、Local Storage等。我们可以随意的对这些数据进行删除或者修改,当然实际中使用比较多的可能就是拿cookie去进行模拟登录等等了吧。反正数据都展示在这了,具体怎么用就仁者见仁智者见智了,不要干坏事就好了,哈哈哈~

Chrome谷歌浏览器开发者工具(developer tool)Application面板的使用,Cookie、Session、Web SQL、Local Storage数据查看和修改

									
交流评论