网站线上调试 Debug 全流程
一、线上调试 Debug 步骤
1.1 确定问题
打开页面控制台，查看报错信息，确定问题。
打开控制台的方式：按 F12 或（点击鼠标）右键 选择检查（以 Chrome 为例）。
1.2 修改代码（JS、CSS）
以 Chrome DevTools 为例，介绍修改代码的方式。修改 JS、CSS 的方式大同小异。
- 【Select folder for override】选择一个文件夹，用于存放修改后的文件，
Select folder for override。- [Chrome DevTools ~ Sources ~ Overrides ~ Select folder for override]
>
- 【Override source file】通过 sources 选择对应的文件（比如某个 JS 文件），然后右击鼠标，选择
Override content。
比如我选择重新修改某个 CSS 文件，选择特定的 CSS 文件进行
Override content后，它会自动将线上资源文件复制到本地配置好的文件夹（第一步配置的目录），然后在本地进行修改复制的文件，保存后重新刷新页面即可看到效果。
- JS 文件进行线上修改，操作流程和 CSS 文件类似，只不过选择的是 JS 文件，然后右击鼠标，选择
Override content。
二、线上调试 Debug 工具
2.1 Chrome DevTools
下面将以 Chrome DevTools 为例，介绍各个功能模块。主要以截图为主，具体使用方式可以参考 Chrome DevTools 官方文档。
2.1.1 Elements
2.1.2 Console
2.1.3 Sources
2.1.4 Network
2.1.5 Application
2.1.6 Performance
2.1.7 Memory
TODO...
2.1.8 Lighthouse
TODO...
2.1.9 Security
TODO...
2.2 Firefox Developer Tools
TODO...