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

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

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

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

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

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