Chrome的开发者工具(Chrome Developer Tools)

Chrome的开发者工具(Chrome Developer Tools)

按F12

https://developer.chrome.com/devtools/index

http://www.w3school.com.cn/html/html_intro.asp

http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html

http://wenku.baidu.com/link?url=fz5kfYH9wlEkqHpkPiP7b8Ws4uVQzQaFQEMzroP7jWj4NYq2vx1FLHUfX9Y28pkfyfsBl_fgMfQdVB2K87w0aeSGvqiuKiPQw-SDl2GYUnS

下面来分别说下每个Tab的作用

1， Elements标签页

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

在元素（Elements）面板中，可以看到整个页面的 DOM 树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。

左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，

HTML核心属性

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline   style）
title	text	规定元素的额外信息（可在工具提示中显示）

 

右侧可以对左侧被选元素的样式CSS文件进行查看与编辑修改：

HTML 与CSS的关系：

l  HTML只有内容，不能定义格式。

l  CSS用来定义 HTML的格式。

可以写在HTML中用style的属性来定义CSS格式

<div class="ofRegFooter" style="float: left; width: 100%; display: block;" id="cid1381627595963">

另一种就是单独写一个.css文件在HTML中引用

<link xmlns="" rel="stylesheet" href="/static/common/css/jquery.ui.core.css" type="text/css">

2，Resources标签页

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。

3， Network标签页

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

The Network panel provides insights into resources that are requested and downloaded over the network in real time. Identifying and addressing those requests taking longer than expected is an essential step in optimizing your page.

The Network panel records information about each network operation in your application, including detailed timing data, HTTP request and response headers, cookies, WebSocket data, and more. The Network panel helps you answer questions about the network performance of your web application, such as:

• Which resource had the slowest time to first byte?
• Which resources took the longest time to load (duration)?
• Who initiated a particular network request?
• How much time was spent in the various network phases for a particular resource?

l  Use large resource rows: 有些Column会包含两行值（如Name Path； Status Text； Size Content； Time Latency），选中这个按钮，两行值都会显示，否则只会显示主要的一行。

l  Initiator：The object or process that initiated the request. It can have one of the following values:

Parser：Chrome's HTML parser initiated the request.

Redirect：A HTTP redirect initiated the request.

Script：A script initiated the request.

Other：Some other process or action initiated the request, such as the user navigating to a page via a link, or by entering a URL in the address bar.

l  Cookies：The number of cookies transferred in the request. 

l  Size and Content：

Size is the combined size of the response headers (usually a few hundred bytes) plus the response body, as delivered by the server.

Content is the size of the resource's decoded content.If the resource was loaded from the browser's cache rather than over the network, this field will contain the text (from cache).

l  Time and Latency：

Time is total duration, from the start of the request to the receipt of the final byte in the response.

Latency is the time to load the first byte in the response.

l  Preserve log upon navigation button ：new records are appended to the bottom of the table. Otherwise，the current network record log is discarded when you navigate to another page, or reload the current page. 

l  The Timeline shows the time it took to load each resource, from the start of the HTTP request to the receipt of the final byte of the response.

Each resource loading time is represented as a bar, color-coded according to the resource type. The length of the lighter-shaded part of each bar represents the request's latency, while the length of the darker-shaded part represents the time spent receiving the response data.

It is unique from the others in that, when clicked, it displays a menu of additional sort fields.

 Timeline — Sorts by the start time of each network request. This is the default sort, and is the same as sorting by the Start Time option).按照request的开始时间排序。

Start Time — Sorts by the start time of each network request.

Response Time — Sorts by each request's response time.

End Time — Sorts by the time when each request completed.

Duration — Sorts by the total time of each request.

Latency — Sorts by the time between the start of the request and the beginning of the response (also known as the "time to first byte").

l  Network resource details

HTTP request and response headers；

Resource preview；

HTTP response；

Cookie names and values；

WebSocket messages；

Resource network timing

l  Resource network timing

The Timing tab graphs the time spent on the various network phases involved loading the resource.

 

 

Property	Description
Proxy	Time spent negotiating with a proxy   server connection.
DNS Lookup	Time spent performing the DNS   lookup. You want to minimize DNS look ups.
Blocking	Time the request spent waiting for   an already established connection to become available for re-use.
Connecting	Time it took to establish a   connection, including TCP handshakes/retries, DNS lookup, and time connecting   to a proxy or negotiating a secure-socket layer (SSL).
Sending	Time spent sending the request.
Waiting	Time spent waiting for the initial   response.
Receiving	Time spent receiving the response   data.

Script标签页

很明显，这个标签页就是查看JS文件、调试JS代码的

Timeline标签页

注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间

 时间线（timeline）告诉我们告诉您载入页面的时间究竟花在哪些地方。从加载资源到解析 JavaScript 脚本、计算样式表及页面渲染的所有步骤，您都可以在这里看到它们消耗的时间和内存，但是并没有告诉我们代码运行的时候发生了什么。profiler会告诉我们哪些函数执行时占用了大部分时间。

时间线标签为Chrome所记录下来的内容提供三种类型的视图: 事件、帧和内存

事件/帧视图显示的是花在HTML解析（蓝色部分）、JavaScript渲染(黄色部分)、样式计算(紫色)以及CSS渲染(绿色)等方面的时间。

内存视图是用来寻找内存泄漏的迹象的。

Profiles标签页

这个主要是做性能优化的，包括查看CPU执行时间与内存占用：

profiler会根据花费的时间对JavaScript中的函数进行排序，我们由此可以找出耗时的函数。另外，我们可以通过点击函数名旁边的三角形箭头来查看完整的函数调用栈。

The Profiles panel lets you profile the execution time and memory usage of a web app or page. The Profiles panel includes a few profilers: a CPU profiler, a JavaScript profiler and a Heap profiler. These help you to understand where resources are being spent, and so help you to optimize your code:

• The CPU profiler shows where execution time is spent in your page's JavaScript functions.
• The Heap profiler shows memory distribution by your page's JavaScript objects and related DOM nodes.
• The JavaScript profile shows where execution time is spent in your scripts

Audits标签页

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

Console标签页

就是Javascript控制台了：

这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行：