微软产品经理 edge是什么意思( 二 ) _一段时间

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

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

文章插图
4. 将代码注入至任意站点——Snippets 与 Overrides
(适用于 Chromium 浏览器)
开发者工具中的Snippets是一种针对当前网站运行脚本的方式。我们可以在这些脚本中使用Console Utilities，进而编写并存储那些需要在 Console 中执行的高复杂度 DOM 操作脚本。大家可以使用 snippets 编辑器或者命令菜单，在当前文档的窗口上下文内运行脚本。如果是使用命令菜单的情况，请注意在命令开头使用！并输入要运行的代码段名称。
Overrides的作用是为远程脚本存储一份本地副本，并在页面加载时执行覆盖。例如，如果我们的整个应用程序构建过程太过缓慢，但又希望随时尝试一点新鲜设计，那么 overrides 就能发挥作用了。另外，这款工具还能在无需浏览器扩展的前提下，替换掉第三方网站中那些烦人的脚本。
5. 检查与调试工具的丰富程度远超你的想象
(适用于 Chromium 浏览器)
大家对 Chromium 开发者工具的第一印象可能来自 Google Chrome、Brave 或者 Microsoft Edge 等浏览器，但这些工具的适用环境远不止于此。一切基于 Electron 的应用程序都能启用这些工具，供我们查看引擎盖之下的代码究竟是如何构建完成的。例如，我们可以在 GitHub Desktop 以及 Visual Studio Code 中使用，甚至可以利用开发者工具调试浏览器中的开发者工具本身。
观察开发者工具，可以看到它们是用 HTML、CSS 以及 TyperScript 编写而成。这样的技术使用环境令人兴奋，因为我们能清楚地看到代码运行在怎样的渲染引擎当中——这是在 Web 端永远体会不到的快乐。

文章插图
Visual Studio Code 中的 Edge 开发者工具
(适用于 Microsoft Edge 搭配 VS Code 扩展)
这些工具还具有可嵌入特性，因此能够在浏览器之外加以使用。Microsoft Edge Tools for Visual Studio Code扩展就将这些工具引入了 Visual Studio Code 。如此一来，我们可以直接在代码编辑器一旁使用可视化调试工具，彻底告别二者之间反复切换的烦恼。在首次使用时，系统会提示用户安装扩展；之后每当我们调试会话并单击开发者工具图标，这些工具就会应声开启。