Chrome 调试工具【DevTools】详解
前言
作为解释性语言，对于Web也来说，它的运行环境是浏览器（主要介绍），如果每次都是靠.log()或alert()来打印临时变量进行程序调试，效率就太低了。
当然之前我一直都是这样干的，因为我主要还是开发后端，前端的代码编写的不多，还能凑合调试。但当我开发扩展时，需要编写和调试大量的JS代码，这时候就不得不去掌握使用开发者工具——调试JS的技巧，不过学习起来也非常简单。如果你之前没有仔细了解过，那我相信通过这篇文章的简要介绍，应该能为你打开新世界的大门，感叹里居然“隐藏”了这么一个强大的工具。
认识
在网页鼠标右击-检查 或者 F12 打开
选项卡
浏览器的为我们提供了十分强大的功能，界面按钮和信息繁多，初次接触的话，不免得有点恐惧。不用担心，接下来我们逐个部分来了解。
名称描述
元素面板，查看Web页面的HTML与CSS，最重要的是可以双击元素，对当前页面进行修改
控制台面板,输出信息的控制台，在这里可以查看到,JS的错误信息，也可以执行键入的,JS脚本
源代码面板,我们在这个页面对JS代码进行调试，可设置断点
网络面板,可以明确的查看到访问Web页面所产生的全部请求（包括应答状态、响应时间、数据量等信息）和下载的资源文件，并可以模拟不同的网络状态（在线、离线、3G等）下对Web的加载情况，可以用于分析和优化网页加载性能
性能面板，记录和查看Web页面在浏览器中运行时的性能表现（注意是运行时，而不是加载时），主要用于发现Web页面运行时性能瓶颈和性能调优
内存面板，记录执行JS函数对CPU和内存的使用情况，可以识别开销大的JS函数，跟踪内存泄露，帮助代码优化，提高JS执行性能。
应用面板，记录Web页面加载的所有资源信息，包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等
安全面板，查看Web页面的安全和认证情况，确保网站上正确地实现了HTTPS
审计面板，从性能（）、PWA兼容性（ Web App）、可访问性（）、最佳实践（Best ）、搜索引擎优化（SEO）这五个维度给你的网站打分，并给出一份评估报告和优化建议，可以说是非常的强
面板
调试最重要的一个面板就是面板了，这里着重介绍这个面板的功能。打开面板，我们就会看到如下界面：
根据上图三个区域对应分别是：资源区、工作区、控制台
资源区 名称描述
Page
展示当前Web页面所包含的资源文件（图片、CSS样式表、JS脚本等）。在这里对工作区中的代码进行修改并不会保留，刷新页面就会重置
当我们的Web页面在本地时，我们就可以通过选项卡，将本地项目文件夹添加到的工作区，以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）。所以也就可以让我们一边调试，一边修改源代码，而无需在本地和来回切换
当我们的Web页面在本地时，我们就可以通过选项卡，将本地项目文件夹添加到的工作区，以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）。所以也就可以让我们一边调试，一边修改源代码，而无需在本地和来回切换
用于存放的是扩展的“注入”页面的JS脚本的独立空间（这里的JS脚本共享页面DOM与消息机制，与页面的JS脚本互相不知道对方的存在，无法访问对方的变量和函数）
翻译过来就是片段，可以在这里创建代码片段，并独立运行和调试，刷新页面不会丢失
工作区
点击行号可以添加/移除断点，在断点上打开右键菜单可以禁用断点，以及设置断点触发条件进行编辑（比如可以设置断点在程序循环多少次后触发）
控制区
这里提供有调试操作按钮，以及一些调试信息的显示，顶部的几个按钮便是调试代码的核心按钮
名称描述
Pause/
暂停/恢复脚本执行（程序执行到下一断点停止）
Step over next call
执行到下一步的函数调用（跳到下一行）。
Step into next call
进入当前函数。
Step out of
跳出当前执行函数。
/ all
关闭/开启所有断点（不会取消）
Pause on
异常情况自动断点设置。
名称描述
Watch
跟踪监控变量，点击"+"号添加变量名。
Call Stack
函数调用栈，显示执行路径。
Scope
查看属性作用域。
查看属性作用域。
XHR/fetch
当XHR的请求URL包含某一特定的字符串时所触发的断点。
DOM
当改变一个节点或其子元素时所触发的断点。
全局监听器，绑定在 对象上的事件。
Event
事件发生时所触发的断点。
调试小技巧 格式化调试代码，如下图：
设置（屏蔽JS库）
很多时候我们都会调用已封装好的库代码，最常用的比如，设置可以将代码给屏蔽掉，调试时就不再进入源文件中去了。
这样做可以省去我们调试的很多麻烦，提高调试效率，所以很有必要学会使用。
名称描述
这是针对于扩展的JS脚本的一个屏蔽设置，如果你开发过扩展应该明白。
自定义JS文件名匹配规则（可以使用正则表达式）。
启用，关闭。
Add
添加一个新的匹配规则。
参考文档
