1。使用隐身模式隐身模式或隐私模式将使用单独的用户配置文件，浏览器重启后不会保留cookies、localStorage或缓存文件等数据。每个会话都以干净状态开始，因此非常适合测试登录功能、首次呈现性能和PWA程序。2、自动启动DevTools在开发过程中，一般需要启动浏览器，打开DevTools，打开我们开发的URL。我们可以在浏览器启动命令中添加一些配置，整个过程可以一键自动化。最好创建一个新的快捷方式或脚本以在开发模式下启动，然后为Chrome添加以下配置：--incognito以隐身模式启动--auto-open-devtools-for-tabs启动DevTools并将测试url放在最后，比如http://localhost:8000/如果是Windows系统，配置可能如下："C:\ProgramFiles\Google\Chrome\Application\chrome.exe"--incognito--auto-open-devtools-for-tabshttp://localhost:8000有一些其他有用的配置：--allow-insecure-localhost忽略本地主机域上的SSL错误--disable-extentions禁用影响呈现的Chrome扩展程序，例如广告拦截器--window-size=，设置初始窗口大小--window-position=，设置初始窗口位置--user-data-dir=""设置用户配置文件目录。3.使用命令面板Chrome的DevTools提供了一个类似编辑器的命令面板。在任何DevTools面板中，按Ctrl|Cmd+Shift+P，然后按名称搜索选项：4.查找未使用的JavaScriptChrome的Coverage面板可让您快速查找是否正在使用JavaScript。首先，从DevTools菜单的Moretools子菜单中打开Coverage。重新加载页面，面板将使用条形图显示未使用代码的百分比：单击任何JavaScript文件，未使用的代码将以红色条突出显示。5.查找DOM更改代码当触发事件时，可能很难确定哪个函数负责更新特定的HTMLDOM元素。要查找进程，请右键单击“元素”面板中的任何HTML元素，然后从“中断”子菜单中选择一个选项：选择：子树修改以侦听对元素的更改或子元素属性修改以侦听属性（例如类)ofanelementWhenchangesnoderemoval监听元素何时从DOM中移除，当此类事件发生时，Sources面板中会自动触发断点。6.互联网速度限制在快速、可靠的网络上使用高性能设备测试您的站点可能并不代表实际使用情况。您的用户可能处于缓慢的网络环境中。“网络”选项卡提供了一个节流选项，可以人为地降低HTTP上传速度、下载速度和延迟。这可以帮助您确定性能瓶颈的原因：7.过滤网络请求DevTools的网络面板提供了几个过滤器，包括一个仅显示JavaScript请求的JS按钮。可以输入请求的URL进行模糊搜索，它也接受一些特殊的过滤器，包括：过滤缓存的请求：is:cached过滤不完整的请求：is:running识别大请求：larger-than：识别第三方来源：域：8。黑盒脚本有时，您不需要确切知道JavaScript错误发生的时间和地点。调试一些第三方库（React、Vue.js、jQuery等）或者第三方脚本的问题，通常是没有用的，你也改不了这些库。DevTools允许脚本被黑盒化，因此即使您选择进入调试器中的函数，它们也不会在调试器中打开。在ChromeDevToolsSources面板中，打开一个文件，右键单击代码中的某处，然后选择将脚本添加到忽略列表。或者，单击“设置”，然后切换到“忽略列表”选项卡。检查添加内容脚本以忽略列表并使用正则表达式输入任意数量的文件名模式，例如jquery.*\.js:9.使用logpointsconsole.log()在整个文件中自由插入调试语句效果很好，但logpoints提供了一种无需编写任何代码即可获取相同信息的方法。要添加日志点，请在“源”面板中打开一个脚本，右键单击任何行号，然后选择“添加日志点”。输入诸如“Thevalueofxis”,x之类的表达式，每当执行该行代码时，DevTools控制台中都会显示一条消息。日志点通常会在页面刷新之间持续存在。10.使用条件断点在“源”面板中单击打开文件的行号会添加一个断点。它会在该行暂停脚本，以便您可以单步执行代码以检查变量、调用堆栈等。断点有时不能很好地工作，例如，如果您在运行1000次的循环的最后一次迭代中遇到错误。此时您可以添加一个条件断点，使其仅在满足特定条件时触发，例如i>999。您可以右键单击行号，选择添加条件断点，然后输入条件表达式。11.停止无限循环触发无限循环是程序中很常见的一个bug，它可能会导致浏览器崩溃。要停止ChromeDevTools中的无限循环，请打开源面板并单击调试暂停图标以停止脚本。按住相同的图标，然后选择方形停止图标以停止脚本执行。12.重新运行Ajax请求浏览器JavaScriptAjax调用通常使用Fetch或XMLHttpRequestAPI发送请求。这些请求显示在DevTools网络面板中，可以使用XHR按钮进行过滤。DevTools显示了很多信息，但有时您需要重新运行Ajax调用。您可以右键单击任何请求并从“复制”子菜单中选择一个选项：选项包括WindowsPowershell、cURL和JavaScriptFetch语法中的命令复制。13.启用本地文件替换Chrome允许任何HTTP请求使用您设备上的本地文件，而不是通过网络获取它。这使您能够：无需构建工具即可实时编辑脚本或样式离线开发通常需要第三方域来提供基本文件的网站临时替换不必要的脚本，例如分析。在您的本地PC上创建一个用于存储替换文件的目录，比如localfiles，然后打开Chrome的DevToolsSources面板。打开左侧窗口中的Overrides选项卡，单击+Selectfolderforoverrides并选择您创建的目录。系统将提示您允许将文件保存在本地，并会出现一个目录：现在打开“页面”选项卡并找到所有源文件。有两种方法可以将其添加为本地覆盖：右键单击文件并选择保存覆盖，或打开文件，编辑它，然后使用Ctrl|命令+小号。文件图标显示有紫色覆盖指示器：它也将显示在覆盖选项卡和本地文件目录中。该文件可以在Chrome中或使用任何代码编辑器进行编辑，无论何时重新加载页面，都会使用更新后的版本。14.管理客户端存储网页可以使用多种技术在客户端存储数据。ChromeDevTools中的应用程序面板允许您添加、检查、修改和删除cookie、存储在缓存存储中的值、localStorage、sessionStorage、IndexedDB和WebSQL。Chrome中的“存储”选项卡显示本地存储了多少数据，并提供了一个快速清除站点数据的选项。15.模拟移动硬件智能手机和平板电脑通常包括全球定位系统(GPS)、陀螺仪和加速度计等硬件。这些通常在PC上不可用，这使得使用地理定位等API进行开发变得非常困难。Chrome可以在DevTools中模拟设备硬件-从更多工具菜单中选择传感器：有几个选项：选择主要城市或输入自定义纬度和经度。也可以使该位置不可用以模拟微弱的GPS信号。使用预设或自定义指标设置设备方向。您可以点击智能手机并将其围绕X轴拖动到任何Y轴，或按住Shift键以围绕Z轴旋转。强制触摸而不是鼠标或其他本机设备事件。设置空闲状态以检查您的应用程序如何响应锁定屏幕。
