Chrome开发者工具骚操作

Chrome开发者工具骚操作

笔者日常作爬虫开发还是比较中意Chrome谷歌浏览器，所以在接下来的JS交互中平台都以Chrome谷歌浏览器为主。

打开开发者工具

因为要调试前端的JS文本，和控制台交互是必不可少的，而且不少网站会在这上边做文章，比如说禁止你的F12或者右键点击等等，所以笔者会将所有的Chrome控制台打开方法做个总结：

1. F12；
2. CTRL+SHIFT+I；
3. 在页面右键点击检查；
4. 浏览器——>更多工具——>开发者工具；
5. 打开一个空白页面，打开开发者工具，再切换回去要调试的页面；

还是希望大家多掌握几种打开开发者工具的方式。

Elements元素面板

一般来说，我们切换到元素面板，它的所有HTML节点都是闭合的，我们可以选中任意元素，右键点击Expand recursively将所有节点打开。我们再元素面板里看到的页面源代码其实并非原始代码，而是CSS和HTML中和的一个结果。如果我们想要获取页面源代码，有两种方式：

1. 切换到资源Sources面板，选择左边的index文件
2. 右键点击查看网页源代码，或快捷键CTRL+U

如果我们想隐藏一个页面节点，比如有时页面有一些烦人的广告，但是直接点击的话可能会误入，我们可以再元素面板定位后按下h。当然我们日常的CTRL+C/CTRL+V复制粘贴以及CTRL+Z撤销也是可以在里边使用的。
在元素上右键点击Add attribute也是有些用处的，比如倒计时抓包实际上就是把元素的CSS进行微型修改，我们把进入状态改成激活