【Debug】各种前端Debug技巧系列第 5篇 Console - Messages
数码科技解答2021-03-17 11:30
完全掌握Console 面板，从认识Console message 开始。
概览
Console 面板作为网页开发者的Debug 神器，在许多网站开启DevTools 时甚至都能看到Debug 专用的log，不过在讲解Console 面板的功能之前，得先讲讲Console message。
建议阅读本文时可以搭配Demo页面Console - Message一起使用，效果更佳。
Console Message Level
Console message 有分成四种Level：
VerboseInfoWarningError平常最常使用的console.log(...)属于Info level，当然也有其他Console API能够产生不同Level的Message。
Verbose Message
console.debug预设情况下Console面板不会显示Verbose message，因此直接执行console.debu可是什么都不会看到的哦。
如果开启Verbose level，可能会看到很多[Violation] 'setTimout' handler took ... ms的Message，这是由Chrome自动产生的，提醒可能需要评估代码的性能。
Info Message
console.logconsole.info这两种Method 在Console 面板中是等价的，只会显示Message 和执行时的代码位置。
Warning Message
console.warn在开发套件或工具时，console.warn很适合用在警示「可能」出错了，或是功能Deprecate的提示，例如参数的形态不在预想范围内时可以发出警告。
另外从Warning level 开始就会显示Call stack 了，展开左边的灰色小三角可以看到完整的Function 链。
Error Message
console.error有时会看到开发者用console.log打天下，虽然同样是Console message，但严重度还是有所区别的，console.error的使用时机通常是在遭遇了不预期的问题，甚至是影响了网页的运作，例如无法取得某个套件导致网页出错时就不应该使用console.log。
Message Filter
Console 面板中承载了所有来源的Message，包括开发者自己、套件、Worker、其他Frame 所Call 的Console API，另外还有浏览器自动产生的Message，如刚刚提到的Violation 或是网路错误等等。
Console message 虽然是用来协助debug 的，但也可能因此迷失在茫茫Message 海中，此时就需要各种过滤方式来找出自己最需要的Message。
注意过滤掉的只有Console message，也就是说程式码的输入和输出永远都会留在面板里面。
By level
点击面板上方的Default levels 选单可以调整要显示哪些Level 的Message，预设只有Verbose 不会显示。
另外可以从最左上角的按钮打开侧栏，里面把各种Level的Message都整理好了，另外还多了user messages类别，只包含透过Console API产生的Message。
By pattern
在旁边的输入框可以填入Regular expression 或关键字来过滤Message。
找出An 开头的Message
By URL
同样在输入框内，想要过滤特定Domain或第三方套件的Message时可用
url:来搜寻：
url:google.com–只显示关于google.com Domain的Message-url:noise.js – 过滤掉某个疯狂印出一堆Message 的套件
Console Settings
Console 面板的右上角有一个齿轮，打开会看到八个选项，笔者先讲讲预设开启的选项。
Group Similar
Console 面板预设会把类似的Message group 在一起，且不能展开，例如这样：
for (let i = 10; i--;) console.log('similar')
Eager evaluation
Console 面板预设会自动预览JavaScript 的执行结果，但在某些情况不会出现预览，例如执行后会出错或是有副作用的代码。
Autocomplete from history
在Console 面板输入文字时预设会出现下拉选单，可以快速选择曾经输入过的代码。
Evaluate triggers user activation
为了资安考量和使用者体验，浏览器中有些API 是无法直接靠JavaScript 触发的，例如有声影片自动播放、开启Popup、下载档案等等。
以点击按钮开启Popup为例，引入一个含有button.click()
的JavaScript档会发现网址列出现「Pop-up blocked」，但如果是使用者手动按下按钮，就会触发浏览器的User activation状态并正常开启Popup：
window.open();
过太久也会失去User activation
而Console内预设在执行JavaScript时会触发User activation，这也是为什么在Console直接输入window.open()总是能开启Popup，可以关闭这个选项来测试User activation相关的API，笔者曾经因为Console面板内能Work，就直接写在程式码中了，踩个大雷。
Hide network
浏览器预设会印出关于网路的错误Message，例如收到4XX、5XX 的Status code 就会显示错误。
Preserve log
重整或跳页的时候保留Console面板的Log，包含输入的JavaScript，跳转时可以看到蓝色的Navigated to ...提示，也就是原本会清掉Log的时机。
Selected context only
利用左上角的Context选单搭配设定里面的Selected Context Only来过滤Message。
当其他Context有过多Message或是只想观察某个Context的Message时可以使用，最常见的情况就是观察嵌入的iframe内产生的Message，另外Extension、Worker、Service worker也都是不同的Context。
但要注意同时也只会显示属于该Context 的JavaScript log，毕竟不同Context 中执行的JavaScript 无法直接存取。
Log XMLHttpRequests
会印出XMLHttpRequest和Fetch的请求结果，比起Network面板，这个选项显示的资讯实在非常少，不过可以透过Reveal in Network panel连过去。
Show Log Timestamp
这个选项藏在DevTools 本身的Settings 里面，可以显示Console 中每一行印出时的Timestamp。
小结
今天把Console 面板的设定部分讲解完毕了，明天将会介绍能够大幅提升Debug 效率的Console API！
#debug#
举报/反馈
随着数码产品的不断升级换代，我们也面临着各种各样的问题。如何使用这些产品才能更好地满足我们的需求？如何解决遇到的技术难题？如何选择合适的数码产品？这些都是我们需要面对的问题。作为一名数码科技解答者，我将致力于为大家提供最准确、最实用的解答。无论您是初学者还是专业人士，无论您遇到的是什么问题，我都会尽我所能为您提供帮助。让我们一起探索这个充满无限可能的数码世界！
软件工程师,福建省宏港纺织科技有限公司,优质数码领域创作者,本地资讯创作者,活力创作者
关注
0
0
收藏
分享
