开发者工具十分重要，这里只写一些刚入门常用的模块。（等你达到进阶水平后自然而然就会需要高级的功能，自然而然就会去自学。）。其它浏览器一般也会有调试工具，操作上不尽相同，功能上也肯定比不过最主流的chrome浏览器（微信小程序的开发本质还是网页开发，里面的调试工具也是用这个的），建议使用chrome浏览器。这里以上一节HTML、CSS、JS基础的作业为分析对象：HTML、CSS、JS基础练习.rar

打开Chrome开发者工具

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击，选择 “检查”
  • 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

元素面板

 元素面板（Element）功能是：

  • 检查和调整页面
  • 编辑样式
  • 编辑DOM
  1. 可以分析HTML与CSS内容，分析某个元素是怎么布局与设置样式。（去分析别人的网站怎么做的，提升自己水平）。
  2. 实时修改HTML与CSS马上可以看到效果，调整至最佳效果再去写代码。（没学这个的新手会反复修改代码，保存，刷新再看效果再修改，这样效率低下。）

控制台面板

 控制台面板（Console）功能是：

  • 查看打印信息（有过滤功能）
  • 命令行交互
  1. 我经常会在这执行调试代码（需要先将变量引入到全局），以调试JS代码效果。

源代码面板

 源代码面板（Sources）功能是：

  • 断点调试（可带条件打断点）
  1. 断点调试是代码调试的重要手段，可以看到变量的实时值。（调试代码两大流派：断点流，打印流）

 除了JS代码可以打断点,还有DOM变化，XHR请求，事件监听：

  • DOM变化
    DOM变化
  • XHR请求
    XHR请求
  • 事件监听
    事件监听

网络面板

 网络面板（Network）功能是：

  • 免缓存（Disable cache）
  • 资源请求详情（请求、响应、时间轴）
  1. 常用来分析请求。
  2. 浏览器有缓存机制（有时修改了代码，浏览器刷新还是使用旧代码），有时需要开启免缓存。

    其它

     这些面板新手并不需要用到。

    性能面板

  • 分析运行时性能

    内存面板

  • JavaScript CPU 分析器
  • 内存堆区分析器

    应用面板

     使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

    附录

    Chrome浏览器 开发者工具-官方教程(要梯子)