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 得到更多信息。