前端脚本调试

前端脚本运行在浏览器端，主要使用浏览器 DevTools 调试。页面交互、组件联动、脚本数据集和前端表达式函数出现异常时，先在浏览器控制台确认报错，再定位到对应脚本文件。

调试要点

1. 前端脚本文件后缀通常为 .ts 或 .js。
2. 开发过程中，脚本一般使用 TypeScript 语法编辑，.ts 文件会被编译成 JavaScript 后在浏览器执行。
3. 前端脚本调试主要使用 Chrome 浏览器自带的 DevTools。
4. 调试完成后，删除临时日志、debugger 和只用于定位问题的测试代码。

使用 Chrome 浏览器调试工具

通过 F12、Ctrl+Shift+I，或浏览器页面右键菜单中的检查按钮，可以进入开发者工具。

DevTools 常用面板：

1. Elements：查看或修改 HTML 元素、CSS 属性、监听事件、断点等。
2. Console：执行一次性代码，查看 JavaScript 对象、调试日志和异常信息。
3. Sources：查看页面源代码、JavaScript、CSS，并调试 JavaScript 源码。
4. Network：查看请求、响应、Header 等网络信息。
5. Performance：分析页面性能。
6. Memory：分析网页内存占用。

注意

如果在 Sources 中无法定位对应 JavaScript 文件，可以在代码中添加 debugger 快速定位。调试结束后应及时删除 debugger。

相关内容

• 前端脚本开发
• 脚本文件组织
• 前端脚本 API 索引