linux打开火狐浏览器开发者模式

今天我们来讲一下浏览器的开发者工具，大家可能之前经常会听到抓包这样的一个词汇，那么什么是抓包包又是什么？这个它都和我们的浏览器开发者工具是有关系的。 比如说我这里打开了谷歌浏览器，并且进入到了百度的首页当中，我现在想要去打开浏览器的开发者工具，可以通过鼠标右键去选择这个检查，能够去打开这个开发者工具，这是第一种方式，第二种方式呢是你按一下键盘上面的 f 十二这样的一个键，它也能够打开。 第三种呢是在这里浏览器的右上角会有三个点，点击选择更多工具选择开发 工具，它的快捷键呢是 ctrl、 shift 加 i 都可以去打开。那么这个就是我们打开开发者工具的三种方式， 用哪一种都行。那么打开之后我这个地方呢是中文的显示，你们那边它不一定可能是英文的，你想要去给它调成中文的呢，可以在这里有三个有个齿轮啊，选择之后这里有个语言去选择中文，然后给它重新关闭，关闭，然后再去打开，它就变成中文的了。 当然这里每个浏览器它可能对应的一些 ui 设计不太一样，比如说 edg， 它现在呢是一个垂直的排序结构，而谷歌呢，它现在是一个横向的一个排序结构， 所以不太一样。我这里用的呢是谷歌的啊，一个演示啊，但它其实只是 ui 设计不太一样，其他的都差不多啊，它的功能都是一样的。 我们首先进来呢是一个元素的面板，那么这个元素面板呢，就是整个啊这个页面，它加载之后所得到的一个最终的结果， html 的 一个结果，我们可以通过去选择对哪些标签，它在这个页面的 相对应的这个标签也会去通过蓝色的一个颜色啊去选中。比如说我们这里选择了这个 diy， 是 吧？它就是整个的一个页面，它也可以去猜出来，对吧？这里是上面的啊，这个是这里也是有全部的，可以去猜啊，可以去猜 呃，对应的一些标签，那么在元素的左边会有这样的一个箭头儿，我们可以去点击之后啊，可以去选择对应的 把这个页面当中的一些元素，比如我们选择这个新闻，是吧热搜点击一下，他就可以去跳转到对应的这个标签位置，选择这个图片，他也能跳转到这个图片的位置，选择到这个选择这个输入框，还能去跳到这个输入框的位置，这个是选择。 然后这里呢有一个相当于 pc 端，就电脑端的一个展示，以及手机端的一个展示，如果说你是手机端给他点击之后就变成手机端的了， 然后这里的一个鼠标呢，也变成了一个相当于手指的一种形式啊，一个阴影的一个圆圈。但咱们一般来说在电脑上去做爬虫呢，都是给它弄成这个 pc 端的预览 好是元素面板的话，它是整个页面啊全部的文件加载之后所得到的结果，这个是元素面板，包括它还可以去做一些，比如说啊 css， 它就有一些 css 的 啊一些样式，你可以去调，比如说我们这个地方 要去调它的话呢，可以选中对应的标签之后啊，在这里去给它调一些，比如说 id 值，是吧？还有些什么啊？这个标签啊，对应的一些 id、 class 值啊，都有，可以在这里去调试。但这个和我们爬虫来说其实没有太多关系啊，它一般来说是前端去做的一些东西 啊，在这里还可以加一些，比如说事件的一些处理啊，这是学到那个逆向之后要去做的一些东西。 好，第二个呢叫做控制台，但它这里的顺序不一定一样，因为它是可以拖动的，拖动顺序是可以拖动的，按住鼠标左键去拖动就可以了。控制台呢，它在这里面呢是去做一些 js 的 交互的，比如说我们这里可以去输入一些 js 的 语法，我们来输 入一个 js 代码回车，它就可以执行这样的一个 js 代码。安利范的呢，是因为整个的一个代码它并没有返回值，所以它是一个安利范的啊。 好，那么这个就是控制台，他也是会在做立向的时候去用到，用的多一点基本基础。爬虫呢用的比较少， 这个是控制台，包括一些断点的调试，他也可以在这里去呃，做。那咱们还有一个呢是原代码来源来源面板， 这个面板呢它是包含了全部的一些文件，就这个页面它加载所需要的全部文件， html 文件啊，包括一些 gs、 css 它都会在这里面，图片它也会在这里面，它只要有这样的一些 文件，就一定会在这里面啊，这个是原代码面板，它这个呢也是会在学习例像的时候经常会用到啊，在这里面去做一些断点的调试啊、处理啊之类的， 然后再来就是这个网络面板，那么这个网络面板呢就是最重要的一个面板，它是它就是抓包啊，它就是抓包来去呃使用的， 我们要去抓取这个页面，它所需要去加载的一些文件啊，也叫做数据包，就需要去通过这个网络面板呢来去进行抓包。 后面的什么性能啊，内存啊之类的啊，我们就暂时先不说，因为它很少会用到啊，很少会用到，可能会用到这个应用面板，这里面呢会存储一些 cookie， 你 可能需要去清 cookie 的 时候呢，会要用到它，其他的很少用到， 主要是这个网络面板，那么这个网络面板的话它又有很多，这里面会有很多的东西，是吧？比如说我们这个地方 啊有这样的一个红色的选项按钮啊，当这个是谷歌的啊，新版本的谷歌他是红色的，其他浏览器或者老版本的谷歌他并不是红色的，他呢是相当于一个开关，你目前呢是开启的状态，他可以去抓这些对应的一些数据包， 如果说你给他关闭之后，他就不会再去做抓包了。我们这第二个呢是清除，就是他会清空这里的数据包，点击一下就给它清空了，现在是关闭状态，我们去重新刷新一下这个页面 啊，他就没有再去抓包。当你给他开启之后再来去刷新的话呢，他就会抓取对应的这个页面所加载需要号，所加载所需要的一些数据包都会在这个地方能抓到啊。 好，然后这里呢会有一个漏斗形式的按钮，它是过滤啊，那点开它就会有这样的一些过滤，关掉之后呢，它就没了，对吧？这个呢一般是要给它做点开的，它这下面的是类型的过滤以及这个输入名称过滤，它在这里会有名称吗？就数据包它的名字可以通过它的名字来去过滤。 再就是这个放大镜搜索，他点开之后呢会弹出来这里的一个搜索框啊，那么搜索框是干嘛的呢？你现在这里有很多数据包是吧？那你怎么确定你要的数据是在哪个数据包里面呢？比如说我这里要去获取这些热搜的数据，我要去搜的话呢，就这个村庄免费， 村庄免费把，我要去搜索这个，呃，关键词他在哪个数据包里面，这个数据他在哪个数据包里面，就可以通过这个搜索来去搜，点击这样的一个刷新，或者说去回车也能去进入到搜索的一个结果当中。好 搜索到了，他是在这个数据包里面，你可以去点击，他就会跳转到这个数据包里面去了啊，这个是搜索的一个用途，他这里就只有一个结果， 就是说他就只有一个税包存在了这个村庄免费的一个关键词，这里一处，这里一处，这里一处，这里一处，一共有五处，五处都是在这个税包里面。那如果说有很多税包他都出现呢？比如说我们这里啊，去搜一个百度回车，他就有很多的数据包都出现。这个百度的关键词 啊，比如这里他出现了呢四次这个税包里面，这个呢，他也出现了很多次啊，这个就得去找，或者你去加一些权重来去减少搜索结果啊，那么这个是搜索， 再来看一下后面的这个啊，保留日记一般来说默认呢，它是关闭的状态，关闭的状态的话呢，我们这里去先给大家讲一下过滤吧，比如这里是文档过滤，文档是什么东西呢？就是 h t m l 文件，我们去过滤的话，它就是能够过滤到这样的一个 document 文档类型 啊，过滤这样的一个文档类型。那现在假设我不去保留日记啊，我每次去刷新它都就只有一个 啊，只有一个，因为咱们刚刚这里过来，他就只有一个嘛，就是说他每次去刷新或者重新去请求，他不会去保留之前的数据包，这个是不勾选保留日期他的一个效果。那如果说你给他勾选上之后呢？ 勾选上之后他就会去保留之前的，你看他这里我每刷新一次，他就会多一个保留了之前的一些数据包，这个是保留日期。那么现在我们这里再去回到全部这个地方，你会发现啊，他这里会有很多的内存缓存， 就好比是啊，再给你用之前的一些内存里面的东西，那假设你不想让他去获取内存缓存里面的，就想让他每次都给咱们最新的数据包返回，就要去勾选上这个停用缓存。 好，勾选上之后，我这里再来去给它清空一下之后再来去刷新，他就没有再去用内存缓存里面的东西了，但是可能有极少数的一些数据包，但那些都不影响啊，都不影响， 极少数可能会还会用到这个那种缓存，但这个是不影响的。好，这里是停用缓存，那么后面呢就不用去管他了，基本上用不到。那么过滤呢？这里给大家说过了，他是名称过滤，我们这里可以通过一些名称，比如这个三 w 点、百度点 com， 你 去过滤他就只能过滤到这样的一个数据包了，是吧？那如果说你去过滤一个百度的话呢， 他就有很多都出现了百度的一个啊关键词，但他这里你可能看不到，他里面还会有很长的啊，还会有很长。好，这个就是名称过滤，然后类型过滤的话呢，在这个地方会 有啊，一个是全部就是全部的数据包，一个呢是叉 h r， 就是 呃，一部加载的动态加载的数据包。文档呢，就是咱们刚刚所说的啊，而且里面有文件， css 呢，就是 css 文件， gs 呢，就是 gs， 就是 它这个是 script 啊， gs 文件里面写的是 gs 代码字体文件。图片， 它这个图片呢不只是一种后缀，它只要是图片的后缀都会符合这样的一个图片的类型。 媒体呢，在这里会有一个视频啊，比如说视频呢，音频呢，它就是属于媒体文件清单呢，我们这里不用去管它套接字啊，目前这里还没有，一般它就只会存在一些特殊的页面当中， wism 它也是一样的。还说其他 其他的话，一般来说它就会出现一些什么 ping 的 类型呢，或者说一些 i、 c、 o n 图标的类型，一般来说其他的数据包咱们要去获取的也比较少，那么这个就是，嗯，这里的过滤啊，那再回到这个全部这里来， 在这个地方呢，它会有很多的数据包，名称、状态类型、启动器大小和时间名称，就它这个数据包的名字。状态呢，是状态码的意思，两百就表示就是成功的接收，接收请求并且响应，然后还有一些什么三开头的，一般来说三开头的是， 嗯，缓内内存，缓存或者说跳转啊，就是重定向的意思。那么重定向又分为临时临时重定向和永久重定向，这个我就不跟大家多说了啊，他就是重定向，从这个税包然后去跳到另外一个税包就重定向， 然后，呃，类型的话呢，是这个税包它的一个类型，也给大家说过了，起动性呢，就是这个税包它加载所要去走的一些站，它里面会有一些站， 这个地方找一个 gs 来看一下啊，它的一些站就好比是这里是什么呢？起点，这个地方是终点，这个税包它加载会走这样的一些路，每一个站就相当于是驿站嘛，驿站，驿站，驿站，一个点一个一个的点， 大小呢，就是这个税包它整个的一个内存资源占用的是多少啊？不，这里是什么？一百八十六啊，三点三 kb， 它可以通过排序啊，也可以通过排序。时间呢，就是这个税包它加载所耗费的时间，我们可以通过这里的 点击可以去升序和降序啊，升序、降序、排序它都是可以去实现的。那假设我们这里啊， 再来去顾虑到这个文档类型，它就只有这样的一个三 w 点 com 的 一个数据包了，点进来之后一看它还会有什么标头，预览响应，启动器时间、 cookie， 然后常规响应标头以及请求标头。 常规呢，就是这个书包他的一些基本信息，比如他的一个请求网址，请求网址什么东西呢？就是你要去得到这个书包，他的响应内容，就必须要去请求这样的一个链接，他的求方法呢？是 get 状态码，这刚刚咱们说了啊，远程地址呢？这个你可以不用管他这个什么引用来源网址政策，也可以不用管他响应标头呢，是他给咱们返回的一些参数， 一般来说这个东西在例向当中的那个加速的可能会用到，基本上其他的不太会用到啊。然后再就是请求标头，请求标头呢，就是我们要去请求这个数据包所要去携带上的一些参数，比如说 cookie 是 我们的用户身份 啊，这个路由器呢是浏览器的身份，它可能还会有一些 server， 其他的参数， server 呢？表示防盗链就是你的一个跳转来源，这个地方还有什么主机地址，还有些什么一些其他的编码，什么文件类型之类的一些东西啊， 这个我们只是了解它就可以了，因为你真正的去做爬虫的时候啊，会用那个 c v i 来做转换，它可以自动的帮你去携带上 预览呢，就是你的这个响应当中，响应就是这个书包它里面的内容，它是根据响应的一个 东西啊，响应的一些内容呢？给它做的一个预览，它响应是什么啊？在这里会去预览成什么样的个形式？比如说它响应里面是呃静止格式的，所以那么它可能是什么呢？啊？图片呢？ 就在图片，它可能会在这里去能预览成功，视频和音频它是预览不成功的，包括一些什么 gs， 它在这里的话我们可以看一下 gs， 它的预览就是这样个 gs 文件啊， gs 文件呢，它在这里是一个字典啊，这个都是 根据不同的文件类型来去有不同的预览响应。咱们刚说了啊，就是它这个税包的响应内容，其中这个税包能够得到这个响应内容，其中现在其其实就是那个站啊，就是这个站区 时间就是它的一个加载时间。 cookie 呢就是浏览就咱们的用户身份，所以整个的开发者工具咱们会用到的就是这么多。你看完这个视频之后啊，你基本上就不会再有 基本基础上的一些问题了，除非是那种特别难的啊，一些逆向上的东西呢，可能他会需要去接触到一些其他的啊开发者工具的功能来去实现啊。但目前咱们了解这样的一些功能呢，就已经是能够解决百分之九十五的问题了，对吧？啊？那么这就是咱们的浏览器开发者工具的讲解啊。