Chrome开发者工具骚操作

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

打开开发者工具

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

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

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

Elements元素面板

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

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

Chrome开发者工具骚操作

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

Chrome开发者工具骚操作
在一个元素的右边，我们可以看到一个Event Listeners选项卡，这里边是元素绑定的事件，但是这个事件绑定并非很准确。

如果有读者对网络爬虫感兴趣，你应该知道我们可以在元素面板按下快捷键CTRL+F，之后下方会弹出一个编写框，我们可以在里边编写CSS选择器或者XPATH语法。当然，各位也可以直接选择元素，右键点击Copy，里边可以直接复制Selector或者xpath，只不过实际使用的时候并不一定能定位到元素。比如使用Python编写网络爬虫的时候，其中的bs4或者lxml定位元素的时候，用直接Cpy复制得到的Selector或者xpath往往不尽人意。

元素面板里的节点也是可以下DOM断点的，右键点击元素会看到Break on中包含三种断点，分别是子树修改/属性变化/节点被移除时候触发的断点。我们任意选择一个，会在Sources面板的DOM breakpoints里边多出一个断点记录。

Console控制台面板

我们可以在里边选中某个元素，元素面板中的$0是对我们当前选中的节点的引用，$1是对上一次我们选择的节点的引用，一直可以回溯到$4。

或者我们可以复制某个节点的Selector，使用document.querySelector('#app > div > div.view-container > div > div > div > div.header > img')或者使用$('#app > div > div.view-container > div > div > div > div.header > img')来选择节点，不过前者是对象，后者是文本。如果要选择符合语法的所有页面元素，我们可以使用$$，它返回一个节点的数组，这样就能批量监听事件或者添加元素了。