网站本地调试工具_前端系列课程（9）-开发与调试工具

开发工具

任何可以编辑文本的工具，如记事本(效率？！)

文本编辑器：{ Sublime？↓ }、Vscode、Notepad++、Editplus...IDE(集成开发环境)：WebStorm、DW、Hbuilder、Intellij IDEA、Eclipse...

调试工具

调试工具，又称为开发者工具 — Chrome、Firefox、IE等不同但类似的调试工具(调试文档)。

如何查看网页原代码(网页是如何实现的呢？)— 只需单击右键，选择“查看源文件”或“查看网页源代码”即可。

---

[ Chrome调试面板 ] // 打开方式：右键 - 审查元素 / 查看页面源代码 或 F12

Elements：可以用来调试HTML和CSS，增删改查。

Networks：可以看到网站上所有网络请求，与后端调一些接口时会用到。

Sources：可以看到网站所有资源，如CSS、JS(可调试断点)等。

Console：类似命令行工具，可直接编辑JavaScript工具。(Console和Sources经常结合起来调试JS)

调试 - 断点 & (按钮)：继续执行、单步执行、进入函数、退出函数

查找功能：Ctrl+O 查找文件 Ctrl+Shift+O 查找函数

Resources：可以看到网站的本地数据资源，如 cookie、storage 等。

Timeline、Profiles、Audits：主要用来调试页面的性能。

---

[ IE早期版本不会自动更新 ]

IE8以上，都自带调试工具(可调试IE7到安装版本之间的任意版本)IE6(查看：IETester；调试：IE原生浏览器+IE Developer Toolbar)