本文作者：@年年知识库

这篇文字的宗旨的教会大家使用谷歌浏览器开发者工具，快速定位问题解决问题以及完成代码调试、接口查看等；

开发者工具 九大功能面板：

  1. Elements元素面板：检查调整调试页面，调试DOM，调试CSS；
  2. NetWork网络面板：调试请求，了解页面静态资源分布，网页性能检测；
  3. Console控制台面板：调试JavaScript，查看Console log日志，交互式代码调试；
    1. Sources源代码资源面板：调试JavaScript页面源代码，进行断点调试代码；
  4. Application应用面板：查看&调试客户端存储，如Cookie、LocalStorage、sessionStorage等；
  5. Performance性能面板：查看页面性能细节，细粒度对网页载入进行性能优化；
  6. Memory内存面板：JavaScript CPU分析器，内存堆分析器；
  7. Security安全面板：查看页面安全及证书问题；
  8. Audits面板：使用GoogleLightHouse辅助性能分析，给出优化建议；

1.png

接下来我们采用 3W（what/why/how）法来分析这些面板 在哪里做，怎么做，为什么做

Elements元素面板能做什么？

  1. 实时编辑DOM节点和CSS样式

在线调试dom节点问题和样式微调修改直接一目了然很方便辅助我们开发
动画1.gif

  1. 元素查看及其盒子模型

点击箭头图标 在页面上选中查元素，控制台会自动定位到我们选择的元素，可以很快找到我们想要找到的元素。
盒子模型查看 可以看到元素margin padding值元素查看及其盒子模型.gif

  1. 事件绑定列表查看和跳转

    可以用来快速查看dom节点绑定的事件定位事件所在代码位置
    事件绑定列表查看和跳转.gif