Chrome浏览器中F12功能的简单介绍

前言:
Chrome浏览器F12开发者工具开发人员的利器,查看了一些博客和资料，简单总结一下~

常用页面

Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等

• 元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
• 控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。
• 源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
• 网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。

元素（Elements）

1. 查看元素代码：点击如图箭头（或用者用快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置：
   

2. 查看元素属性：可从被定位的源码中查看部分，如class、src，也可在右边的侧栏中查看全部的属性，如下图位置查看：

3. 修改元素的代码与属性：可直接双击想要修改的部分，然后就进行修改，或者选中要修改部分后点击右键进行修改，如下图：

注意：这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用

4. 右边的侧栏个功能的介绍:如下图所示
   

控制台（Console）

1. 查看JS对象的及其属性
2. 执行JS语句
3. 查看控制台日志：当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉。

源代码（Sources）

其主要功能如下介绍:

网络（Network）

1. 主要功能如下：
   

2. 请求文件具体说明：
   

3. 分为四个模块：

• Header：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
• Preview：预览面板，用于资源的预览。
• Response：响应信息面板包含资源还未进行格式处理的内容
• Timing：资源请求的详细信息花费时间

---

小技巧

只分析异步请求资源

【Network】下面点击“XHR”，这样就只会显示XHR异步请求资源，以便于快速分析请求Headers和Response

快速查找并定位文件

1. 查看源代码，鼠标移到开发工具窗口，按ctrl+p，输入链接地址的前几个字母，会自动联想显示所有符合条件的地址，点击打开即可。（有时第一次打开是空白内容，可再点击一次链接）
2. 打开之后，如果是js内容，就可以直接在上面打断点调试，另外可以点击内容框的左下角大括号图标“{ }”(pretty print)，对代码进行排版美化。
   

参考文档：

1. https://blog.csdn.net/m0_37724356/article/details/79884006

—— 感谢您的阅读 ( ﾟ∀ﾟ) 有什么疑问可以在下方留言哦 ——