网页源代码抓取工具( Chrome控制台打开方法总结(图)总结及总结)

　　网页源代码抓取工具(

Chrome控制台打开方法总结(图)总结及总结)

　　Chrome 开发者工具显示动作

　　Chrome 开发者工具显示动作

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

　　打开开发者工具

　　因为要调试前端JS文本，与控制台交互是必不可少的，很多网站都会在这上面做文章，比如禁止你的F12或者右键等等，所以作者将所有打开Chrome控制台的方法总结一下：

　　F12; CTRL+SHIFT+我；右击页面查看；浏览器 -> 更多工具 -> 开发者工具；打开一个空白页面，打开开发者工具，切换回要调试的页面；

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

　　元素元素面板

　　一般来说，我们切换到元素面板，它的所有HTML节点都是关闭的，我们可以选择任意元素，右键递归展开，打开所有节点。我们在元素面板中看到的页面源代码实际上并不是原创代码，而是 CSS 和 HTML 中和的结果。如果我们要获取页面的源代码，有两种方式：

　　切换到资源Sources面板，选择左侧的索引文件右键查看网页源代码，或者快捷键CTRL+U

　　

　　如果我们想隐藏一个页面节点，比如有时候页面有一些烦人的广告，但是直接点击可能会误进入，我们可以在定位元素面板后按h。当然我们日常的CTRL+C/CTRL+V复制粘贴和CTRL+Z撤消也可以在里面使用。

　　右键单击元素上的 Add 属性也很有用。比如倒计时抓包，其实就是对元素的 CSS 做个小修改。我们可以将入口状态更改为活动状态，以达到抓包的效果。

　　

　　在一个元素的右侧，我们可以看到一个Event Listeners选项卡，就是绑定到元素的事件，但是事件绑定不是很准确。

　　如果有读者对网络爬虫感兴趣，应该知道我们可以在元素面板中按下快捷键CTRL+F，然后下方会弹出一个书写框，我们可以在其中编写CSS选择器或者XPATH语法。当然也可以直接选择元素，右键复制，直接复制Selector或者xpath也可以，但是在实际使用中可能无法定位到元素。比如在使用Python编写网络爬虫时，bs4或者lxml定位元素时，直接cpy复制的Selector或者xpath往往效果不佳。

　　元素面板中的节点也可以有 DOM 断点。右击元素，会看到Break on有3个断点，分别是修改子树/改变属性/移除节点时触发的断点。我们任意选择一个，Sources面板的DOM断点中会多出一条断点记录。

　　控制台控制台面板

　　我们可以在其中选择一个元素，元素面板中的$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 选项卡，我们可以在其中创建一个新的代码片段来存储我们的 JS 代码。

　　

　　这样，我们就可以在控制台中使用自己的JS代码，比如Base64或者CryptoJS的一些基本转换等，直接调用里面的函数即可。

　　修改后，代码并没有执行。我们需要选中js文件并右键运行，否则直接调用会报错。如下图，我们可以直接调用自己写的JS代码。

　　

　　网络网络面板

　　网络面板主要抓取网页数据包。我们可以在Filter中过滤数据包，比如method: POST过滤POST请求包，status-code: 200过滤状态码为200的请求包。

　　在标题栏中，我们可以自定义设置，添加或删除标题栏。

　　

　　左上角的小箭头可以选择网页中的元素，然后可以导航到元素面板中的源代码节点。旁边的电话形按钮可以切换电话模拟器。

　　应用面板

　　我们可以在Storage中看到当前页面的数据库中存储了哪些数据。里面的cookies等元素也可以编辑。

　　

　　设置面板

　　我们可以在开发者工具中按F1跳出设置面板，如下：

　　

　　我们可以在 Console 中查看 Log XMLHttpRequests，这是一个 AJAXHook。当我们发起请求时，它会直接为我们输出。