笔者日常作爬虫开发还是比较中意Chrome谷歌浏览器，所以在接下来的JS交互中平台都以Chrome谷歌浏览器为主。
因为要调试前端的JS文本，和控制台交互是必不可少的，而且不少网站会在这上边做文章，比如说禁止你的F12或者右键点击等等，所以笔者会将所有的Chrome控制台打开方法做个总结：
- F12；
- CTRL+SHIFT+I；
- 在页面右键点击检查；
- 浏览器——>更多工具——>开发者工具；
- 打开一个空白页面，打开开发者工具，再切换回去要调试的页面；
还是希望大家多掌握几种打开开发者工具的方式。
一般来说，我们切换到元素面板，它的所有HTML节点都是闭合的，我们可以选中任意元素，右键点击Expand recursively将所有节点打开。我们再元素面板里看到的页面源代码其实并非原始代码，而是CSS和HTML中和的一个结果。如果我们想要获取页面源代码，有两种方式：
- 切换到资源Sources面板，选择左边的index文件
- 右键点击查看网页源代码，或快捷键CTRL+U
如果我们想隐藏一个页面节点，比如有时页面有一些烦人的广告，但是直接点击的话可能会误入，我们可以再元素面板定位后按下h。当然我们日常的CTRL+C/CTRL+V复制粘贴以及CTRL+Z撤销也是可以在里边使用的。 在元素上右键点击Add attribute也是有些用处的，比如倒计时抓包实际上就是把元素的CSS进行微型修改，我们把进入状态改成激活状态，就能达到抓包效果。
如果有读者对网络爬虫感兴趣，你应该知道我们可以在元素面板按下快捷键CTRL+F，之后下方会弹出一个编写框，我们可以在里边编写CSS选择器或者XPATH语法。当然，各位也可以直接选择元素，右键点击Copy，里边可以直接复制Selector或者xpath，只不过实际使用的时候并不一定能定位到元素。比如使用Python编写网络爬虫的时候，其中的bs4或者lxml定位元素的时候，用直接Cpy复制得到的Selector或者xpath往往不尽人意。
元素面板里的节点也是可以下DOM断点的，右键点击元素会看到Break on中包含三种断点，分别是子树修改/属性变化/节点被移除时候触发的断点。我们任意选择一个，会在Sources面板的DOM breakpoints里边多出一个断点记录。
我们可以在里边选中某个元素，元素面板中的$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')来选择节点，不过前者是对象，后者是文本。如果要选择符合语法的所有页面元素，我们可以使用$$，它返回一个节点的数组，这样就能批量监听事件或者添加元素了。
我们需要了解的是其中的Snippets选项卡，在这里我们可以新建一个snippet，里边可以存放我们的JS代码。
Base64的基本转化或者CryptoJS等，我们就可以直接调用里边的函数了。
改完之后代码并没有被执行起来，我们需要选择JS文件，右键run运行，否则直接调用会报错。如下图所示，我们就可以直接调用自己编写的JS代码了。
网络面板主要是抓取网页数据包。我们可以在Filter中对数据包进行过滤，比如method:POST筛选POST请求包，status-code:200过滤200状态码的请求包。
在标题栏中，我们是可以进行自定义设置，添加删除标题栏。
我们可以在其中的Storage中看待当前页面在数据库中存储了哪些数据。里边的Cookies等元素也是可以编辑的。
我们在开发者工具中按下F1就可以跳出设置面板，如下：