介绍作为一个开发者，我平时用的最多的是Chromedevtools，但是可能很多同学跟我一样平时用得最多的就是Console和Elements面板。整理了一些自己平时用的比较多的调试技巧，相信对大家提高工作效率会有很大的帮助！Command（命令）菜单“Command”菜单是最常用的，在本文中会多次使用，所以这里先介绍一下打开方式：按Cmd+Shift+P（如果你使用Windows，按Ctrl+Shift+P)打开命令菜单。ScreenshotDOMElements当你只想截取特定DOM节点的屏幕截图时，你可能不得不使用其他工具很长时间，但现在你只需选择该节点，打开命令（Command）菜单并使用NodeScreenshot。上图对应的截取特定节点的命令为ScreenshotCapture节点截图。截取特定的DOM元素示例：不仅如此，您还可以使用这种方式实现全屏截图：通过ScreenshotCapture全尺寸截图命令。?请注意，这里所说的全屏，不仅仅是页面的可见区域，而是包括滚动条在内的所有页面内容。?对应全屏拦截的例子：利用控制台上次操作的值最近才发现这个trick。使用$_来引用之前在控制台上执行的操作的返回值。如果您正在控制台调试一些JavaScript代码并且需要引用以前的返回值，这会非常方便。重新发起xhr请求平时和后台联调的时候，我们用的最多的可能是Network面板。但是每次我们要审核一个请求时，往往会通过刷新页面、点击按钮等方式触发xhr请求，这种方式有时会比较麻烦。我们可以通过Google提供的ReplayXHR方法发起一个新的。Request，这个对于提高我们的开发效率很有帮助。编辑页面上的任何文本在控制台中输入document.body.contentEditable="true"或document.designMode='on'以编辑网页。其实，这是很实用的。比如你要测试一个DOM节点的样式是不是太长，样式会乱，或者你想直接修改页面元素来满足一些业务需求。（我以前都是在Elements面板中一一修改的，，，）Network面板（Network）的slideshow模式启动Network面板下的Capturescreenshots，在页面加载时进行截图。有点像幻灯片放映。点击每一帧的截图，可以显示相应时间发生的网络请求。这种可视化显示将使您更加了解每时每刻发生的网络请求。动画检查DevTools有一个动画面板，默认是关闭的，可能很多人不知道这个功能。它可以让您控制和操纵CSS动画，并可视化这些动画的工作原理。要打开此面板，请在DevTools右上角菜单中打开动画→更多工具：默认情况下，DevTools“侦听”动画。一旦触发，它们将被添加到列表中。您可以看到这些动画块是如何显示的。在动画本身上，DevTools将向我们展示哪些属性正在发生变化，例如背景颜色或变换。然后我们可以通过鼠标拖动或调整时间线来修改这个动画。递增/递减CSS属性值作为前端开发，通常需要通过Elements面板查找元素及其css样式。有时候调整pixelpx有点麻烦，那么可以用快捷键帮你完成：*increment0.1*Mac:Option+UpandOption+Down*Windows:Alt+UpandAlt+Down*Increment1*Mac:Up+Down*Windows:Up+Down*Increment10*Mac:?+Upand?+Down*Windows:?+Upand?+Down*Increment100*Mac:?+Upand?+DownUnder*Windows:Ctrl+Up和Ctrl+Down在低端设备和弱网络上测试。我们一般在办公室开发（wifi网速加快），设备一般都是市面上较新的。但是，产品的开发和推广必须考虑低设备人群和弱网络的情况。CPU能力和网络速度可以在ChromeDevTools中轻松调整。这样，我们就可以测试Web应用程序的性能并进行相应的优化。具体打开方法为：在ChromeDevTools中通过CMD/Ctrl+Shift+p打开命令菜单。然后输入ShowPerformance打开性能面板。copying&saving在调试的过程中，我们总会将DevTools中的数据进行复制或保存。其实他们也有一些花样！copy()可以使用全局方法copy()复制任何你能在控制台获取到的资源Storeasglobalvariable如果你在控制台打印了一堆数据，想对这堆数据做额外的操作，你可以store它作为一个全局变量。只需右键单击它并选择“存储为全局变量”选项。第一次使用时，它会创建一个名为temp1的变量，第二次会创建temp2，第三次...。通过使用这些变量来操作相应的数据，不用担心会影响到它们的原始值。Customdevtools最常用的Chrome主题可能是白色/黑色，但是用久了，难免想尝试像IDE一样切换主题。要开启该方法，您首先需要在实验模式下启用允许自定义UI主题。在地址栏中输入以下urlchrome://flags/#enable-devtools-experiments#Enabletheexperimentalfunction启用实验功能，并重启浏览器控制台，使用快捷键F1打开设置。切换到Experiments选项，启用AllowcustomUIthemes，从Chrome商店安装MaterialDevToolsThemeCollection扩展，然后选择您喜欢的主题。CSS/JSCoverageChromeDevTools中的Coverage特性可以帮助我们查看代码覆盖率。打开调试面板使用快捷键shift+command+P（mac）进入ShowCoverage调出对应面板，点击reload按钮开始检测，点击对应文件查看具体覆盖率（绿色为codeused,redisUnusedcode)自定义代码片段Snippets在平时的开发过程中，我们经常会有一些JavaScript代码需要在ChromeDevtools中调试，直接在控制台写比较麻烦，或者我们经常会有一些代码snippets（防抖、节流、获取地址栏参数等）我想存起来，每次打开Devtools都可以得到这些代码片段，不用再去google。ChromeDevtool正好提供了这个功能。如图所示，在Sources选项卡下，有一个Snippets选项卡，可以在其中添加一些常用的代码片段。将图像复制为数据URI使用选择网络面板打开在资源面板中选择Img右键单击??以复制为数据URI（base64编码）媒体查询媒体查询是响应式网页设计的基本部分。在ChromeDevtools的设备模式下，单击三点菜单中的ShowMediaqueries以启用：Devtools将检测样式表中的媒体查询，并将其显示为顶部标尺中的彩色条：那么如何使用它？其实很简单：点击一个媒体查询栏，调整视口大小，预览适合目标屏幕尺寸的样式右键点击一个栏，查看媒体查询在CSS中定义的位置，跳转到定义key/values中源码这是Devtools提供的一个API，可以快速查看一个对象的key和values。使用起来也很简单：?你可能会说Object.keys()和Object.values()也可以实现，但这不是更简单吗？🤠?tableDevtools用于将对象数组记录为FormAPI：
