Chrome调试

Chrome 的开发者工具分为 8 个大模块，每个模块及其主要功能为：

• Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
• Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
• Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。
• TimeLine 标签页： 用于查看脚本的执行时间、页面元素渲染时间等信息。
• Profiles 标签页：用于查看 CPU 执行时间与内存占用等信息。
• Resource 标签页：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。
• Audits 标签页：用于优化前端页面，加速网页加载速度等。
• Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。

1.代码格式化

一般情况下上线前 js 文件在都会压缩一下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Sourse 面板下面打开一个压缩的js文件，会有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化, 方便设断点，提高可读性。

2.查看元素绑定事件

在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关