开发与调试工具

开发工具

开发工具，可以是：任何可以编辑文本的工具，如记事本（ 效率？！）

• 文本编辑器：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 工具，通常与 Sources 结合起来调试 JS
  • 调试 - 断点   & （ 按钮 ）：继续执行、单步执行、进入函数、退出函数
  • 查找功能：Ctrl+O  查找文件         Ctrl+Shift+O  查找函数
• Resources：可以看到网站的本地数据资源，如 cookie、storage 等
• Timeline、Profiles、Audits：主要用来调试页面的性能

「 IE 早期版本不会自动更新 」

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