Google Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

一.如何调出开发者工具

使用F12打开开发者工具
在页面上右键–》检查，打开开发者工具。
在浏览器有上角左键单击–》更多工具–》开发者工具（快捷键Ctrl+shift+I）

二.开发者工具初步介绍

chrome开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。

元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面
控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入”console”并执行~
源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。

Elements面板
这个就是查看、编辑页面上的元素，包括HTML和CSS：

左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选”Edit as Html”直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（注：看到上面右键菜单的最后一个选项”审查元素”了么？这是不是说明这个开发者工具的页面也是HTML来的呢？你点一下就知道了哦，嘿嘿）
你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：

你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin神马的）：

注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。

Console面板

就是Javascript控制台了：

这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性，我可以直接在Console中输入”console”并执行：
目前控制台方法和属性有：
[“$$”, “$x”, “dir”, “dirxml”, “keys”, “values”, “profile”, “profileEnd”, “monitorEvents”, “unmonitorEvents”, “inspect”, “copy”, “clear”, “getEventListeners”, “undebug”, “monitor”, “unmonitor”, “table”, “$0”, “$1”, “$2”, “$3”, “$4”, “$_”]
一般情况下我们用来输入信息的方法主要是用到如下四个

console.log 用于输出普通信息
console.info 用于输出提示性信息
console.error用于输出错误信息
console.warn用于输出警示信息
console.debug用于输出调试信息

Resources面板

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。
这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：

添加断点：在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。

中断调试：添加断点后，当JS代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的

Network面板

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。

请求文件具体说明

Headers
Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
Preview：预览面板，用于资源的预览
Response：响应信息面板包含资源还未进行格式处理的内容
Timing：资源请求的详细信息花费时间

performance面板

1、操作区域：包含录制，刷新页面分析，清除结果等一系列操作
开始录制按钮(window下快捷键ctrl+E)
重新录制按钮
清空录制信息
打开本地录制文件
保存当前录制数据
多个录屏的切换
是否屏幕快照（勾选了，总览图中会有一系列的屏幕快照，位置在Net和HEAP之间；反之，不会显示屏幕快照）
是否显示内存（勾选了，总览图中的屏幕快照下面有一个Heap，就是我们通俗所说的内存）
垃圾回收
禁止脚本样本（勾选了，在详情区域的Main区域不会显示js事件的调用；反之会的。这里可以通过两个录制来看一下【禁止时候的火焰图明显低一些】）
调整网络状态（模拟一些网络不好的状况）
是否开启加速渲染（默认不用勾选，这个不具体展开）
cpu性能设置（可以调整4xslowdown来模拟手机运行）

2、overview总览图：高度概括随时间线的变动，包括FPS，CPU，NET

FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿
CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型，不同颜色代表不同资源
【蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：JavaScript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间）
】
NET。有两条蓝色的长条，深蓝代表优先级比较高的请求，浅蓝代表优先级比较低的请求
屏幕快照。可以把鼠标放到总览图区域会有一个屏幕快照的弹框图
HEAP。这就是通常说的内存

3、详情区域：从不同的角度分析框选区域。例如：Network，Frames, Interactions, Main等

详情区域主要包括两个部分：上半部分（内存情况）和下半部分（选中的时间段的是事件相关信息统计）
4、总结区域：精确到毫秒级的分析，以及按调用层级，事件分类的整理
内存情况：
JS Heap:js堆
Documents:文档数
Nodes:DOM 节点数
Listeners:监听数
GPU Memory:GPU内存
总结情况
summary:按照网页显示的整个过程，统计每个阶段花费的时间【loading/scripting/rendering/painting/other/idle】
Bottom-Up:按照事件花费的时间长短来排序的
Call Tree:按照调用顺序来排序的【从根调用事件到当前选中事件】
Event Log：按照事件发生的先后顺序排序，显示的事件的详细信息

Memory面板简介
如果想要看更多的内存信息快照，则需要打开 Chrome 浏览器的开发者工具中的 Memory 面板了，下面就简单介绍一下该面板的使用。
它大概是长这样：

上面有三个按钮：
Heap snapshot - 用以打印堆快照，堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配
Allocation instrumentation on timeline - 在时间轴上记录内存信息，随着时间变化记录内存信息。
Allocation sampling - 内存信息采样，使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。

Application面板简介
该面板主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

这个面板跟前前面几道硬菜（Network面板、Timeline面板、Profiles面板）比起来简单多了，这里就稍微作一下介绍：

Local Storage 如果你在开发过程中使用了local storage来存储键值对(KVPs)，那么你就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
Application Cache 你可以使用Application Cache窗格去查看通过Application Cache API创建的资源。
Frames 将页面上的资源按frame类别进行组织显示

Security面板简介

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。

HTTPS和HTTP的区别主要为以下四点：

① https协议需要到CA申请证书，一般免费证书很少，需要交费。
② http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
③ http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
④ http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

如果网页是安全的，则会显示这样一条消息：This page is secure (valid HTTPS).。

通过点击View certificate可以查看main origin的服务器证书信息。
点击左侧可以查看指定源的连接和证书详情。

如果网页是不安全的，则会显示：This page is not secure.。

该面板可以区分两种类型的不安全的页面：

如果被请求的页面通过HTTP提供服务，那么这个主源就会被标记为不安全。
如果被请求的页面是通过HTTPS获取的，但这个页面接着通过HTTP继续从其他来源检索内容，那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击。

Audits面板简介

这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：

点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了：

它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：