谷歌浏览器调试开发者工具使用记录爬虫开发向.pdfVIP

⾕歌浏览器调试开发者⼯具使⽤记录爬⾍开发向 title: ⾕歌 浏览器调试 开发者⼯具使⽤记录 tags: [‘chrome浏览器’,‘调试’,‘开发者⼯具’,‘调试’] date: 2021-12-09 categories: “磨⼑不误砍柴⼯” 环境 window10 chrome浏览器 ⽂章⽬录 前⾔ 写web⽹站的爬⾍时，总是需要和浏览器打交道，经常就是进去先F12打开开发者⼯具再说，今天写⼀下浏览器开发者⼯具常⽤到的⼀些功 能。 本次操作以chrome浏览器（94.0.4606.81）为例。各浏览器⼤同⼩异（基本⼀致）。 打开开发者⼯具 1 ⽹页空⽩处右键 1. ⽹页空⽩处右键（⼤部分位置都可以，除了⼀些⽹站⾃⼰写了其他操作的位置，⽐如说B站的正在播放的视频，那上⾯右键就点不出来 这个菜单。） 2. 左键单击 检查 2 通过⽹站的功能选项⼀步⼀步点进去 1. 点击⽹页右上⾓的三个点按钮 2. 点击更多⼯具 3. 点击开发者⼯具 3 快捷键1 通过上⾯⼀个⽅法，可以看到⼀⼀个打开开发者⼯具的快捷键 + + CtrlShifti 4 快捷键2 最常⽤ F12 开发者⼯具总览 打开开发者⼯具我们可以看到这样的界⾯ 红⾊框框框住的浏览器的⼏个选项卡，顺序可能不⼀样，可以⿏标拖动选项卡左右移动，也可以不显⽰某些，点那⼀⾏最右边的三个点可以 查看⽬前浏览器的所有选项卡。 下⾯详细介绍⼀下其中⼏个⽐较常⽤的。 Elements 这⼀个选项卡是元素，主要显⽰的是这个 ⽹页的元素，以及右边会显⽰ 。 html css 这⾥我们主要去看的是左边的内容。 在写爬⾍的时候我们会需要定位我们需要的信息在html中的位置，这个操作可以通过点击开发者选项最左边的⼩⿏标⼀样的按钮（蓝⾊表⽰ 显⽰是处于⼯作的状态），然后⽤⿏标去选择我们感兴趣的内容。 这时候⿏标经过⽹页上各个元素的时候会有⼀个框选的状态提⽰。 当我们找到要查找的元素的时候，⿏标点击⼀下它（这时候左边的⼩⿏标⼀样的按钮⼜变成正常的状态，退出了⼯作状态），下⾯的源码会 ⾃动跳转到刚才选定的那个元素，这个时候就可以根据⽹页源码去选择 去解析拿到数据。 xpath 另外，在这个页⾯按查找的快捷键可以在开发者⼯具最下⾯打开⼀个搜索的框框，这个框框⾥可以输⼊xpath来确定元素。⼀般会在页⾯检 查完确认是正确的xpath再把xpath放在程序中去使⽤。 如上，可以通过输⼊xpath 去确认是否是正确的xpath语句，右边是对应的搜索数量，点击向上向下的按钮可以去查看上⼀个|下⼀个。 但是这个输⼊xpath的时候源码⼀直来回跳，很不舒服，所以我平时选择使⽤插件XPath-Helper。 这个插件⽹上有的，实在找不到评论发⼀下，我去翻⼀下我的电脑然后贴过来。 Network 这个选项是⽹络请求的选项卡，常⽤的⼏个地⽅如下，前⾯两个就不多说了，简单说下分类显⽰那个地⽅。 （如果，我是说如果，你的那个分类显⽰的那⾏找不到了，点⼀下清除当前包邮编的那个按钮。） 当我们打开⼀个⽹页，⼀般会接收到很多种类型的报⽂，⽹页的html⽂档，样式的css，逻辑的js，或者是图⽚，json，这些全都摆放在⼀ 块⽐较凌乱，这个时候利⽤好分类显⽰就很有必要。 常见的还有Fetch/XHR，这⾥会展⽰⼀些请求和数据，⼀些⽹页是加载数据之后再渲染的，⽐如数据再json⽂件，传递过来之后再渲染页 ⾯。不管是找接⼝，还是逆向，这⾥都经常要查看的地⽅。 剩下⼏个分类看名字就知道⼤概意思了，就不多说了。 下⾯说⼀点关于报⽂的东西。 Headers 这⾥⾯展⽰了这个请求报⽂的⼀些信息。 General 这⾥⾯有基本的信息，包括请求的地址，请求的⽅式，请求返回的状态码。 Response Headers 这⾥展⽰了响应头的信息 Request Headers 这⾥展⽰了请求头的信息，⼀般这⾥是我们研究的重点。 User-Agent、cookie之类的信息⼀般都是在这⾥去瞄⼀眼的。 Preview 这⾥提供