微软产品经理：你不能不知道的6个Web开发者工具( 二 ) 作者｜ChristianHeilmann译者

跟踪事物来源

文章图片
通常我们可能会添加“console.log(‘Called’)”或者类似的表达来测试某项功能是否被触发。在得到肯定的答案后，接下来当然是找出调用该方法的根源。这时候就该“console.trace()”大显身手了，它不仅能告诉我们哪些东西被调用过、还能告诉我们调用操作来自何处。
对console消息进行分组
如果大家有很多消息需要记录，不妨使用“console.group(‘name’)”与“console.groupEnd(‘name’)”将消息打包至Console中的可折叠与可扩展消息内，甚至可以设置默认情况下使用扩展或者是折叠分组。

文章图片
将console中的大量信息显示并过滤为表格形式
如果把大量信息直接显示为日志，那阅读起来绝对让人血压上升。好在“console.talbe()”方法能够在console当中将这类数组式数据显示为表格形式，我们则提交想要查看的属性数组对显示内容进行过滤。
例如，我们可以使用“letelms=document.querySelectorAll(‘:is(h1,p,script’)”获取文档中的所有H1、段落与脚本元素，并使用“console.table(elms)”将信息结论显示为表格。由于不同元素中包含大量属性与特性，所以生成的表格仍然非常难以阅读。这里我们可以使用“console.table(elms,[‘nodeName’,‘innerText’,‘offsetHeight’])”进一步开展过滤，最终获得一个只包含所需属性及其值的表格。

文章图片
在复制和粘贴此信息时，表格结构将保持不变。这也让此功能成为将数据导入Excel或者Word的绝佳工具。
灵活运用：$()与$$()
Console当中提供多种易于使用的便捷方法，被称为ConsoleUtilitiers 。其中两个非常实用的代表就是“$()”与“$$()” ，它们分别对应着“document.querySelector()”与“document.querySelectorAll()” 。这些不仅能返回我们需要的nodeList ，还会将结果转换为数组，因此可以直接在结果上使用“map()”与“filter()” 。以下代码就能获取当前文档内的所有链接并返回一个数组，其中的对象仅包含各链接的“href”与“innerText”属性作为“url”及“text”属性。
2
无需源代码即可记录——LiveExpressions与Logpoints
(适用于Chromium浏览器)
“console.log()”的正确使用方式，当然是放置在代码中希望获取信息的位置。但我们也可以使用它深入了解自己无法访问或变更的代码。 LiveExpressions就是一种无需变更代码即可记录信息的好办法。它们能够以惊人的速度记录不断变化的值，但又不会给Console带来太大压力、拖慢运行速度。
Logpoints则是一种特殊的断点。我们可以在开发者工具的Sourcestool中右键点击JavaScript中的任意一行并设置logpoint 。系统会提示我们输入想要记录表达式，之后即可在该代码行运行时通过console获取它的值。所以从技术上讲，我们完全可以在web的任意位置上插入“console.log()” 。
3
在浏览器外也能记录–VSCode调试器
（适用于Chromium浏览器及VSCode）
在VisualStudioCode中启动调试会话时，我们可以生成一个浏览器实例，并通过开浏览器开发者工具将DebugConsole作为Console使用。

文章图片
4
将代码注入至任意站点——Snippets与Overrides
(适用于Chromium浏览器)
开发者工具中的Snippets是一种针对当前网站运行脚本的方式。我们可以在这些脚本中使用ConsoleUtilities ，进而编写并存储那些需要在Console中执行的高复杂度DOM操作脚本。大家可以使用snippets编辑器或者命令菜单，在当前文档的窗口上下文内运行脚本。如果是使用命令菜单的情况，请注意在命令开头使用！并输入要运行的代码段名称。