Chrome开发者工具-Console(一)

JavaScript控制台

JavaScript控制台主要为开发者提供两方面功能：

• 查看使用Console API提供的方法记录的代码诊断信息
• 和DevTools其他面板进行交互，运行JavaScript

查看从JavaScript记录的消息

1. 点击警告图标旁边的展开图标，DevTools会显示调用的堆栈跟踪。如下图显示，函数logWarning被调用了，该函数又调用了函数quoteDante。首先被调用的函数位于堆栈跟踪的底部，开发者可以随时通过 console.trace() 来记录堆栈跟踪

   

2. 在 Filter 框中可以输入单词或正则表达式进行消息过滤，或者输入url:url地址以仅查看来自该URL的消息，输入-url:url地址来隐藏来自该url的消息；点击控制台侧边栏 会显示所有的消息来源，可以点击某一栏看具体的消息

   

3. 控制台是个 REPL（交互式解释器环境），包含读取、评估、打印和循环四个步骤。控制台读取输入的JavaScript，评估代码后，打印出输入表达式的结果，然后循环到第一步。在控制台可以运行与页面无关的任意JavaScript以测试你想要的功能

4. 在控制台可以使用 $() 来代替 document.querySelector() 选择元素，但它跟jQuery没有关系

5. debug(function) 可以在该函数的第一行设置一个断点；key(object) 返回一个包含指定对象键的数组

   

控制台功能和API参考

控制台设置

• Hide network：默认情况下浏览器会将网络消息记录到控制台（如下图的GET记录），如果勾选则隐藏网络消息

• Log XMLHttpRequests：记录所有的XMLHttpRequests，并获取请求到Console

  

• Preserve log：如果勾选，则页面刷新后会依然保留刷新前的log记录

• Eager evaluation：在控制台输入JavaScript表达式时，会显示该表达式返回值的预览，禁用该选项可以关闭返回值预览

• Selected context only：可以通过勾选这个选项来隐藏某些网页的广告在控制台生成的消息，因为这些广告和网页位于不同的JavaScript上下文

• Autocomplete from history：当输入表达式时，控制台的自动完成弹出窗口会显示之前运行过的表达式，可根据需要决定是否禁用此选项

  

• Group similar messages in console：控制台的默认消息分组行为，如果禁用消息分组，消息就会一条条显示

清除控制台

• 单击
• 右键单击消息，然后选择清除
• 在控制台输入clear()并回车
• 在网页的JavaScript调用console.clear()
• 当控制台处于焦点时按 Ctrl + L

🥦PS:该文总结自Chrome Developers
🥝欢迎访问个人博客