chrome开发工具

八个主要工具：

Elements(元素)：   元素面板让你看到一个 DOM 树的全部相关信息，并允许你检查以及在传输过程中编辑 DOM 元素。也就是html和css.

Network（网络）:   网络面板提供了有关已经下载和加载过的资源的详细分析。在优化页面的基本过程中，确定和找到那些请求通常要比预计的时间更长。

Sources(源)：       文件路径。

Timeline(时间表)： 在加载和使用你的网页应用程序或网页时，时间轴面板给你关于时间开销的完整概述。包括从加载资源到解析 JavaScript，以及计算方式在内的所有事件，都                             会重 新绘制在一个时间表中。

Profiles(配置)：     配置面板允许您为网络应用程序或页面配置执行时间和内存使用量。这些有助于你理解资源的消耗，以帮助你优化你的代码。

Resources(资源)：资源面板允许你监视页面中加载的资源。它可以让你使用 HTML5 的本地存储，数据库，缓存，appcache，等

Audits(审核)：      审计面板可以像加载页面时那样分析一个页面。然后提供关于减少页面加载时间的建议和优化，以此提高感知（和真实）的响应。要进一步的了解该功能，我们                           推荐使用 pagespeed 。

Console(控制台)：

JavaScript 控制台为开发者提供了测试 Web 页面和应用程序两个主要功能,其中包括：

• 在开发过程中记录诊断信息。

• 一个可与文档和工具交互的 shell 提示符。

     您可以使用控制台编程接口提供的方法来记录诊断信息。如 console.log() 或 console.profile()。