开发者工具的秘密不该是秘密

这是我今年九月在CityJS做的一次演讲。我是 Microsoft Edge 开发者工具的首席产品经理，以下是我在开发、记录工具以及收集用户反馈过程中遇到的问题。

以下是我所涵盖的所有内容的概述：

1. 控制台远不止于此`log()`！

毫无疑问，除了 Elements 工具之外，Console 是浏览器开发者工具中最常用的部分。具体来说，人们喜欢通过console.log()在代码中添加一个命令来调试，以了解正在发生的事情。这种方法存在一些问题，并且有更好的脚本调试方法，但由于人们经常这样做，所以我们来谈谈如何改善这种体验。

第一个问题是产品上线后未删除的日志消息会堵塞控制台。查找所需信息变得非常困难，而解决这个问题的最佳方法是了解可用的控制台过滤选项。使用这些选项，您可以过滤控制台报告中您关心的内容，从而屏蔽掉许多干扰信息。

您正在记录什么？

下一个问题console.log()是，我们似乎只记录了值，却忘记了它们的来源。例如，当你使用下面的代码时，你会得到一个数字列表，但你不知道哪个是哪个。

console.log(width)
console.log(height)

解决这个问题最简单的方法是将要记录的内容括在花括号中。这样控制台就会同时记录你想要了解的内容的名称和值。

console.log({width})
console.log({height})

添加到你的控制台词汇表

除此之外，console.log()您还可以使用更多方法。例如，console.warn()记录警告、console.info()信息性消息和console.error()错误消息。这不仅会导致控制台中的显示略有不同，还会为您的消息提供不同的日志级别，这意味着更容易过滤它们。

控制台中的错误和断言

在控制台中显示错误与抛出错误不同，但向维护或调试产品的人员展示问题的严重性仍然是个好主意。另一个有趣的方法是console.assert()，它仅在满足特定条件时记录消息。你经常会发现自己写了一个if包含的语句console.log()。使用assert()可以省去这一步，在清理调试代码时可以少操心一件事。

追溯事物的来源

你经常会添加一个console.log('called')或类似的方法，来测试某个功能是否被触发。一旦你知道了这些，接下来通常需要找出调用该方法的方法。这就是它的作用console.trace()，因为它不仅能告诉你某个方法被调用了，还能告诉你调用来自哪里。

分组控制台消息

如果您有大量日志信息需要记录，可以使用console.group('name')和console.groupEnd('name')将消息包装在控制台中可折叠和可展开的消息中。您甚至可以定义默认组是展开还是折叠。

在控制台中以表格形式显示和过滤大量信息

如果要将大量信息显示为日志，阅读这些信息可能会变得非常困难。该console.table()方法将数组类型的数据以表格的形式显示在控制台中，您可以通过为其提供要查看的属性数组来过滤要显示的内容。

例如，您可以使用

let elms = document.querySelectorAll(':is(h1,p,script');
console.table(elms)

从文档中获取所有 H1、段落和脚本元素，并将这些信息显示为表格。由于不同元素拥有大量的属性，因此生成的表格非常难以阅读。

如果你使用以下方法筛选出你感兴趣的内容

console.table(elms,['nodeName', 'innerText', 'offsetHeight']);

您将获得一个仅包含这些属性及其值的表。

当您复制和粘贴此信息时，表格结构会得到保留，这使其成为将数据导入 Excel 或 Word 等的绝佳工具。

`$()`让它闪耀起来：`$$()`

控制台附带许多便捷的方法，称为控制台实用程序。其中两个非常有用的方法是和，$()它们分别$$()替代document.querySelector()和document.querySelectorAll()。它们不仅返回您期望的节点列表，还会将结果转换为数组，这意味着您可以直接在结果上使用map()和filter()。以下代码将抓取当前文档的所有链接，并返回一个数组，该数组包含仅包含每个链接的href和属性的对象。innerTexturltext

$$('a').map(a => {
  return {url: a.href, text: a.innerText}
})

2. 无需访问源代码即可记录 - 实时表达式和记录点

添加 a 的常规方法console.log()是将其放在代码中您想要获取信息的位置。但您也可以深入了解无法访问和更改的代码。实时表达式是一种无需更改代码即可记录信息的好方法。它们还能出色地记录不断变化的值，而不会导致控制台信息泛滥，从而降低产品速度。您可以在以下截屏视频中看到差异：

日志点是一种特殊的断点。您可以在开发者工具的“源代码”工具中右键单击 JavaScript 代码中的任意一行，然后设置一个日志点。系统会要求您提供一个要记录的表达式，并在执行该代码行时在控制台中获取其值。这意味着您可以从技术上console.log()在 Web 上的任何地方注入日志点。我早在 8 月份就写过关于日志点的文章，您可以在以下截屏视频中观看演示：

3. 你可以在浏览器之外登录 - VS Code 调试器

在 Visual Studio Code 中启动调试会话时，您可以生成一个浏览器实例，并且调试控制台将变为您在浏览器开发者工具中习惯使用的控制台。我在 7 月份的博客中详细介绍了这一点，您可以阅读那里的操作方法。官方文档中也有更多内容。

您还可以观看我这段一分钟的视频，其中展示了该功能：

4. 您可以将代码注入任何站点 - 片段和覆盖。

代码片段是开发者工具中针对当前网站运行脚本的一种方式。您可以在这些脚本中使用控制台实用程序，这是一种编写和存储通常在控制台中执行的复杂 DOM 操作脚本的好方法。您可以通过代码片段编辑器或命令菜单在当前文档的窗口上下文中运行脚本。在命令菜单中，以开头!，然后输入要运行的代码片段的名称。

覆盖允许您存储远程脚本的本地副本，并在页面加载时覆盖它们。例如，如果您的整个应用程序的构建过程很慢，并且您想尝试一些功能，那么覆盖功能就非常有用。它也是一个很棒的工具，可以替换来自第三方网站的烦人的脚本，而无需使用浏览器扩展程序。

5.您可以检查和调试的内容远超您所知道的！

您可能在 Google Chrome、Brave 或 Microsoft Edge 等浏览器中了解 Chromium 开发者工具，但它们在更多环境中可用。任何基于 Electron 的应用都可以启用它们，您可以使用这些工具深入了解产品底层的开发过程。例如，这可以在 GitHub Desktop、Visual Studio Code 等浏览器中使用，您甚至可以使用开发者工具来调试浏览器的开发者工具！

如果你检查一下开发者工具，你会发现它们是用 HTML、CSS 和 TypeScript 编写的。使用这些技术是一个令人兴奋的环境，因为你知道你的代码将在哪个渲染引擎上运行——这是你在 Web 上永远无法预知的。

这些工具的可嵌入特性也使我们能够为您提供在浏览器之外使用它们的方法。Microsoft Edge Tools for Visual Studio Code扩展程序将这些工具引入了 Visual Studio Code。这样，您就可以在代码编辑器旁边直接使用可视化调试工具，而无需一直在两者之间切换。这也与前面提到的“Visual Studio Code 中的控制台”技巧相呼应。当您启动调试会话并点击“开发人员工具”图标时，这些工具将会打开，或者（首次使用时）系统会提示您安装扩展程序。

6.一些肮脏的秘密……

在与开发者工具密切合作，并收集反馈和使用信息的过程中，我发现了一些不可告人的秘密。首先，虽然我们都对开发者工具的众多精彩功能感到无比兴奋，但用户实际使用率却非常低。许多在演示文稿和视频教程中被誉为“自切片面包以来最好的东西”的东西，几乎从未打开过，更不用说使用了。我以为这是由于文档不足造成的，我们花费了大量时间来更新DevTools 文档，以确保其中的所有内容都得到描述和解释，但事实并非如此。文档似乎是人们在遇到困难，而 Google/Stack Overflow/社交媒体渠道都无法提供帮助时，作为最后的手段。

开发人员工具变得越来越复杂，让人不知所措——一些解决这个问题的想法

或许事实显而易见，浏览器的开发者工具多年来一直在自然增长，看起来令人眼花缭乱。这让我很困扰，我认为我们应该做得更好。以下是我对开发者工具的信条：

开发工具不应该期望人们成为专家，而应该随着时间的推移将他们变成专家。

我们正在研究一些简化这一过程的方案，您很快就会在 Microsoft Edge 中看到它们。其中一个方案是“专注模式”。我们不再向您展示所有工具和选项卡，而是将工具按不同的使用场景进行分类，例如“元素/CSS 调试”、“源代码/JavaScript 调试”或“网络检查”。这样，我们只会显示相关的工具，并隐藏所有可能造成混淆或妨碍的工具。

我们正在开发的另一个功能是“信息叠加层”。您可以通过一个帮助按钮打开开发者工具的叠加层，了解每个工具的功能、使用方法，并提供文档链接。我们希望这能帮助用户更轻松地了解更多功能。

编写代码和调试结果之间仍然存在脱节

虽然如今的工具功能令人惊叹，但创作和调试之间仍然存在脱节。大多数时候，我们编写代码，创建应用程序，然后打开浏览器查看哪些地方出了问题。之后，我们使用浏览器开发者工具来调整和修复这些问题。接下来还有一个大问题亟待解决：如何将使用浏览器开发者工具所做的更改重新应用到代码中？大多数情况下，答案是“复制粘贴，或者努力记住需要修改的地方”。

我们目前正在研究两种方法来简化这一过程。一种是，在 Visual Studio Code 可用时，用它替换 DevTools 内置的编辑器，并在使用浏览器开发者工具时更改硬盘上的文件。另一种方法是使用 VS Code 扩展程序，它会在您使用开发者工具时更改编辑器中的源代码，但您仍然拥有更改磁盘文件的最终决定权。我在 Edge 博客上描述了这个问题和可能的解决方案，或者您可以观看以下两个截屏视频来了解它们的实际效果。

Visual Studio Code 中的 CSS 镜像：