---
navTitle: 前端脚本调试
---
# 前端脚本调试

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

## 调试要点{#points}

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

## 使用 Chrome 浏览器调试工具{#devtools}

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

![Chrome DevTools 界面](./images/debug-devtools.png)

DevTools 常用面板：

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

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

## 相关内容{#related}

- [前端脚本开发](./README.md)
- [脚本文件组织](../file-organization.md)
- [前端脚本 API 索引](./api-index.md)