【爬虫】01.浏览器F12-开发者工具的妙用

w1wi

已于 2024-03-07 18:56:23 修改

阅读量1.9k

点赞数 19

分类专栏：爬虫文章标签：爬虫 html 前端 javascript

于 2024-03-07 17:00:27 首次发布

本文链接：https://blog.csdn.net/qq_45349888/article/details/136517966

版权

爬虫专栏收录该内容

3 篇文章 0 订阅

订阅专栏

F12调试窗功能
- **1.如何开启调试窗口？**
- 2.调试窗口的简单介绍
- - **1.Element**
  - - 定位
    - 删除、修改
    - 摘取
  - 2.Console
  - 3.Source
  - - 3.1.page页面
    - 3.2Filesystem页面
    - 3.3Overrides页面
    - - 3.3.1手动创建重写的js文件
      - 3.3.2利用浏览器自动创建重写文件
      - 3.3.3 利用Fiddler替换js文件
    - 3.4Snippets页面
  - 4.Network
  - - **1.数据包过滤区域**
    - **2.时间轴区域**
    - **3.数据包区域**
  - 5.Application
总结

F12调试窗功能

1.如何开启调试窗口？

F12、Ctrl+Shift+I、在浏览器中找到开发者工具选项。多了解几种调试窗口的打开方式，有些时候能够绕过禁止快捷键打开调试窗口的反调。
在这里插入图片描述

2.调试窗口的简单介绍

在这里插入图片描述

常用功能进行介绍：

1.Element

可以直接对html源代码进行定位、删除、修改、摘取等操作。

定位

1.可以大致的翻一下代码，当移动到正确的代码位置时，对应页面也会有框选提示

在这里插入图片描述

2.点击调试窗口左上角的光标按钮，选中页面中想要选取的功能，单击即可找到对应代码。
在这里插入图片描述

3.在页面中找到想要获取的元素位置，右键→检查，即可跳转到对应代码
在这里插入图片描述

删除、修改

还是以bing的搜索按钮为例，为了演示我们可以对元素先进行复制
在这里插入图片描述
然后右键选择Delete element即可删除

当然我们还能对标签内部进行属性的添加和修改，具体操作可以选择想要修改的元素→右键→Add attribute/Edit attribute。或者直接对想要修改的元素进行双击即可。
在这里插入图片描述

摘取

这个功能非常实用，能够让我们在编写脚本的时候快速对元素定位。
在这里插入图片描述

2.Console

用于单行执行js代码，可以结合断点调试做一些赋值，取值操作。
在这里插入图片描述

3.Source

Source-源代码页面，可以用来对当前打开网站的资源进行查看，当然也能对js代码进行代码编写、调试、重写等操作。

3.1.page页面

其中，page页面就是用于对网站资源的查看，在这里我们能够轻松的找到我们想要的js文件，当然这些文件都是只读状态，并不能进行修改操作。
在这里插入图片描述

3.2Filesystem页面

点击Add folder to workspace，选择一个本地目录进行关联
在这里插入图片描述
在关联的时候需要对文件访问的权限进行获取，点击允许即可，这样我们就能做一些代码编写的操作。

3.3Overrides页面

3.3.1手动创建重写的js文件

代码重写页面，也是需要先关联一个本地目录作为工作区。当我们有对page页面中的代码重写需求的时候，可以创建一个与page页面目录结构相同的文件(重点)，然后加入到Override页面中，这样才能对该文件进行修改。
在这里插入图片描述

3.3.2利用浏览器自动创建重写文件

当然，也可以直接找到我们需要修改的文件，右键→选择Save for overrides，这样也能创建一个与原本文件目录结构相同的文件。
在这里插入图片描述

创建成功后，我们尝试着对js代码进行简单的修改，然后我们点击登录按钮，触发代码，发现，在控制台上打印了我们想要打印的内容，说明代码修改并执行成功。
在这里插入图片描述

但遇到带有其他参数，例如时间戳的就不那么好用。例如：xxx.com?_t=16611111

3.3.3 利用Fiddler替换js文件

当然，不仅仅能利用浏览器自带的功能进行代码重写，也可以使用Fiddler对服务器发送的js文件进行截获，修改后再发送至浏览器端。

具体流程就不演示了，大概说一下做法。

在捕获到的文件中找到想要修改的js文件，并拖放到右侧的AutoResponse模块中，进入AutoResponder模块后，勾选Enable rules和Unmatched requests passthrough选项并添加自动替换规则，将本地编辑的JS代码替换在线加密的JS代码，然后刷新页面即可。

当然，Chrome中也有插件能够实现类似功能

https://github.com/annnhan/ReRes

3.4Snippets页面

这个页面可以写一些临时的测试代码，并且可以正常的进行下断、调试等操作。而且点击运行按钮之后该代码还能对网页造成影响。不仅如此在调试的时候我们还能结合Console界面进行一些赋值、变量输出等操作。其功能不亚于自己本地配置的js环境。
在这里插入图片描述

4.Network

首先我们来了解一下这几个小功能：
在这里插入图片描述

从左到右分别是：停止抓包、清除数据包记录、筛选、数据包关键字搜索、数据包记录(勾选上后刷新页面不会首先清除之前抓到的数据包)、禁止缓存。
其中，数据包记录和禁止缓存选项建议勾选上，方便调试。最后，介绍一下最右边的两个按钮，分别是用于导入HAR文件和导出HAR文件。(HAR文件是将当前状态进行记录，方便发送给别人进行调试，可以导入到浏览器中调试或者Fiddler中调试)

然后，就是介绍下面几个重要的区域：
在这里插入图片描述