大家好，我叫CUGGZ。ChromeDevTools提供了许多有用的功能来调试源代码、捕获元素状态、更新和测试元素属性、模拟各种设备环境等等。今天学习一些超级实用的调试技巧！1.选择和检查DOM元素在ChromeDevTools的控制台面板中，您可以输入一些带有$的命令来选择和检查DOM元素。$0-$4命令可用于显示元素面板中检查的最后五个DOM元素，$0返回最近选择的元素，$1返回之前选择的最后一个元素，等等。$(selector)返回对具有指定CSS选择器的第一个DOM元素的引用。此命令等效于document.querySelector()函数：$$(selector)返回与给定CSS选择器匹配的元素数组。该命令相当于document.querySelectorAll()函数：2.复制数据在日常开发中，我们会使用ChromeDevTools调试页面，比如修改页面样式、节点属性等，它为我们提供了复制数据的功能,可以将修改后的内容复制到源代码中。复制CSS样式：我们可以复制CSS规则或声明，甚至可以将内容复制为JavaScript键值对：//Copyruleelement.style{max-height:90%;max-width:90%;}//CopyalldecalarationsasjsmaxHeight:'90%',maxWidth:'90%'//Copypropertymax-height//Copyvalue90%复制HTML内容，右击元素copied->Copy，点击要复制的内容类型：copyrequestData：3.发送XHR请求ChromeDevTools支持重新发送XHR请求。与后端进行接口联调时，如果想重发请求，参数不变，可以直接右键需要重发的XHR请求，点击ReplayXHR重发请求：对于一个请求，有时候你需要修改请求参数并重新发送，可以直接在控制台发送请求。只需右击需要重发的XHR请求，选择Copy->Copyasfetch：将复制的请求内容粘贴到Console面板，修改需要的参数，回车即可发送请求：4.颜色选择器ChromeDevTools提供了一个颜色选择器来设置背景颜色和文本颜色。具有多种功能的颜色选择器：具有多种功能的颜色选择器，例如色调控制。使用滴管从页面元素中选择颜色。切换调色板。您可以在当前颜色的RGBA、HSLA和十六进制表示之间切换。不透明度控制。只需点击元素样式的颜色显示块，即可弹出颜色选择器：可以使用吸管直接从页面中绘制颜色：5.监听事件可以在ChromeDevtools的Console面板中输入monitorEvents()来监听指定目标的事件信息。这个方法有两个参数，第一个参数是要监控的对象。如果没有提供第二个参数，则返回所有事件。要指定要侦听的事件，请将字符串或字符串数??组作为第二个参数传递。比如监听页面body的点击事件：可以调用unmonitorEvents()方法停止监听事件，需要传递一个参数来停止监听该对象。例如停止监听body对象的事件：6.查看未使用的CSS可以在Coverage面板中查看页面中未使用的CSS和JavaScript代码，可以通过以下步骤打开Coverage面板：点击刷新按钮开始重新加载页面，测试页面的代码覆盖率：检查页面的资源使用情况，点击查看哪些代码没有被使用，可以删除那些没有使用的代码，以尽量减少CSS文件的大小：对于测试结果，可以进行筛选筛选、下载等操作。7、引用HTML元素在ChromeDevTools的Elements面板中右键点击要引用的HTML元素，选择Storeasglobalvariable将其保存为变量，Console面板中会打印其变量名：8.Logpoints(logpoint)是一种在不使用console.log()的情况下向控制台提供调试信息的方法，这在调试实时应用程序时非常有用。可以通过右键单击DevTools中“源”选项卡中的任意行并指定要记录的表达式来添加新的日志点。当该行被执行时，它的值是在控制台中获得的。使用这个函数可以减少调试代码，提高代码的整洁度。而且，在线应用程序也可以直接添加控制台输出。9.动态表达式动态表达式是一种显示表达式值变化的功能。这有助于追踪昂贵的表达式（如动画中使用的表达式）或变化很大的表达式（例如，如果您正在遍历数组）的问题。它将Console面板中的表达式置顶，并且可以随着用户点击动态刷新置顶的表达式。只需点击下图中的眼睛图标，然后输入一个你想要置顶的JavaScript表达式：10.调试动画ChromeDevTools提供了检查和修改动画的功能。它帮助我们在特定时间范围内播放动画、修改动画时序和分析视图。只需在Moretools->Animations中打开动画面板进行调试：动画检查器（AnimationInspector）分为四个主要部分：控件（Controls）：从这里可以清除所有当前捕获的动画组，或者改变当前的速度选定的动画组。概述：在此处选择一个动画组以在详细信息窗格中检查和修改它。时间线：从这里暂停和开始动画，或跳转到动画中的特定点。详细信息：检查并修改当前选中的动画组。
