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

使用开发者工具是开发人员的日常，但多数人往往只使用其中的一小部分，很多功能其实都无人问津。在微软 Edge 项目部担任开发者工具首席产品经理的 Christian Heilmann 认为，开发者工具正变得越来越复杂和强势，要解决这个问题则需要意识到，
开发者工具不该指望用户成为专家，而是要随时间推移引导他们变成专家。
以下内容节选自他近日发表的博文，源自他自己在使用工具、记录体验并查阅用户反馈时的真实经历，不仅罗列了一些开发者工具使用技巧，也提出了优化思路。
需要注意的是，本文中提及的“Chromium 浏览器”是指一切使用 Chromium 内核、并提供全部开发者工具的浏览器，其中包括 Chrome、Microsoft Edge 以及 Brave 等等。
顺带一提，Microsoft Edge 虽然是 Windows 10/11 的内置浏览器，但是基于 Chromium 内核开发，所以从平台类型的角度看类似于 Chrome 。只是各款浏览器在用户体验与具体服务选项上有所区别。Edge Developer Tools 也与谷歌密切合作，产品内的不少工作成果也会被反哺到 Chromium 内核当中。最后，以下提到的部分实验只在 Microsoft Edge 当中成立，感兴趣的人可以选择相应的 Edge Windows、Mac 及 Linux 版本进行验证。好了，话不多说，马上进入正题：
1. Console 不只是 “log()”
(一切附带开发工具的浏览器均遵循此标准。）
毫无疑问，除了 Elements 工具之外，Console 可说是浏览器开发者工具中使用频率最高的组成部分。人们习惯于在代码中添加“console.log()”进行调试，了解到底发生了什么。当然，实际还有更好的方法来调试脚本；但考虑到这种习惯已经相当普遍，所以我们就聊聊如何改善这种体验。
第一个问题是，如果产品上线时日志消息没有被删除，那么 Console 会发生堵塞。为了避免由此带来的信息查找障碍，最好能充分使用 Console 提供的控制台消息筛选选项。正确使用这些选项既能保证良好的跟踪能力，也可以屏蔽掉大量噪声。

文章插图
我们在记录什么？
可能很多朋友在使用“console.log()”时，都仅仅忙于记录下具体值、却忘记为其添加来源。例如，在使用以下代码时，我们会得到一份数字清单，但却并不清楚这份清单的含义。
console.log(width)console.log(height)
复制代码
解决这个问题的简单方法，就是把要记录的内容用大括号括起来。这样 Console 就会同时记录下值与名称。
console.log({width})console.log({height})
复制代码
【微软产品经理 edge是什么意思】

文章插图
丰富你的 Console 词汇表

文章插图
除了“console.log()”以外，大家还可以使用其他多种方法。例如用“console.warn()”记录警告消息，使用“console.info()”记录信息内容、使用“console.error()”记录错误消息。这不仅能改变 console 当中的显示内容，还能为消息建立起一种差异化记录层级，大大降低记录内容的过滤难度。
Console 中的错误与断言

文章插图
在 Console 中显示错误确实要比直接弹出错误缓和得多，但我们最好能同时为产品维护或调试人员提供问题的严重性提示。这里介绍的有趣方法就是“console.assert()”，它只会在满足特定条件时记录一条消息。对于这类需求，以往大家可能更习惯于编写包含“console.log()”的“if”语句；但这里推荐大家直接使用“assert()”，这样更有利于后续清理调试代码。
跟踪事物来源

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