使用 Chrome 浏览器调试工具 (DevTool) 的 15 个技巧和秘诀

很多前端都会天天用到chrome调试工具，但是，很多人却不太深入理解chrome的DEVTOOL。今天分享15个使用窍门，帮助你更好的使用和进行前端开发。

1.使用隐身模式

隐身模式使用单独的用户配置文件，在浏览网页或重启后，不保留cookie，localStorage或缓存文件之类的数据。每个会话均以干净的状态开始，因此非常适合测试登录系统，首次加载性能和渐进式Web应用程序（PWA）。有一些较小的限制，例如阻止安装PWA，但这些限制在开发过程中不太会引起严重问题。

通常可以从浏览器菜单或右键单击其桌面图标来访问隐身模式。chrome还可在浏览器菜单中，打开隐身模式页签。

2.自启动DevTools

要开始开发，通常需要启动浏览器（也许在隐身模式下），打开DevTools，然后导航到本地URL。通过在浏览器启动命令中添加选项，只需单击一下即可自动完成整个过程。

最好创建一个新的快捷方式或脚本以在开发模式下启动，然后为Google Chrome添加：

--incognito 以隐身模式开始 --auto-open-devtools-for-tabs 启动DevTools，并将测试网址放在末尾，例如http://localhost:8000/

在Windows设备上，通过修改桌面图标，右键修改快捷方式指向就可完成，具体代码如下：

“ C：\ Program Files \ Google \ Chrome \ Application \ chrome.exe” --incognito --auto-open-devtools-for-tabs http：// localhost：8000

其他有用的Chrome 配置参数包括：

--allow-insecure-localhost 忽略localhost域上的SSL错误 --disable-extentions 开始时不使用可能会影响渲染的扩展程序，例如广告拦截器 --window-size=, 设置初始窗口大小 --window-position=, 设置初始窗口位置 --user-data-dir="

"设置用户配置文件目录。因此，Chrome的不同实例可以使用不同的用户个人资料。可以删除目录以擦除所有先前的数据。 还有许多其他的Chrome选项可用。

可以将类似的开关添加到chrome启动快捷方式中：

• -private 以私有模式启动
• -devtools 启动DevTools 并将测试网址放在-url选项的末尾或之后。

3.使用命令面板

Chrome的DevTools提供了和编辑器一样的命令选项板。在任何DevTools面板中，按Ctrl|Cmd+ Shift+P然后按名称搜索选项：

输入关键字，即可按其名称搜索已加载的文件。

4.查找未使用的JavaScript

Chrome的面板使您能够快速定位的JavaScript（和CSS），有代码-并没有-被使用。首先，从DevTools菜单中的More tools子菜单中打开Coverage。重新加载页面，面板将用条形图显示未使用代码的百分比：

单击任何JavaScript文件，未使用的代码在行号装订线中用红色条突出显示。

如果要测试单页应用程序，则可以浏览并使用功能来更新未使用的代码指示器。但是，重新加载或导航到新页面时，覆盖范围信息会重置。

这是了解您在代码中使用多少外部依赖关系的好工具，如果您要导入一个100kb的库并且仅使用其中的1％，那么您也会在这里清楚地看到它。

5.找到DOM节点，更改代码

当事件发生时，很难确定哪个函数负责更新特定的HTML DOM元素。要找到一个进程，请在“元素”面板中右键单击任何HTML元素，然后从“中断时”子菜单中选择一个选项：

• 修改子树以监视何时更改元素或任何子元素
• 属性修改以监视元素的属性（例如）何时class更改或
• 节点移除以监视何时将元素从DOM中移除。
• 发生此类事件时，将在“源”面板中自动激活断点。

Firefox DevTools在“检查器”窗格中提供了相同的功能。此外，Firefox会指示哪些DOM节点具有附带事件图标的处理程序。可以单击以查看更多信息，展开处理程序功能，或在调试器中打开它：

6.调节网页加装速度（网速）

在快速，可靠的网络上使用高端PC测试您的站点可能并不表示实际使用情况。您的用户的移动连接可能不可靠，或者已连接到过载的机场Wi-Fi。

“网络”选项卡提供了一个限制选项，该选项可以人为地降低HTTP上传速度，下载速度和延迟（连接或响应中的附加延迟）。这可以帮助确定性能瓶颈的原因：

基于Chrome的浏览器可让您添加自己的自定义网络配置文件。

7.过滤网络资源请求类型

DevTools的“网络”面板提供了几个过滤器，其中包括一个仅显示JavaScript请求的JS按钮。当您输入URL的一部分时，过滤器搜索框可以找到请求，但是它也接受特殊命令，包括：

• 使用以下内容过滤缓存的请求 is:cached
• 使用过滤不完整的请求 is:running
• 通过输入来识别大型请求larger-than:，其中大小以字节（1000000），千字节（1000k）或兆字节（1M）为单位，或者
• 通过输入识别第三方资源-domain:。您的域可以使用通配符，例如*。

8.黑盒调试脚本和代码

有时没有必要确切地知道JavaScript错误的发生时间，地点或位置。尝试调试无法轻松更改的库（React，Vue.js，jQuery等）或第三方脚本（分析，社交媒体小部件，聊天机器人等）中的问题通常是徒劳的。

DevTools允许脚本被blackboxed所以他们永远不会在调试器中打开，即使你选择步入其功能之一。要在Firefox中将文件黑匣子，请在“调试器”面板中打开一个文件，然后单击“忽略源代码”眼睛图标：

在Chrome DevTools源面板中，打开一个文件，右键单击代码中的某个位置，然后选择添加脚本以忽略列表。您也可以通过右键单击数字装订线，然后从菜单中选择“从不暂停”，将单个语句加黑框。

或者，单击设置齿轮图标或按F1以访问“设置”，然后切换到“忽略列表”选项卡。选中添加内容脚本以忽略列表，并使用正则表达式输入任意数量的文件名模式，例如jquery.*.js：

9.使用日志输出

console.log()在整个文件中*插入调试语句很诱人，但是日志点提供了一种无需编写任何代码即可获取相同信息的方法。

要添加日志点，请在“源”面板（或Firefox中的“调试器”面板）中打开脚本，右键单击任何行号，然后选择“添加日志点…”。输入一个表达式，例如您将在console命令中使用的表达式，例如

每当执行该行时，该消息就会出现在DevTools控制台中。日志点通常将在页面刷新之间保持不变。

10.使用条件断点

单击“源”面板（或Firefox中的“调试器”面板）中打开的文件的行号会添加一个断点。它会在执行过程中暂停脚本，因此您可以单步执行代码以检查变量，调用堆栈等。

断点并不总是可行的，例如，如果在运行1000次的循环的最后一次迭代中发生错误。但是，可以设置条件断点，以便仅在满足特定条件时才触发i > 999。要设置一个，请右键单击行号，选择“添加条件断点…”，然后输入条件表达式。

11.终止无限循环方法

写代码时，很容易触发无限循环，他导致浏览器进程不堪重负。尽管有多年的经验，但我最近一次是由于在JavaScriptfor循环中不小心反转了表达式而使它永无止境！

要在Chrome DevTools中停止无限循环，请打开“源”面板，然后单击调试暂停图标以停止脚本。按住相同的图标，然后选择方形停止图标以停止脚本处理。

12.重新运行Ajax请求

浏览器JavaScript Ajax调用通常使用Fetch或XMLHttpRequest API从远程服务器请求数据。这些显示在“ DevTools网络”面板中，可以使用XHR按钮进行过滤。

DevTools显示了很多信息，但是有时重新运行Ajax调用并在另一个工具中分析结果有时是可行的。右键单击任何请求，然后从“复制”子菜单中选择一个选项：

13.启用本地文件替代服务端文件

Chrome允许任何HTTP请求使用您设备上的本地文件，而不是通过网络获取文件。这样可以使您：

在不需要构建工具的情况下在实时站点上编辑脚本或样式 离线开发一个网站，该网站通常会要求第三方或域提供基本文件 临时替换不必要的脚本，例如分析调试。

在本地PC上创建一个目录，在该目录中将存储替代文件，例如localfiles，然后打开Chrome的DevTools Sources面板。打开左侧窗格中的“替代”选项卡，单击+选择要替代的文件夹，然后选择您创建的目录。系统将提示您允许文件保存在本地，并且目录将出现：

现在打开“页面”选项卡并找到任何源文件。有两种方法可以将其添加为本地替代：

• 右键单击该文件，然后选择“保存以替代”，或者
• 打开文件，进行编辑，然后用Ctrl|保存。Cmd+ S。
• 文件图标显示为带有紫色的覆盖指示符：

它还将显示在“替代”选项卡和localfiles目录中。可以在Chrome中或使用任何代码编辑器编辑该文件-每当重新加载页面时，都会使用更新的版本。

14.管理客户端存储

网页可以使用多种技术将数据存储在客户端上。Chrome DevTools中的“应用程序”面板（或Firefox中的“存储”面板）允许您添加，检查，修改和删除cookie，缓存存储，localStorage，sessionStorage，IndexedDB和Web SQL（如果支持）中保存的值。

Chrome中的“存储”标签显示本地存储了多少数据，并提供了一个快速的“清除站点数据”选项。

15.模拟移动硬件

智能手机和平板电脑通常包括诸如全球定位系统（GPS），陀螺仪和加速度计之类的硬件。这些通常在台式机中不可用，这会使使用地理定位等API进行开发变得更加困难。

Chrome可以在DevTools中模拟设备硬件-从“更多工具”菜单中选择“传感器” ：

支持选项：

• 选择一个主要城市或输入自定义的纬度和经度。也可以将该位置设置为不可用，以模拟GPS信号失败时应用程序的响应方式。
• 使用预设或自定义指标设置设备方向。您可以点击和智能手机拖到绕X任何Ÿ轴，或按住Shift围绕旋转ž轴。
• 强制触摸而不是鼠标或其他本机设备事件，并且
• 设置空闲状态以检查您的应用如何响应锁定屏幕。

DevTool奉献

浏览器DevTools已从基本的JavaScript日志记录演变为全面的开发和调试环境。它们看起来很复杂，但是通过一些试验和学习，您会发现并喜欢可以节省数小时编码工作量的功能。