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脚本互相不知道对方的存在，无法访问对方的变量和函数）