谷歌浏览器调试（前端）：Chrome F12

Chrome开发者工具（DevTools）为前端调试工作提供了诸多的工具可供使用，相对于“alert”、“console.log”大大提高了前端调试的效率。

这些工具可以实现例如：DOM结构分析、CSS动态变更、断点调试、watch变量、检测网络请求和响应、移动端调试等。

 

点击Ctrl+Shift+I或F12打开DevTools，讲解基本使用界面：

1. 右上角可选择Dock side；
2. Ctrl+[和Ctrl+]切换页签，Ctrl+Shift+P命令快捷键
3. Elements、Console、Sources、Network、Application页签简单介绍
4. 左上角可切换移动端调试

 

Console页签

1. 中间的控制台可以实时验证JavaScript代码，可以实时控制页面（document.querySelector('button').style.fontSize='2em'）
2. 代码出现Error会在Console页面提示，点进去可以看到对应的代码位置
3. 左侧console侧边栏、清屏；右侧设置记录AJAX请求，可直接导航到对应代码的位置
4. Console.error, Console.table([{},{},{}]), console.clear, ctrl+L
5. 提前提一下Sources里的Snippets