文章目录 DevTools面板选项卡认识Elements元素面板（HTML+CSS）Console控制台（错误信息）Network网络面板（请求信息）Source调试面板（JS调试）调试技巧
简介: JavaScript作为解释性语言，对于Web也来说，它的运行环境是浏览器（主要介绍Chrome），如果每次都是靠console.log()或alert()来打印临时变量进行程序调试，效率就太低了。
Chrom DevTools官方文档 DevTools面板在网页鼠标右击-检查 或者 F12打开DevTools
选项卡认识Chrome浏览器的DevTools为我们提供了十分强大的功能，界面按钮和信息繁多。
1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态
2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择
名称描述Elements 元素面板，查看Web页面的HTML与CSS，最重要的是可以双击元素，对当前页面进行修改Console 控制台面板JavaScript输出信息的控制台，在这里可以查看到,JS的错误信息，也可以执行键入的,JS脚本Sources 源代码面板我们在这个页面对JS代码进行调试，可设置断点Network 网络面板可以明确的查看到访问Web页面所产生的全部请求（包括应答状态、响应时间、数据量等信息）和下载的资源文件，并可以模拟不同的网络状态（在线、离线、3G等）下对Web的加载情况，可以用于分析和优化网页加载性能Performance 性能面板记录和查看Web页面在浏览器中运行时的性能表现（注意是运行时，而不是加载时），主要用于发现Web页面运行时性能瓶颈和性能调优Memory 内存面板记录执行JS函数对CPU和内存的使用情况，可以识别开销大的JS函数，跟踪内存泄露，帮助代码优化，提高JS执行性能Application 应用面板记录Web页面加载的所有资源信息，包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等Security 安全面板查看Web页面的安全和认证情况，确保网站上正确地实现了HTTPSAudits 审计面板从性能（Performance）、PWA兼容性（Progressive Web App）、可访问性（Accessibility）、最佳实践（Best Practices）、搜索引擎优化（SEO）这五个维度给你的网站打分，并给出一份评估报告和优化建议，可以说是非常的强 Elements元素面板（HTML+CSS）用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息，下图我们可以看到当我鼠标选择id 为lg_tar的div元素时，右侧的css样式对应的会展示出此id 的样式信息，此时可以在右侧进行一个修改，修改即可在页面上生效， 灰色的element.style样式同样可以进行添加和书写。
唯一的区别是，在这里添加的样式是添加到了该元素内部，实现方式即：该div元素的style属性，这个页面的功能很强大，在我们做了相关的页面后，修改样式是一块很重要的工作，细微的差距都需要调整，但是不可能说做到每修改一点即编译一遍代码，再刷新浏览器查看效果，这样很低效，一次性在浏览器中修改之后，再到代码中进行修改对应的样式
实时编辑样式
在 Styles 窗格中实时编辑样式属性名称和值。所有样式均可修改，除了灰色部分（与 User Agent 样式表一样）。
要编辑名称或值，请点击它，进行更改，然后按 Tab 或 Enter 保存更改
默认情况下，您的 CSS 修改不是永久的，重新加载页面时更改会丢失
检查和编辑框模型参数
使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改，只需点击它们即可
同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值。
对于位置为非静态的元素，还会显示 position 矩形，包含 top、right、bottom 和 left 属性的值
对于 position: fixed 和 position: absolute 元素，中心域包含选定元素实际的 offsetWidth × offsetHeight 像素尺寸。所有值都可以通过双击修改，就像 Styles 窗格中的属性值一样。 不过，无法保证这些更改能够生效，因为这要取决于具体的元素定位详情
Console控制台（错误信息）用于打印和输出相关的命令信息，其实console控制台除了我们熟知的报错，打印console.log信息外，还有很多相关的功能
Network网络面板（请求信息）可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看
所有的资源
以上我选择了All，就会把该页面所有资源文件请求下来，如果只选择XHR 异步请求资源，则我们可以分析相关的请求信息
请求的相关信息
打开一个Ajax异步请求，可以看到它的请求头信息，是一个POST请求，参数有哪些，还可以预览它的返回的结果数据，这些数据的使用和查看有利于我们很好的和后端工程师们联调数据，也方便我们前端更直观的分析数据
Source调试面板（JS调试）调试最重要的一个面板就是Source面板了，这里着重介绍这个面板的功能。打开Source面板，我们就会看到如下界面：
根据上图三个区域对应分别是：资源区、工作区、控制台
资源区
名称描述Page展示当前Web页面所包含的资源文件（图片、CSS样式表、JS脚本等）。在这里对工作区中的代码进行修改并不会保留，刷新页面就会重置Filesystem当我们的Web页面在本地时，我们就可以通过Filesystem选项卡，将本地项目文件夹添加到DevTools的工作区，以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）。所以也就可以让我们一边调试，一边修改源代码，而无需在本地和DevTools来回切换Overrides当我们的Web页面在本地时，我们就可以通过Filesystem选项卡，将本地项目文件夹添加到DevTools的工作区，以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）。所以也就可以让我们一边调试，一边修改源代码，而无需在本地和DevTools来回切换Content script用于存放的是Chrome扩展的“注入”页面的JS脚本的独立空间（这里的JS脚本共享页面DOM与消息机制，与页面的JS脚本互相不知道对方的存在，无法访问对方的变量和函数）Snippets翻译过来就是片段，可以在这里创建代码片段，并独立运行和调试，刷新页面不会丢失工作区
点击行号可以添加/移除断点，在断点上打开右键菜单可以禁用断点，以及设置断点触发条件进行编辑（比如可以设置断点在程序循环多少次后触发）
控制区
这里提供有调试操作按钮，以及一些调试信息的显示，顶部的几个按钮便是调试代码的核心按钮
上图调试按钮红框内，从左到右，各个图标表示的功能分别为：
下面我们介绍一下调试按钮下面的各项功能
名称描述Watch跟踪监控变量，点击"+"号添加变量名。Call Stack函数调用栈，显示执行路径Scope查看属性作用域Beakpoints查看属性作用域XHR/fetch Breakpoints当XHR的请求URL包含某一特定的字符串时所触发的断点DOM Breakpoints当改变一个节点或其子元素时所触发的断点Global Listeners全局监听器，绑定在 window 对象上的事件Event Listener Breakpoints事件发生时所触发的断点 调试技巧格式化代码
—end