谷歌开发者工具 - 控制台篇

• 元素篇
• 来源/源码篇
• 网络篇
  

  Chrome DevTools - Console控制台篇

  • • 一、官网
    • 二、主要用途
    • 三、控制台篇
    • • 1.JavaScript/浏览器消息记录
      • • （1）演示效果 / 两种记录状态
        • （2）显示导致调用的堆栈轨迹
      • 2.过滤消息
      • • （1）按日志级别过滤
        • （2）按内容过滤
        • （3）按正则表达式过滤
        • （4）按消息来源过滤
        • （5）按用户消息过滤
      • 3.同时开启两个面板 - 如elements和console
      • 4.控制台运行JavaScript
      • 5.实时查看JavaScript
      • 6.console格式和样式自定义
      • 7.ConsoleApi / Console Utilities API

这个系列会慢一些，年前完成，有遗漏欢迎各位分享

• 元素篇

一、官网

https://developer.chrome.com/docs/devtools/open?hl=zh-cn

二、主要用途

• 查看记录的消息 - consoleApi
• 运行 JavaScript - dom操作/新api学习/方法测试…

三、控制台篇

1.JavaScript/浏览器消息记录

演示案例采用官网提供html演示 https://devtools.glitch.me/console/log.html

（1）演示效果 / 两种记录状态

顺序触发按钮，黄色为js-consoleApi触发消息，红色为浏览器消息记录包括网络错误/类型校验错误…

（2）显示导致调用的堆栈轨迹

栈先进后出，这里可以看到这个告警是先由logWarning函数触发了quoteDante所抛出的告警

通过点击log.js:12跳转到Sources查看源头调用，右侧的连接也可以跳转

2.过滤消息

（1）按日志级别过滤

1.每个 console.* 方法都分配有一个严重级别：Verbose、Info、Warning 或 Error。例如，console.log() 是 Info 级消息，而 console.error() 是 Error 级消息。 - 官网
2.日志级别勾选代表需要展示的类型消息

（2）按内容过滤

（3）按正则表达式过滤

（4）按消息来源过滤

（5）按用户消息过滤

通过JavaScript 记录的消息称为用户消息

3.同时开启两个面板 - 如elements和console

打开一个面板，通过esc打开第二个，可以切换各自位置

4.控制台运行JavaScript

本系列更倾向每个工具内置功能使用，js运行提供些案例供大家查看

5.实时查看JavaScript

点击eyeIcon创建实时表达式，此时将显示实时表达式文本框

6.console格式和样式自定义

这里几乎不用，看起来会很新奇有意向可以去官网看看
https://developer.chrome.com/docs/devtools/console/format-style?hl=zh-cn

7.ConsoleApi / Console Utilities API

根据使用情况，这里不详细介绍，下面是两个api对应链接
ConsoleApi ：https://developer.chrome.com/docs/devtools/console/api?hl=zh-cn
Console Utilities API：https://developer.chrome.com/docs/devtools/console/utilities?hl=zh-cn