Chrome 开发者工具介绍（一）

　　Google Chrome 是一款由Google开发的网页浏览器，"Chrome"是化学元素”铬“的英文名称。Google浏览器基于Chromium开源项目，其内核采用的是webkit.Chrome包括很多优点，包括简洁的界面，很高的稳定性，速度和安全性。时至今日，Chrome发布已经超过7年，凭借其良好的性能，其市场占有率已经跃居第一位。于前端工程师而言，Chrome也是一个不可多得的开发工具。可以说，它一直走在其他浏览器前列。

打开开发者工具

除了常用的点击浏览器右上角，然后选择更多工具>开发者工具

鼠标右键点击元素，然后选择审查元素

使用快捷键F12打开

使用快捷键Ctrl+Shift+I打开

使用快捷键Ctrl+Shift+J打开

使用快捷键Ctrl+Shift+C打开

开发者工具窗口介绍

开发者工具上方有一个工具条，每个选项都对应一个面板，每个面板都有其对应的信息，默认情况下，一共有9个面板，可以使用快捷Ctrl+[和Ctrl+]这面板之间做快捷切换：

• Elments：当前页面的文档结构，样式等信息。
• Network：记录着网页的网络操作，包括时间信息，请求和响应头，cookies，等等
• Sources：包括当前网页所应用的所有文件和路径
• Timeline：时间轴面板记录和分析着当网页运行时，所有的活动信息。主要用于分析性能。
• Profiles：记录当执行某项操作时，时间信息和内存信息。
• Resources：查看网页的本地数据。
• Audits：分析性能，提出优化意见，推荐使用PageSpeed Insights.
• Console：控制台主要用于调试代码

查看DOM和样式

使用Elements面板可以查看页面的样式和DOM,并且能够实时编辑这些代码。

当我们打开Elements面板时，分为左右两栏，左边是html,右边是CSS样式和其他的选项。当有一个萌萌的设计师，想要知道某个部分的背景的颜色或者字体是什么的时候，就可以使用审查元素或者点开该面板，然后使用左上角的放大镜选中它，就可以得知该样式。

Console测试网页或程序

console面板提供了API能够让你在开发过程中，给出一些有用的信息。以帮助更好更快地开发和调试代码。

Debugging JavaScript

随着javascript应用的越加复杂，开发者需要一种debugging 工具更有效的方式来发现和修复代码的bug.开发者工具包括了一系列的工具能让你debugging更轻松。

提高网络性能

Network面板记录着对资源的请求和下载的时间，能对你分析应用的网络性能有极大的帮助。

Audits

Audits面板能够分析当页面加载时，它会提出一些建议以更好地提高加载时间和性能等。

提高渲染性能

Timeline面板提供了当页面加载或使用时，所花时间的预览信息。包括所有的事件，计算样式，加载等等。

JavaScript和CSS性能

Profiles面板当你操作是，它能够记录和分析执行时间和内存使用情况。能帮助你更好地优化代码和资源，它提供了：

• CPU profiles 记录你执行脚本时所花的时间；
• Heap profiles 记录你内存在不同部分的分布情况；
• JavaScript 记录你的脚本执行的时间；

查看存储

Resources 面板显示你加载页面所存储的数据信息，包括缓存，cookies,等等。

大家可以访问：https://developer.chrome.com/devtools 获得更多信息。