打开Chrome开发者工具 - 快捷键
- Dom:
Control + Shift + C
- Javascript:
Control + Shift + J
- 最近关闭状态:
Control + Shift + I
在console中访问节点
- 通过
document.querySelectAll
访问 - 使用$0快速访问选中的元素,$1为上一次选中元素
- 拷贝 -
JS Path
在DOM中断点调试
- 属性修改时打断点:Break on -> attribute modifications
- 节点删除时打断点:Break on -> node removal
- 子树修改时打断点:Break on -> subtree modifications
console
console.log
- 接收变量传递,使用
%s
占位符来接
var temp = 'imooc'; console.log('this is %s', temp) // --> 'this is imooc'
%c
:接收样式定制输出信息
console.log("%c百度2022校园招聘简历投递:https://talent.baidu.com/external/baidu/campus.html", "color:green")
- 接收变量传递,使用
console.error
错误信息 - 通常在异常逻辑中catch
块的错误信息使用console.table
展示JSON格式的复杂信息console.group
组合信息展示-
const label = '打印一组组合信息' console.group(label) console.info('network') console.info('error') console.groupEnd(label) // 打印一组组合信息 // network // error
-
console.time()
:可检测性能方面,代码执行时间-
var fibonacci = function(n) { return n < 3 ? 1 : fibonacci(n - 1) + fibonacci(n - 2) } console.time() fibonacci(20) console.timeEnd() // default: 234992.75927734375 ms
-
console.clear()
清除控制台信息
javascript代码调试
debugger
:浏览器内置断点语句- 当程序运行到
debugger
语句时,会自动lock代码执行,将程序暂停在执行环境现场
- 当程序运行到
- 快捷键
- [F8]:恢复脚本执行
- [F9] 或者[F11]:单步调试代码
- 在对应代码行数打断点
Sources
中的Event Listener BreakPoints
给事件打断点
杂记
- 使用
esc
在面板下方输出console页面