大家好，如果您还对Microsoft 产品经理：您必须了解的6 个Web 开发人员工具不太了解，没有关系，今天就由本站为大家分享Microsoft 产品经理：您必须了解的6 个Web 开发人员工具的知识，包括的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

顺便说一句，Microsoft Edge虽然是Windows 10/11的内置浏览器，但它是基于Chromium内核开发的，因此从平台类型上来看与Chrome类似。只是每个浏览器的用户体验和具体服务选项有所不同。 Edge Developer Tools 也与Google 紧密合作，产品中的很多工作成果都会反馈到Chromium 内核中。最后，下面提到的一些实验仅在Microsoft Edge中有效。有兴趣的可以选择对应的Edge Windows、Mac和Linux版本进行验证。好了，废话不多说，我们进入正题：

1. Console 不只是 “log()”

（所有带有开发工具的浏览器均遵循此标准。）

毫无疑问，除了Elements 工具之外，Console 是浏览器开发者工具中最常用的组件。人们习惯于将“console.log()”添加到代码中进行调试，以了解发生了什么。当然，实际上还有更好的方法来调试脚本；但既然这个习惯如此普遍，我们就来谈谈如何改善体验。

第一个问题是，如果产品上线时不删除日志消息，控制台就会被阻塞。为了避免由此造成查找信息的障碍，最好充分利用Console提供的控制台消息过滤选项。正确使用这些选项既可以确保良好的跟踪，又可以阻挡大量噪音。

我们在记录什么？

丰富你的 Console 词汇表

除了“console.log()”之外，您还可以使用许多其他方法。例如，使用“console.warn()”记录警告消息，使用“console.info()”记录信息内容，使用“console.error()”记录错误消息。这样不仅可以改变控制台中的显示内容，还可以为消息建立差异化的录制层次，大大降低过滤录制内容的难度。

Console 中的错误与断言

在控制台中显示错误确实比直接弹出错误严重程度要低得多，但如果我们也能为产品维护或调试人员提示问题的严重性那就更好了。这里介绍的有趣方法是“console.assert()”，它仅在满足某些条件时记录消息。对于这类需求，过去你可能更习惯写包含“console.log()”的“if”语句；但建议您直接使用“assert()”，这样更有利于后续清理和调试代码。

通常我们可能会添加“console.log(‘Called’)”或类似的表达式来测试某个函数是否被触发。得到肯定的答案后，下一步当然是找出调用该方法的来源。这时，“console.trace()”就发挥作用了。它不仅可以告诉我们调用了什么，还可以告诉我们调用操作来自哪里。

对 console 消息进行分组

将 console 中的大量信息显示并过滤为表格形式

如果大量的信息直接显示为日志，读起来肯定会让人血压升高。幸运的是，“console.talbe()”方法可以在控制台中以表格形式显示这种类型的数组数据。然后我们提交我们想要查看的属性数组来过滤显示的内容。

例如，我们可以使用“let elms=document.querySelectorAll(‘:is(h1,p,script’)”来获取文档中所有的H1、段落和脚本元素，并使用“console.table(elms)”来显示信息结论是一个表格，由于不同元素中包含了大量的属性和属性，所以生成的表格仍然很难阅读。 ‘, ‘offsetHeight’])” 进一步开发。过滤并最终得到一个仅包含所需属性及其值的表。

灵活运用：$() and $()

Console提供了多种易于使用且方便的方法，称为Console Utilitiers。两个非常实用的代表是“$()”和“$()”，分别对应“document.querySelector()”和“document.querySelectorAll()”。这些不仅返回我们需要的nodeList，还将结果转换为数组，因此可以直接在结果上使用“map()”和“filter()”。下面的代码可以获取当前文档中的所有链接并返回一个数组，其中对象只包含每个链接的“href”和“innerText”属性作为“url”和“text”属性。

$(‘a’).map(a={br return {url: a.href, text: a.innerText}br})

2. 无需源代码即可记录——Live Expressions 与 Logpoints

（适用于Chromium 浏览器）

正确的使用“console.log()”的方法当然是把它放在你想要获取信息的代码中。但我们也可以使用它来深入研究我们无法访问或更改的代码。实时表达式是一种无需更改代码即可记录信息的好方法。它们以令人难以置信的速度记录变化的值，而不会压垮控制台并减慢速度。

日志点是一种特殊的断点。我们可以在开发者工具的Sources 工具中右键单击JavaScript 中的任意行并设置日志点。系统会提示我们输入要记录的表达式，然后我们可以在该行代码运行时通过控制台获取其值。因此从技术上讲，我们可以在网络上的任何位置插入“console.log()”。

3. 在浏览器外也能记录 VS Code 调试器

（适用于Chromium 浏览器和VS Code）

当在Visual Studio Code 中启动调试会话时，我们可以生成一个浏览器实例，并通过打开浏览器开发者工具将调试控制台用作控制台。

4. 将代码注入至任意站点——Snippets 与 Overrides

（适用于Chromium 浏览器）

开发人员工具中的片段是针对当前网站运行脚本的一种方法。我们可以在这些脚本中使用Console Utilities来编写和存储需要在Console中执行的高度复杂的DOM操作脚本。您可以使用代码片段编辑器或命令菜单在当前文档的窗口上下文中运行脚本。如果您使用命令菜单，请在命令开头使用它！并输入您要运行的代码片段的名称。

Overrides 的目的是存储远程脚本的本地副本并在页面加载时执行覆盖。例如，如果我们的整个应用程序构建过程太慢，但我们想随时尝试新的设计，那么覆盖就可以发挥作用。此外，这个工具可以替换第三方网站上那些烦人的脚本，而不需要浏览器扩展。

5. 检查与调试工具的丰富程度远超你的想象

（适用于Chromium 浏览器）

您对Chromium 开发者工具的第一印象可能来自Google Chrome、Brave 或Microsoft Edge 等浏览器，但这些工具的适用范围远不止于此。所有基于Electron 的应用程序都可以启用这些工具，使我们能够看到代码是如何在幕后构建的。例如，我们可以在GitHub Desktop 以及Visual Studio Code 中使用它，甚至可以使用开发者工具在浏览器中调试开发者工具本身。

查看开发者工具，您可以看到它们是用HTML、CSS 和TyperScript 编写的。这种技术使用环境令人兴奋，因为我们可以清楚地看到代码运行在什么样的渲染引擎中。这是在Web上永远无法体验到的乐趣。

Visual Studio Code 中的 Edge 开发者工具

（适用于带有VS Code 扩展的Microsoft Edge）

这些工具也是可嵌入的，因此可以在浏览器外部使用。 Microsoft Edge Tools for Visual Studio Code 扩展将这些工具引入Visual Studio Code。这样我们就可以直接在代码编辑器旁边使用可视化调试工具，彻底告别两者之间反复切换的麻烦。首次使用时，系统会提示用户安装扩展；此后，每当我们在调试会话期间单击开发人员工具图标时，这些工具都会打开。

6. 发掘更多宝藏功能……

在自己使用开发工具一段时间后，我从反馈中发现了一些不幸的事实。首先，虽然我们都对开发人员工具的惊人功能感到兴奋，但用户往往只使用其中的一小部分。很多东西很好，但它们总是静静地躺在演示和视频教程中沉睡，根本没有人关心它们。起初我们以为是因为文档不够扎实，所以我们花了很多时间更新DevTools文档，以确保所有功能都有全面的描述和解释。但事后看来，事实并非如此。大多数开发人员只是在没有解决方案时（在Google、Stack Overflow、甚至其他社交渠道上找不到答案）才将文档视为最后的手段。

开发者工具越来越复杂、越来越强势——谈谈我的解决思路

（适用于Microsoft Edge）

多年来，浏览器开发工具不断发展，并变得越来越强大且难以访问。这个结果令人沮丧，我认为我们应该做得更好。所以在我看来，开发者工具应该实现这样一个目标：

开发者工具不应该期望用户成为专家，而是引导他们随着时间的推移成为专家。

我们正在尝试一系列简化事情的想法，结果将很快反映在Microsoft Edge 中。其中一种探索是“焦点模式”，其中界面不再显示所有工具和选项卡，而是将工具分组到不同的用例中，例如“Elements/CSS 调试”、“源代码/JavaScript 调试”或“网络检查”核心思想很简单，就是隐藏所有可能混淆或妨碍效率的工具，只显示与当前工作相关的工具。

我们正在开发的另一个功能是“信息叠加”。我们计划提供一个帮助按钮，用于打开开发人员工具覆盖层，解释每个工具是什么、如何使用它，并列出文档链接。我们希望这样的设计能让大家更容易理解这些功能。

代码编写与结果调试之间仍然相互脱节

（适用于Microsoft Edge）

我们目前正在研究两种方法来减少整体调试和修改过程。一是尝试使用Visual Studio Code代替开发者工具中的编辑器，并在用户使用开发者工具时直接对磁盘驱动器上的文件进行更改。另一种是借助VS Code扩展实现的，它可以让你在使用开发者工具时直接在编辑器中修改源代码，并明确指示完成后是否替换磁盘上真实的源文件。