10 个用于 JavaScript 开发人员有效调试应用程序的 DevTool Gems
10 个用于 JavaScript 开发人员有效调试应用程序的 DevTool Gems
Web 开发人员大部分时间都在使用浏览器 DevTools，但是当每年添加许多更新时，很容易错过有用的工具和技术。以下功能本质上适用于使用基于 Chrome 的浏览器的 JavaScript 编码人员，但所有开发人员都会得到一些有用的东西。
1.使用隐身模式
隐身或私有模式使用单独的用户配置文件，并且不会在浏览器重新启动之间保留 cookie、localStorage 或缓存文件等数据。每个会话都以干净的状态开始，因此它非常适合渐进式 Web 应用程序 (PWA)、测试登录系统和首次加载性能。有一些小的限制，例如阻止 PWA 安装，但这些不太可能在开发过程中引起明显的问题。
隐身模式主要可以从浏览器菜单或右键单击其桌面图标访问。 Firefox 还提供了一个多帐户容器插件，可用于设置单独的配置文件——如果您需要使用不同的帐户保持登录到系统，这将很有用。
2. 自动启动 DevTools
要开始开发，您通常需要启动浏览器（可能处于隐身模式），打开 DevTools，然后导航到本地 URL。通过向浏览器启动命令添加选项，整个过程可以通过单击实现自动化。
最好开发一个新的快捷方式或脚本以在开发模式下启动，然后为 Google Chrome 添加：
- — incognito 以隐身模式启动
- — auto-open-devtools-for-tabs 启动 DevTools
- 并将测试 URL 放在末尾，例如 http://localhost:8000/
因此，在 Windows 设备上，快捷方式可能指向：
3.使用命令调色板
Chrome 的 DevTools 提供了一个类似编辑器的命令面板。在任何 DevTools 面板中，按 Ctrl | Cmd + Shift + P 然后按名称搜索选项：
删除 > 提示符以按名称搜索已加载文件。
4. 查找未使用的 JavaScript
Chrome 的 Coverage 面板可让您快速定位已使用和未使用的 JavaScript（和 CSS）代码。首先，从 DevTools 菜单中的 More tools 子菜单打开 Coverage。重新加载页面，面板将以条形图显示未使用代码的百分比：
单击 JavaScript 文件，未使用的代码在行号间距中以红色条突出显示。
如果您正在测试 SPA（单页应用程序），您可以转向并利用功能来更新未使用的代码指示器。因此，请注意，当您重新加载或转到新页面时，覆盖信息会被重置。这是一个很棒的工具，可以知道您在代码中使用了多少外部依赖项，如果您要导入一个 100kb 的库并且只使用其中的 1%，您也会在这里清楚地看到它。
5.找到改变DOM的代码
当事件发生时，可能很难评估哪个方法负责更新特定的 HTML DOM 元素。要定位进程，请右键单击“元素”面板中的任何 HTML 元素，然后从“中断”子菜单中选择一个选项：
选择：
- 子树修改以检查元素或任何子元素何时被更改
- 属性修改以检查元素的属性（例如类）何时更改，或者
- 节点移除以检查元素何时从 DOM 中取出。
发生此类事件时，会在 Sources 面板中自动启动断点。
Firefox DevTools 在 Inspector 窗格中提供了相同的功能。此外，Firefox 会显示哪些 DOM 节点具有附加事件图标的处理程序。应单击此按钮以查看更多信息、展开处理函数或在调试器中打开它：
6.限制网速
在快速可靠的网络上使用高端 PC 测试您的站点并不能代表实际使用情况。您的用户可能有不稳定的移动连接或连接到过载的机场 Wi-Fi。
网络选项卡提供了一个限制选项，可用于人为降低 HTTP 上传速度、下载速度和延迟（连接或响应的额外延迟）。这可以帮助确定性能瓶颈的原因：
基于 Chrome 的浏览器可让您添加自己的自定义网络配置文件。
7.过滤网络请求
DevTools Network 面板提供了许多过滤器，包括一个仅显示 JavaScript 请求的 JS 按钮。当您提供部分 URL 时，过滤器搜索框可以找到请求，但它也需要特殊命令，包括：
- 使用 is: cached 过滤缓存的请求
- 过滤不完整的请求是：正在运行
- 通过输入大于：来识别大型请求
，其中是以字节 (1000000)、千字节 (1000k) 为单位的大小，或 - 兆字节 (1M)，或通过输入 -domain 来识别第三方资源：
.您的域可以使用通配符，例如 *。
8. 黑盒脚本和行
有时不需要确切知道 JavaScript 错误发生的方式、时间或地点。试图在库（React、Vue.js、jQuery 等）或第三方脚本（分析、社交媒体小部件、聊天机器人等）中查找问题通常是徒劳的，您不能简单地更改这些问题。
DevTools 允许对脚本进行黑盒处理，因此即使您选择进入其中一项功能，它们也永远不会在调试器中打开。要在 Firefox 中黑箱化文件，请在 Debugger 面板中打开一个文件，然后单击忽略源眼睛图标：
在 Chrome DevTools Sources 面板中，打开一个文件，右键单击代码中的任意位置，然后选择 Add script to ignore list。您还可以通过右键单击数字间距并从菜单中选择从不暂停来黑箱化单个语句。
另一方面，单击设置齿轮图标或按 F1 访问设置，然后转到忽略列表选项卡。选中添加内容脚本以忽略列表并使用正则表达式（例如 jquery.*\.js）输入任意数量的文件名模式：
9. 使用日志点
在整个文件中自由插入 console.log() 调试语句很有吸引力，但日志点提供了一种无需编写任何代码即可获取相同信息的方法。
要添加日志点，请在 Sources 面板（或 Firefox 中的 Debugger 面板）中打开一个脚本，右键单击任意行号，然后选择 Add log point。给出一个表达式，例如您将在控制台命令中使用的表达式，例如
只要执行该行，该消息就会显示在 DevTools 控制台中。日志点将主要在页面刷新之间持续存在。
10.使用条件断点
触发无限循环很简单，这会导致浏览器进程开始不堪重负。尽管有多年的经验，但不久前我意外地反转了 JavaScript for 循环中的表达式，所以它永远不会结束！
要结束 Chrome DevTools 中的无限循环，请打开 Sources 面板并单击调试暂停图标以结束脚本。单击相同的图标并选择方形停止图标以停止脚本处理。
结论
浏览器开发工具已经从基本的 JavaScript 日志记录发展到广泛的开发和调试环境。它们看起来很难，但是通过一些实验，您会发现可以节省数小时编码工作的功能。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
