Chrome开发者工具使用教程-主要功能简介（一）

Chrome开发者工具是谷歌浏览器自带的一款开发者工具，它可以给开发者带来很大的便利。

主要作用有：

• 快速定位问题
• 查看站点页面加载信息
• 在线页面样式调整
• 前端代码调试
• 前端日志分析
• 浏览器存储查看
• 在线性能分析
• 等…

1.如何调出开发者工具

• 按F12键
• CTRL+SHIFT+I 或在页面上右键，点击“检查”按钮，如下图：
  

2.面板功能简介

• 元素（Elements）:
  用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面
• 控制台（Console）:
  控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行Sources:断点调试JS。
• 资源（Sources）:
  用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
• 网络（Network）:
  记录当前页面请求加载信息，并记录各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
• 性能（Performance）:
  用来对当前页面进行性能分析。
• 内存（Memory）:
  用于分析当前页面内存消耗。
• 应用（Application）:
  记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据等。
• 安全（Security）:
  判断当前网页是否安全。
• 审计（Audits）:
  对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。

后续博文会详细讲解在前端开发日常工作是如何使用Chrome开发者工具的。