詳解Google Chrome瀏覽器（操作篇）（上）

開篇概述

在上篇博客中詳解Google Chrome瀏覽器（理論篇）一文中，主要講解了Chrome 搜索引擎使用、Chrome安裝和基本操作、Chrome 基本架構、多線程等原理性問題，這篇將重點講解Chro-me實操問題，主要結合“Chrome 主調試面板“,對Chrome,Elements,Con-sole,Sources,NetWork,TimeLine,Profiles,Application,Security,Audits進行詳解。若對廣大讀者朋友有所幫助，我將不勝感激。本篇博文主要從 當然了，在閱讀本篇文章前，強烈建議大家先閱讀詳解Google Chrome瀏覽器（理論篇）一文。如此，對本篇文章的理解，也許會更加容易些。

溫故而知新

1、Chrome基本架構圖和Chrome主調試面板

 2、Chrome DevTools 調試面板簡要介紹

正文

一、Elements面板

概述

定義： Inspect and Edit Pages and Styles by Elements panel，but also effective immediately.

譯文：通過Elements 面板，不僅僅可以查看和編輯頁面和樣式，而且所做的改變立即生效。

詳解

第一部份：操作DOM

1、查看DOM樹

打開Element面板，可以查看所有DOM節點，包括CSS和JavaScript，如下圖所示，左側為DOM樹，右側為CSS樣式。

 

2、選取DOM節點

將鼠標移到網頁中的某元素上面，該元素會發生變化如下圖所示：

 

3、點擊DOM樹p節點元素，即可選中。這時，會發現Element面板中的DOM樹發生了變化，如下圖所示：

注釋：

選中的p節點在DOM樹中被精確定位（藍色背景），可以看到p節點的DOM層次（紅色方框），在面板右側，是p節點的CSS樣式。當然，也可以在Element面板的DOM樹中選取DOM節點。將鼠標放到相應的DOM節點上，會發現網頁中相應的節點也發生了變化,點擊該節點，即可選中。

4、增加、刪除和修改DOM節點

在Element面板中，選擇DOM節點，在文本處右擊鼠標，會彈出一個菜單，如下圖所示：         

 注釋

 a、Edit text：編輯該節點中的文本。也可以在文本處雙擊進行編輯。

 b、Edit as HTML：編輯該節點及其子節點的所有HTML元素（包括節點中的文本）。

 c、Copy：復制 。(比較簡單，這里就不論述了)

 (1)Copy outerHTML

 (2)Copy selector

 (3)Copy XPath

 (4)cut element

 (5)Copy element

 (6)Paste element

 d、Hide element:隱藏元素，讓其不在頁面顯示。

 e、Delete element:刪除元素。

 f、Expand all:展開指定節點及其所有子節點。

 g、Collapse all:收縮指定節點及其所有子節點。

5、拖動節點，改變節點順序。

6、為節點添加屬性

為<p>節點添加id屬性，如下：

1	<pid= "demo" >http: //www.itxueyuan.org/javascript/</p>

 會在控制台輸出p#demo；再向<p>節點添加class屬性和name屬性，如下：

1	<pid= "demo" class = "demo" data= "demo" >http: //www.itxueyuan.org/javascript/</p>

 會在控制台輸出p#demo.demo。可見，控制台只會輸出符合W3C標准的屬性，不支持自定義屬性。不過，實際開發中很少用到該功能。

7、Inspect and live-edit the HTML and CSS of a page using the Chrome DevTools Elements panel.

 注釋

   a、Inspect and edit on the fly any element in the DOM tree in the Elements panel.
   b、 View and change the CSS rules applied to any selected element in the Styles pane.
   c、View and edit a selected element's box model in the Computed pane.
   d、View any changes made to your page locally in the Sources panel.           
8、Live-edit a DOM node
To live-edit a DOM node, simply double-click a selected element and make changes:

注釋

The DOM tree view shows the current state of the tree; it may not match the HTML that was originally loaded for different reasons. For example, you can modify the DOM tree using JavaScript; the browser engine can try to correct invalid author markup and produce an unexpected DOM.
9、Live-edit a style
Live-edit style property names and values in the Styles pane. All styles are editable, except the ones that are greyed out (as is the case with user agent stylesheets).
To edit a name or value, click on it, make your changes, and press Tab or Enter to save the change.

 

By default, your CSS modifications are not permanent, changes are lost when you reload the page. Set up persistent authoring if you want to persist your changes between page loads.

10、Examine and edit box model parameters
Examine and edit the current element's box model parameters using the Computed pane. All values in the box model are editable, just click on them.

注釋

The concentric rectangles contain the top, bottom, left, right values for the current element's padding, border, and marginproperties.
For non-statically positioned elements, a position rectangle is also displayed, containing the values of the top, right, bottom, and left properties.

For position: fixed and position: absolute elements, the central field contains the actual offsetWidth × offsetHeight pixel dimensions of the selected element. All values can be modified by double-clicking them, like property values in the Styles pane. The changes are not, however, guaranteed to take effect, as this is subject to the concrete element positioning specifics.

 11、View local changes

 

注釋

To view a history of live-edits made to your page:
    a、In the Styles pane, click on the file that you modified. DevTools takes you to the Sources panel.
    b、Right-click on the file.
    c、Select Local modifications.
To explore the changes made:
   a、Expand top-level file names to view the time time modification occurred a modification occurred.
   b、 Expand second-level items to view a diff (before and after) corresponding to the modification. A line with a pink background signifies a removal while a line with a green background signifies an addition.
12、查看css樣式

CSS樣式審查面板是一個非常有用的面板，實際開發中，有時候CSS樣式表會非常復雜，甚至連我們自己都不知道當前節點應用了哪些樣式。使用CSS樣式審查面板，可以讓我們清楚地知道當前節點使用了哪些樣式，分別來自哪些文件，哪些樣式是被覆蓋的，哪些樣式是最終樣式，哪些樣式是無效的，等等。
如下圖所示，選中節點，Element面板右側的CSS樣式審查面板會展示出該節點的CSS樣式。在CSS樣式審查面板中，我們可以添加、刪除和修改CSS樣式。另外，CSS審查面板中有幾個子面板，如下圖所示：

注釋

子面板說明：

 a、Style（樣式）：當前節點的樣式；
 b、Computed（計算）：查看當前節點經過計算后的樣式以及盒模型數據；
 c、 Event Listeners（事件監聽）：查看為當前節點綁定的事件和事件監聽函數；
 d、 DOM Breakpoints（DOM斷點）：查看為當前節點設置的DOM斷點；
 e、  Properties（屬性）：當前節點（對象）的所有屬性。

小結

Element 譯為“元素”，Element 面板可以讓我們動態查看和編輯DOM節點和CSS樣式表，並且立即生效，避免了頻繁切換瀏覽器和編輯器的麻煩。 我們可以使用Element面板來查看源代碼，它不但可以很好的格式化DOM節點，清晰的展現HTML文檔，還可以查看JavaScript創建的DOM節點和iframe中的DOM節點，比在當前網頁中右擊鼠標選擇“查看網頁源代碼”強大很多。 總之，Element面板可以讓我們很透徹的了解DOM和CSS的底層結構。

二、Console面板

概述

定義：Use the Console API to write information to the console, create JavaScript profiles, and start a debugging session.

譯文:使用Console API向控制台輸出信息，產生JavaScript文件和啟動調試會話。

The Console

The console offers a way to inspect and debug your webpages. Think of it as the Terminal of your web content. The console has access to the DOM and JavaScript of the open page. Use the console as a tool to modify your web content via interactive commands and as a teaching aid to expand your knowledge of JavaScript. Because an object’s methods and properties autocomplete as you type, you can see all available functions that are valid in Safari.For example, open the console and type

(‘p′)[1].((‘p′)[1].(

is shorthand for document.querySelectorAll—see more shorthand commands in Table 5-1.) Because this paragraph is the second instance of the p element on this page ([1] in a 0-based index), the node represents this paragraph. As you hover over the node, its position on the page is visibly highlighted. You can expand the node to see its contents, and even press Command-C to copy it to your clipboard.

 

Command-Line API

You can inspect HTML nodes and JavaScript objects in more detail by using the console commands listed in Table 5-1. Type the command-line APIs interactively within the console.
If your scripts share the same function name as a Command-Line API function, the function in your scripts takes precedence.

The functions listed in Table 5-1 are regular JavaScript functions that are part of the Web Inspector environment. That means you can use them as you would any JavaScript function. For example, you can assign a chain of Console API commands to a variable to create a useful shorthand. Listing 5-1 shows how you can quickly see all event types attached to the selected node.

After defining this function, inspect the magnifying glass in the top-right corner of this webpage, and type evs() in the console. An array containing the string “click” is returned, because there is a click event listener attached to that element.
Of course, these functions shouldn’t be included in your website’s JavaScript files because they are not available in the browser environment. Only use these functions in the Web Inspector console. Console functions you can include in your scripts are described in Console API.

Console API

詳解

1、console.assert(expression, object)

定義：Writes an error to the console when the evaluated expression is false.

譯文：當計算表達式為假時，向控制台輸出錯誤信息。

示例1：

1 2 3 4

function  greaterThan(a,b) {    console.assert(a > b, { "message" : "a is not greater than b" , "a" :a, "b" :b}); } greaterThan(5,6);

result:

示例2：

1 2	var  isFalse= false ; console.assert(isFalse, "Output Info when evaluated expression is false" );

result:

2、console.clear()

定義：Clears the console.If the Preserve log checkbox is enabled, console.clear() is disabled. However, pressing the clear console button () or typing the shortcut Ctrl+L while the Console is in focus still works.See Clearing the console for more information.

譯文：清楚控制台信息。如果保護日志復選框被啟用，則console.clear()被禁用。然而,當控制台的焦點仍在工作時，按明確的控制台按鈕(明確控制台按鈕)或輸入快捷鍵Ctrl + L。

3、console.count(label)

定義：Writes the the number of times that count() has been invoked at the same line and with the same label.

譯文：輸出被調用相同的行和相同的標簽的總次數。

示例1：

1 2 3

function  login(name) {    console.count(name +  ' logged in' ); }

result:

4、console.debug(object [, object, ...])

定義：Identical to console.log().

譯文：與console.log()一樣;

小結：功能與console.log()一樣。

5、console.dir(object)

定義：Prints a JavaScript representation of the specified object. If the object being logged is an HTML element, then the properties of its DOM representation are printed.

譯文：打印具體對象的JavaScript表示。如果被記錄的對象是一個HTML元素,然后打印DOM表示的屬性。

示例1：

1	console.dir(document)

result:

6、console.dirxml(object)

定義：Prints an XML representation of the descendant elements of object if possible, or the JavaScript representation if not. Calling console.dirxml() on HTML and XML elements is equivalent to calling console.log().

譯文：如果可能，打印對象的后代元素的XML表示，如果不可能，則打印javaScript表示。對於html和xml元素，調用console.dirxml()相當於調用console.log();

示例1：

1	console.dirxml(obj)

result:

示例2：

1	console.dir(document)；

 result:

示例3：

1	console.log(document)；

 rersult:

7、console.error(object [, object, ...])

定義：Prints a message similar to console.log(), styles the message like an error, and includes a stack trace from where the method was called.

譯文：打印一條類似於console.log()打印的消息,錯誤樣式和包括堆棧跟蹤。

示例1：

1 2 3 4 5 6 7

function  logName(obj){      if (obj.name==undefined){        console.error( 'name is undefined' )    } }   logName({});

result:

示例2：

1	console.error( 'print error Information' );

result:

8、console.group(object[, object, ...])

定義：Starts a new logging group with an optional title. All console output that occurs after console.group() and before console.groupEnd() is visually grouped together.

譯文：開始一個帶有可選標題的日志組。所有控制台輸出的內容被包含在以console.group()開始和以consol.groupEnd()結束之間。

示例1：

1 2 3 4 5 6 7 8 9

function  name(obj) {    console.group( 'name' );    console.log( 'first: ' , obj.first);    console.log( 'middle: ' , obj.middle);    console.log( 'last: ' , obj.last);    console.groupEnd(); }   name({ "first" : "Wile" , "middle" : "E" , "last" : "Coyote" });

result:

示例2：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function  name(obj) {    console.group( 'name' );    console.log( 'first: ' , obj.first);    console.log( 'middle: ' , obj.middle);    console.log( 'last: ' , obj.last);    console.groupEnd(); }   function  doStuff() {    console.group( 'doStuff()' );    name({ "first" : "Wile" , "middle" : "E" , "last" : "coyote" });    console.groupEnd(); }   doStuff();

result:

9、console.groupCollapsed(object[, object, ...])

定義：Creates a new logging group that is initially collapsed instead of open.

譯文：創建一個新的初始化倒塌而不是開放的日志組。

示例：

1 2 3

console.groupCollapsed( 'status' ); console.log( "peekaboo, you can't see me" ); console.groupEnd();

result:

10、console.groupEnd()

定義：Closes a logging group. See console.group for an example.

譯文：創建日志組。以console.group()作為例子。

11、console.info(object [, object, ...])

定義：Prints a message like console.log() but also shows an icon (blue circle with white "i") next to the output.

譯文：不僅打印一條像console.log()一樣的消息，而且也顯示了一個緊挨着輸出結果的圖標(帶有"i"的藍色圈)。

示例：

1	console.info( '帶有"i"的藍色圈' )

result:

12、console.log(object [, object, ...])

定義：Displays a message in the console. Pass one or more objects to this method.Each object is evaluated and concatenated into a space-delimited string.

譯文：將消息顯示在控制台。將一個或多個對象傳遞給這個方法。每個隊對象被計算成和連接成一個空格分隔字符串。

示例：

1	console.log( 'Hello, Logs!' );

result:

13、console.marktimeline()

已經被棄用，已被console.timeStamp替換。

示例：

1	console.markTimeline();

result:

14、console.profile([label])

定義：Starts a JavaScript CPU profile with an optional label. To complete the profile, call console.profileEnd(). Each profile is added to the Profiles panel.

譯文：開始一個帶有可選標簽的JavaScript CPU性能分析。以console.profileEnd()作為整個性能分析結束的標記。每次性能分析結果被附加到性能分析面板。

示例：

1 2 3 4 5 6 7

function  processPixels() {    console.profile( "processPixels()" );    // later, after processing pixels    console.profileEnd(); }   processPixels();

result:

15、console.profileEnd()

定義：Stops the current JavaScript CPU profiling session if one is in progress and prints the report to the Profiles panel.See console.profile() for an example.

譯文：如果性能分析進行中和把分析報告打印到性能分析面板，停止當前的JavaScript CPU性能分析會話 。以console.profile作為一個例子。

16、console.table()

定義：displays  the data in a table form.The data argument may be an array or an object.

譯文：將數據以表格形式打印出。數據參數可能為一個數組，也可能為一個對象。

示例1：

1 2 3

// an array of strings   console.table([ "apples" ,  "oranges" ,  "bananas" ]);

result:

示例2：

1 2 3 4 5 6 7 8 9 10

// an object whose properties are strings   function  Person(firstName, lastName) {    this .firstName = firstName;    this .lastName = lastName; }   var  me =  new  Person( "John" ,  "Smith" );   console.table(me);

result:

示例3：

1 2 3 4

// an array of arrays   var  people = [[ "John" ,  "Smith" ], [ "Jane" ,  "Doe" ], [ "Emily" ,  "Jones" ]] console.table(people);

result:

示例4：

1 2 3 4 5 6 7 8 9 10 11 12

// an array of objects   function  Person(firstName, lastName) {    this .firstName = firstName;    this .lastName = lastName; }   var  john =  new  Person( "John" ,  "Smith" ); var  jane =  new  Person( "Jane" ,  "Doe" ); var  emily =  new  Person( "Emily" ,  "Jones" );   console.table([john, jane, emily]);

result:

示例5：

1 2 3 4 5 6 7 8 9

// an object whose properties are objects   var  family = {};   family.mother =  new  Person( "Jane" ,  "Smith" ); family.father =  new  Person( "John" ,  "Smith" ); family.daughter =  new  Person( "Emily" ,  "Smith" );   console.table(family);

result:

示例6：

1 2 3 4 5 6 7 8 9 10 11 12

// an array of objects, logging only firstName   function  Person(firstName, lastName) {    this .firstName = firstName;    this .lastName = lastName; }   var  john =  new  Person( "John" ,  "Smith" ); var  jane =  new  Person( "Jane" ,  "Doe" ); var  emily =  new  Person( "Emily" ,  "Jones" );   console.table([john, jane, emily], [ "firstName" ]);

result:

17、console.time([label])

定義：Starts a new timer. Call console.timeEnd() to stop the timer and print the elapsed time to the Console.

譯文：開始一個新的定時器。調用console.timeEnd()停止定時器,把已記時的時間打印到控制台。

示例1：

1 2 3 4 5 6

console.time(); var  arr =  new  Array(10000); for  ( var  i = 0; i < arr.length; i++) {    arr[i] =  new  Object(); } console.timeEnd();

result:

示例2：

1 2 3 4 5 6

console.time( 'total' ); var  arr =  new  Array(10000); for  ( var  i = 0; i < arr.length; i++) {    arr[i] =  new  Object(); } console.timeEnd( 'total' );

result:

示例3：

1 2 3 4 5 6 7 8

console.time( 'total' ); console.time( 'init arr' ); var  arr =  new  Array(10000); console.timeEnd( 'init arr' ); for  ( var  i = 0; i < arr.length; i++) {    arr[i] =  new  Object(); } console.timeEnd( 'total' );

result:

18、console.timeEnd([label])

定義：Stops a timer. See console.time() for examples.

譯文：停止計時器。以console.time()作為一個例子。

19、console.timeStamp([label])

定義：Adds an event to the Timeline during a recording session.

譯文：在一個記錄會話期間，添加一個事件到時間表。

示例：

1	console.timeStamp( 'check out this custom timestamp thanks to console.timeStamp()!' );

result：

20、console.trace(object)

定義：Prints a stack trace from the point where the method was called.

譯文：打印一個堆棧跟蹤的方法。

示例：

1 2 3 4 5 6 7 8 9 10 11

function  add(num){      if (num>0){        //you can pass lables and objects to trace,too.        console.trace( 'recursion is fun:' ,num);        return  num+add(num-1);      } else {        return  0;      } }   add(3);

result:

21、console.warn(object [, object, ...])

定義： Prints a message like console.log(), but also displays a yellow warning icon next to the logged message.

譯文：不僅打印像console.log()的消息，而且也顯示一個緊挨着輸出消息的黃色圖標。

示例：

1	console.warn( 'user limit reached!' );

result:

 

小結：

      大致介紹了Chrome console內置函數，其中，console.log(),console.info(),console.error(),console.warn()需要區別一下。

      

 三、Sources面板

概述

Sources面板通過設置斷點來調試 JavaScript ，或者通過Workspaces（工作區）連接本地文件來使用開發者工具的實時編輯器。在上一篇博文本篇博客詳解Google Chrome瀏覽器（理論篇）中概述了Sources面板的主要功能，即斷點調試、調試混淆的代碼和使用開發者工具工作區進行持久化保存，本篇文章將結合Sources面板的主要功能，且從Source面板三個組成部分來敘述，下圖紅色字體標記。

詳解

第一部份：它的功能類似於Resources面板，主要用來顯示網頁加載腳本文件，如css，js等資源文件，但不包括cookie,img等靜態資源文件。

該部分由三個Tab組成，它們都存在不同域名和環境下的js和css文件。

a、Sources：包含該項目的靜態文件，如項目資源文件css和js。雙擊選中文件，該內容會在第二部分顯示（若選擇JS文件，則可以在第二部分進行斷點調試）

b、Content scripts:主要是第三方插件和Chrome瀏覽器資源問件等

c、Snippets:js片段，允許用戶自設定JS，主要用來測試JS文件、記住調試片段、單元測試、少了功能代碼編寫等

第二部分

這部分，主要有兩個功能：查看第一部分選擇的頁面和js調試。主要講解js調試。

a、設置和取消斷點。選擇想要設置斷點的js具體行，點擊行號，就設置了斷點，再次點擊，就取消已設置的斷點。

b、快捷鍵：F10單步執行，但當遇到方法，不進入方法，直接方法外的下一行代碼。F11單步調試，且遇方法體，需要經過。CTR+F 快速查找匹配資源。CTR+G 快速定位文件具體行。

c、第二部分底部，“{}”表示格式化代碼。

d、第二部分底部，緊挨{}處右側，表示當前光標行號和列號。

第三部分

a、頂部圖標說明

b、Watch:為當前斷點添加表達式。注：程序每執行一行代碼，都會執行自定義添加的表達式，某些時候，會嚴重影響程序性能。

c、Scope監視環境變量，私有變量、公有變量、全局變量等。

 

總結

   本想在本篇博文就將Chrome講完的，但寫到這，感覺篇幅比較長了，經過認真考慮，還是分為兩篇博文來寫。

   本篇博文主要寫了Chrome DevTool 前三面板：Elements，Console和Sources，在接下來的另一篇博文中，將接着寫剩下的部分：Network,Timeline,Profiles,Application,Security,Audits面板。

   當然了，我寫博客的目的，不僅僅是為了與廣大博友分享知識，更希望能從讀者朋友們的反饋中，學到知識，以求達到共同學習，共同進步的目的。因此，廣大讀者朋友們，若對本篇博文有任何高見和建議，歡迎指出，如此，非常感謝！！！

 

 

 

 

 

 

開篇概述

     由於最近忙於公司產品的架構與研發，已經三個多月沒有寫博客了，收到有些朋友的來信，問為什么不及時更新博客內容呢，他們說他們正期待着某些內容。對此，非常抱歉，那么我在此也給各位朋友一些承諾，從即日起，無論再忙，也想辦法抽出時間保證每周至少一篇文章。好了，廢話不多說了，進入我們的主題吧，《詳解Google Chrome瀏覽器（操作篇）（下）》

      建議大家在閱讀本篇文章前，先閱讀前面寫的兩篇文章，即詳解google Chrome瀏覽器（理論篇）和詳解Google Chrome瀏覽器（操作篇）（上） 以求在內容上的系統性、連貫性和整體性。本篇文章將接着上篇文章“詳解Google Chrome瀏覽器（操作篇）（上）”寫，主要內容包括Google Chrome DevTools NetWork,TimeLine,Application,Security等方面。

正文

1、NetWork

 （1）NetWork面板截圖

（2）簡要分析

  a.使用網絡面板了解請求和下載的資源文件並優化網頁加載性能。

  b.網絡面板基礎。Network 面板記錄頁面上每個網絡操作的相關信息，包括詳細的耗時數據、HTTP 請求與響應標頭和 Cookie，等等。

   (a)使用 Network 面板記錄和分析網絡活動。

   (b)整體或單獨查看資源的加載信息。

   (c)過濾和排序資源的顯示方式。

   (d)保存、復制和清除網絡記錄。

   (e)根據需求自定義 Network 面板。

  c.資源時間軸。（詳細參照：https://developers.google.cn/web/tools/chrome-devtools/network-performance/understanding-resource-timing?hl=zh-cn）

  d.帶寬限制（詳細參照：https://developers.google.cn/web/tools/chrome-devtools/network-performance/network-conditions?hl=zh-cn）

  e. 過濾條件

    (a).選擇框內可按照關鍵字過濾。Regex表示支持正則表達式

    (b).指定條件搜索。

    domain：資源所在的域，即url中的域名部分。如 domain:api.github.com

    has-response-header：資源是否存在響應頭，無論其值是什么。如 has-response-header：Access-Control-Allow-Origin

    is：當前時間點在執行的請求。當前可用值：running

    larger-than：顯示大於指定值大小規格的資源。單位是字節(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

    method：使用何種HTTP請求方式。如 GET

    mime-type：也寫作content-type，是資源類型的標識符。如 text/html

    scheme：協議規定。如 HTTPS

    set-cookie-name：服務器設置的cookies名稱

    set-cookie-value：服務器設置的cookies的值

    set-cookie-domain：服務器設置的cookies的域

    status-code：HTTP響應頭的狀態碼

 （3）實際操作

  操作1：NetWork面板概覽

  Network 面板由五個窗格組成：

   a.Controls。使用這些選項可以控制 Network 面板的外觀和功能。

   b.Filters。 使用這些選項可以控制在 Requests Table 中顯示哪些資源。提示：按住 Cmd (Mac) 或 Ctrl(Windows/Linux) 並點擊過濾器可以同時選擇多個過濾器。

   c.Overview。 此圖表顯示了資源檢索時間的時間線。如果您看到多條豎線堆疊在一起，則說明這些資源被同時檢索。

   d.Requests Table。 此表格列出了檢索的每一個資源。 默認情況下，此表格按時間順序排序，最早的資源在頂部。點擊資源的名稱可以顯示更多信息。 提示：右鍵

點擊 Timeline 以外的任何一個表格標題可以添加或移除信息列。

   e.Summary。 此窗格可以一目了然地告訴您請求總數、傳輸的數據量和加載時間。

默認情況下，Requests Table 會顯示以下列。您可以添加和移除列。

• Name。資源的名稱。
• Status。HTTP 狀態代碼。
• Type。已請求資源的 MIME 類型。
• Initiator。發起請求的對象或進程。值為以下選項之一：
• Parser。Chrome 的 HTML 解析器發起請求。
• Redirect。HTTP 重定向發起請求。
• Script。腳本發起請求。
• Other。某些其他進程或操作發起請求，例如用戶通過鏈接或者在地址欄中輸入網址導航到頁面。
• Size。響應標頭（通常為數百字節）加響應正文（由服務器提供）的組合大小。
• Time。從請求開始至在響應中接收到最終字節的總持續時間。
• Timeline。Timeline 列可以顯示所有網絡請求的可視瀑布。 點擊此列的標題可以顯示一個包含更多排序字段的菜單。

 操作2：記錄網絡活動

 在 Network 面板打開時，DevTools 在默認情況下會記錄所有網絡活動。 要記錄活動，只需在面板打開時重新加載頁面，或者等待當前加載頁面上的網絡活動。

您可以通過 record 按鈕指示 DevTools 是否記錄。 顯示紅色 () 表明 DevTools 正在記錄。 顯示灰色 () 表明 DevTools 未在記錄。 點擊此按鈕可以開始或停止記錄，也可以按鍵盤快捷鍵 Cmd/Ctrl+e。

 操作3：在記錄期間捕捉屏幕截圖

 a.Network 面板可以在頁面加載期間捕捉屏幕截圖。此功能稱為幻燈片。點擊攝影機圖標可以啟用幻燈片。圖標為灰色時，幻燈片處於停用狀態 ()。如果圖標為藍色，則說明已啟用 ()。

重新加載頁面可以捕捉屏幕截圖。屏幕截圖顯示在概覽上方。

b.將鼠標懸停在一個屏幕截圖上時，Timeline 將顯示一條黃色豎線，指示幀的捕捉時間。

c.雙擊屏幕截圖可查看放大版本。在屏幕截圖處於放大狀態時，使用鍵盤的向左和向右箭頭可以在屏幕截圖之間導航。

 操作4：查看 DOMContentLoaded 和 load 事件信息

Network 面板突出顯示兩種事件：DOMContentLoaded和Load。

解析頁面的初始標記時會觸發 DOMContentLoaded。 此事件將在 Network 面板上的兩個地方顯示：

a.Overview 窗格中的藍色豎線表示事件。

b.在 Summary 窗格中，您可以看到事件的確切時間。

頁面完全加載時將觸發 load。此事件顯示在三個地方：

a.Overview 窗格中的紅色豎線表示事件。

b.Requests Table 中的紅色豎線也表示事件。

c.在 Summary 窗格中，您可以看到事件的確切時間。

操作5：查看單個資源的詳細信息

點擊資源名稱（位於 Requests Table 的 Name 列下）可以查看與該資源有關的更多信息。

可用標簽會因您所選擇資源類型的不同而不同，但下面四個標簽最常見：

• Headers。與資源關聯的 HTTP 標頭。
• Preview。JSON、圖像和文本資源的預覽。
• Response。HTTP 響應數據（如果存在）。
• Timing。資源請求生命周期的精細分解。

操作6：查看網絡耗時

點擊 Timing 標簽可以查看單個資源請求生命周期的精細分解。

生命周期按照以下類別顯示花費的時間：

• Queuing
• Stalled
• 如果適用：DNS lookup、initial connection、SSL handshake
• Request sent
• Waiting (TTFB)
• Content Download

將鼠標懸停到 Timeline 圖表內的資源上時，您也可以看到相同的信息。

操作7：查看 HTTP 標頭

點擊 Headers 可以顯示該資源的標頭。

Headers 標簽可以顯示資源的請求網址、HTTP 方法以及響應狀態代碼。 此外，該標簽還會列出 HTTP 響應和請求標頭、它們的值以及任何查詢字符串參數。

點擊每一部分旁邊的 view source 或 view parsed 鏈接，您能夠以源格式或者解析格式查看響應標頭、請求標頭或者查詢字符串參數。

您也可以點擊相應部分旁邊的 view URL encoded 或 view decoded 鏈接，以網址編碼或解碼格式查看查詢字符串參數。

操作8：預覽資源

點擊 Preview 標簽可以查看該資源的預覽。Preview 標簽可能顯示一些有用的信息，也可能不顯示，具體取決於您所選擇資源的類型。

操作9：查看 HTTP 響應內容

點擊 Response 標簽可以查看資源未格式化的 HTTP 響應內容。 Preview 標簽可能包含一些有用的信息，也可能不包含，具體取決於您所選擇資源的類型。

操作10：查看 Cookie

點擊 Cookies 標簽可以查看在資源的 HTTP 請求和響應標頭中傳輸的 Cookie 表。 只有傳輸 Cookie 時，此標簽才可用。

下面是 Cookie 表中每一列的說明：

• Name。Cookie 的名稱。
• Value。Cookie 的值。
• Domain。Cookie 所屬的域。
• Path。Cookie 來源的網址路徑。
• Expires / Max-Age。Cookie 的 expires 或 max-age 屬性的值。
• Size。Cookie 的大小（以字節為單位）。
• HTTP。指示 Cookie 應僅由瀏覽器在 HTTP 請求中設置，而無法通過 JavaScript 訪問。
• Secure。如果存在此屬性，則指示 Cookie 應僅通過安全連接傳輸。

操作11：查看 WebSocket 框架

點擊 Frames 標簽可以查看WebSocket連接信息。

只有選定資源發起 WebSocket 連接時，此標簽才會顯示。

下表對 Frames 標簽上表格中的每一列進行了說明：

• Data。消息負載。如果消息為純文本，將在此處顯示。 對於二進制操作碼，此字段將顯示操作碼的名稱和代碼。 支持以下操作碼：
• 延續框架
• 二進制框架
• 連接關閉框架
• Ping 框架
• Pong 框架
• Length。消息負載的長度（以字節為單位）。
• Time。消息創建時的時間戳。

消息根據其類型進行彩色編碼：

• 傳出文本消息為淺綠色。
• 傳入文本消息為白色。
• WebSocket 操作碼為淺黃色。
• 錯誤為淺紅色。

有關當前實現的說明：

• 要在每條新消息到達后刷新 Frames 表，請點擊左側的資源名稱。

• Frames 表格僅保留最后 100 條 WebSocket 消息。

操作12：查看資源發起者和依賴項

按住 Shift 並將鼠標懸停在資源上，可以查看其發起者和依賴項。 本部分將您懸停的資源稱為目標。

目標上方的第一個綠色編碼資源為目標的發起者。 如果上方存在第二個也是綠色編碼的資源，那么該資源將是發起者的發起者。 目標下方紅色編碼的任何資源都是目標的依賴項。

下方的屏幕截圖中，目標是 dn/。此目標的發起者為以 rs=AA2Y 開頭的腳本。 發起者 (rs=AA2Y) 的發起者為 google.com。 最后，dn.js 是目標 (dn/) 的依賴項。

請記住，對於具有大量資源的頁面，您可能無法看到所有的發起者或依賴項。

操作13：排序請求

默認情況下，Requests Table 中的資源按照每個請求的開始時間排序，最早的請求位於頂部。

點擊列標頭可以按照該標頭下每個資源的值對表格排序。 再次點擊相同的標頭可以將排序順序更改為升序或降序。

Timeline 列與其他列不同。點擊此列時，它將顯示一個由多個排序字段組成的菜單：

• Timeline。按每個網絡請求的開始時間排序。這是默認排序方式，與按 Start Time 選項排序相同。
• Start Time。按每個網絡請求的開始時間排序（與按 Timeline 選項排序相同）。
• Response Time。按每個請求的響應時間排序。
• End Time。按每個請求完成的時間排序。
• Duration。按每個請求的總時間排序。選擇此過濾器可以確定哪些資源的加載時間最長。
• Latency。按請求開始與響應開始之間的時間排序。 選擇此過濾器可以確定哪些資源至第一字節 (TTFB) 的時間最長。

操作14：過濾請求

Network 面板提供了多種方式來過濾要顯示哪些資源。 點擊 Filter 按鈕 () 可以隱藏或顯示 Filters 窗格。

使用內容類型按鈕可以僅顯示選定內容類型的資源。

注：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 並點擊過濾器可以同時啟用多個過濾器。

Filter 文本字段看似非常強大。如果您在其中輸入任意字符串，Network 面板僅會顯示文件名與給定字符串匹配的資源。

Filter 文本字段還支持各種關鍵詞，這樣，您可以按照各種屬性對資源排序，例如使用 larger-than 關鍵字按文件大小進行排序。

下文列表說明了所有關鍵字。

• domain。僅顯示來自指定域的資源。您可以使用通配符字符 (*) 來包含多個域。 例如，*.com 將顯示來自以 .com 結尾的所有域名的資源。 DevTools 會使用它遇到的所有域填充自動填充下拉菜單。
• has-response-header。顯示包含指定 HTTP 響應標頭的資源。 DevTools 會使用它遇到的所有響應標頭填充自動填充下拉菜單。
• is。使用 is:running 可以查找 WebSocket 資源。
• larger-than。顯示大於指定大小的資源（以字節為單位）。 將值設為 1000 等同於設置為 1k。
• method。顯示通過指定 HTTP 方法類型檢索的資源。 DevTools 會使用它遇到的所有 HTTP 方法填充下拉菜單。
• mime-type。顯示指定 MIME 類型的資源。DevTools 會使用它遇到的所有 MIME 類型填充下拉菜單。
• mixed-content。顯示所有混合內容資源 (mixed-content:all)，或者僅顯示當前顯示的資源 (mixed-content:displayed)。
• scheme。顯示通過未保護 HTTP (scheme:http) 或受保護 HTTPS (scheme:https) 檢索的資源。
• set-cookie-domain。顯示具有 Set-Cookie 標頭並帶有與指定值匹配的 Domain 屬性的資源。 DevTools 會使用它遇到的所有 Cookie 域填充自動填充下拉菜單。
• set-cookie-name。顯示具有 Set-Cookie 標頭並且名稱與指定值匹配的資源。 DevTools 會使用它遇到的所有 Cookie 名稱填充自動填充下拉菜單。
• set-cookie-value。顯示具有 Set-Cookie 標頭並且值與指定值匹配的資源。 DevTools 會使用它遇到的所有 Cookie 值填充自動填充下拉菜單。
• status-code。僅顯示 HTTP 狀態代碼與指定代碼匹配的資源。 DevTools 會使用它遇到的所有狀態代碼填充自動填充下拉菜單。

上面的一些關鍵字都提及自動填充下拉菜單。要觸發自動填充菜單，請在鍵入關鍵字時后面加一個冒號。 例如，在下面的屏幕截圖中，輸入 domain: 觸發了自動填充下拉菜單。

操作15：復制、保存和清除網絡信息

在 Requests Table 中點擊右鍵可以復制、保存或刪除網絡信息。 某些選項取決於上下文，因此，如果您希望操作單個資源，則需要右鍵點擊該資源所在的行。

下面的列表說明了每一個選項。

• Copy Response。將選定資源的 HTTP 響應復制到系統剪貼板。
• Copy as cURL。以cURL命令字符串的形式將選定資源的網絡請求復制到系統剪貼板。請參閱以cURL命令形式復制請求。
• Copy All as HAR。以HAR數據形式將所有資源復制到系統剪貼板。HAR 文件包含用於說明網絡“瀑布”的 JSON 數據結構。多款第三方工具可以依據 HAR 文件中的數據重建網絡瀑布。 
• Save as HAR with Content。將所有網絡數據及每一個頁面資源保存到 HAR 文件。 二進制資源（包括圖像）以 Base64 編碼文本的形式編碼。
• Clear Browser Cache。清除瀏覽器緩存。提示：您也可以從Network Conditions抽屜式導航欄中啟用或停用瀏覽器緩存。
• Clear Browser Cookies。清除瀏覽器的 Cookie。
• Open in Sources Panel。在 Sources 面板中打開選定資源。
• Open Link in New Tab。在新標簽中打開選定資源。您也可以在 Network 表中雙擊資源名稱。
• Copy Link Address。將資源網址復制到系統剪貼板。
• Save。保存選定的文本資源。僅在文本資源上顯示。
• Replay XHR。重新發送選定的 XMLHTTPRequest。僅在 XHR 資源上顯示。

以 cURL 命令形式復制一個或所有請求

cURL 是一種用於進行 HTTP 事務的命令行工具。

在 Requests Table 中右鍵點擊某個資源，將鼠標懸停在 Copy 上，然后選擇 Copy as cURL，復制 Network 面板檢測到的所有資源的 cURL 請求的字符串。

選擇 Copy as cURL，復制 Network 面板檢測到的所有資源的 cURL 請求的字符串。

當您復制全部時，過濾將被忽略（例如，如果您過濾 Network 面板僅顯示 CSS 資源，然后按 Copy All as cURL，您將獲取所有檢測到的資源，而不只是 CSS）。

操作16：自定義 Network 面板

默認情況下，Requests Table 會使用小行顯示資源。點擊 Use large resource rows 按鈕 () 可以增大每一行的大小。

大行可以讓某些列顯示兩個文本字段：主要字段和次要字段。 列標頭指示次要字段的含義。

添加和移除表格列

右鍵點擊 Requests Table 中的任一標題可以添加或移除列。

導航時保留網絡日志。

默認情況下，每當您重新加載當前頁面或者加載不同的頁面時，網絡活動記錄會被丟棄。啟用 Preserve log 復選框可以在這些情況下保存網絡日志。

新記錄將附加到 Requests Table 的底部。

操作17：其他資源

要詳細了解如何優化您的應用的網絡性能，請參閱下面的資源：

• 使用PageSpeed Insights確定可以應用到您網站的性能最佳做法，以及使用PageSpeed優化工具將應用這些最佳做法的流程自動化。
• Google Chrome中的高性能網絡討論了 Chrome 網絡內部機制，以及您如何充分利用它們讓您的網站更快。
• gzip壓縮的工作原理提供了 gzip 壓縮的高級概覽，並介紹了這種壓縮為什么是一種不錯的方法。
• 網頁性能最佳做法提供了更多用於優化您的網頁或應用的網絡性能的提示。

 

2、TimeLine

  （1）TimeLine面板

 

（2）簡要分析

 a.使用 Chrome DevTools 的 Timeline 面板可以記錄和分析您的應用在運行時的所有活動。 這里是開始調查應用中可覺察性能問題的最佳位置。
 b.執行 Timeline 記錄，分析頁面加載或用戶交互后發生的每個事件。
 c.在 Overview 窗格中查看 FPS、CPU 和網絡請求。
 d.點擊火焰圖中的事件以查看與其相關的詳細信息。
 e.放大顯示一部分記錄以簡化分析。

 （3）實際操作

  操作1：Timeline 面板包含以下四個窗格：

      (a).Controls。開始記錄，停止記錄和配置記錄期間捕獲的信息。

      (b).Overview。 頁面性能的高級匯總。更多內容請參見下文。 

      (c).火焰圖。 CPU 堆疊追蹤的可視化。您可以在火焰圖上看到一到三條垂直的虛線。藍線代表 DOMContentLoaded 事件。 綠線代表首次繪制的時間。 紅線代表 load 事件。

      (d).Details。選擇事件后，此窗格會顯示與該事件有關的更多信息。 未選擇事件時，此窗格會顯示選定時間范圍的相關信息。

操作2：Overview 窗格

Overview 窗格包含以下三個圖表：

     a.FPS。每秒幀數。綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，很可能會出現卡頓

     b.CPU。 CPU 資源。此面積圖指示消耗 CPU 資源的事件類型。

     c.NET。每條彩色橫杠表示一種資源。橫杠越長，檢索資源所需的時間越長。 每個橫杠的淺色部分表示等待時間（從請求資源到第一個字節下載完成的時間）。

   深色部分表示傳輸時間（下載第一個和最后一個字節之間的時間）。

   橫杠按照以下方式進行彩色編碼：

• HTML 文件為藍色。
• 腳本為黃色。
• 樣式表為紫色。
• 媒體文件為綠色。
• 其他資源為灰色。

 操作3：做記錄

要記錄頁面加載，請打開 Timeline 面板，打開想要記錄的頁面，然后重新加載頁面。 Timeline 面板會自動記錄頁面重新加載。要記錄頁面交互，請打開 Timeline 面板，然后按 Record 按鈕 () 或者鍵入鍵盤快捷鍵 Cmd+E (Mac) 或 Ctrl+E(Windows / Linux)，開始記錄。記錄時，Record 按鈕會變成紅色。執行頁面交互，然后按 Record 按鈕或再次鍵入鍵盤快捷鍵停止記錄。完成記錄后，DevTools 會猜測哪一部分記錄與您最相關，並自動縮放到那一個部分。

記錄提示

• 盡可能保持記錄簡短。簡短的記錄通常會讓分析更容易。
• 避免不必要的操作。避免與您想要記錄和分析的活動無關聯的操作（鼠標點擊、網絡加載，等等）。例如，如果您想要記錄點擊 Login 按鈕后發生的事件，請不要滾動頁面、加載圖像，等等。
• 停用瀏覽器緩存。記錄網絡操作時，最好從 DevTools 的 Settings 面板或Network Conditions抽屜式導航欄停用瀏覽器的緩存。
• 停用擴展程序。Chrome 擴展程序會給應用的 Timeline 記錄增加不相關的噪聲。 以隱身模式打開 Chrome 窗口或者創建新的Chrome用戶個人資料，確保您的環境中沒有擴展程序。

操作4：查看記錄詳細信息

在火焰圖中選擇事件時，Details 窗格會顯示與事件相關的其他信息。

 一些標簽（如 Summary）適用於所有事件類型。其他標簽則僅對特定事件類型可用。了解與每個記錄類型相關的詳細信息。

操作5：在記錄期間捕捉屏幕截圖

Timeline 面板可以在頁面加載時捕捉屏幕截圖。此功能稱為幻燈片。

在您開始記錄之前，請在 Controls 窗格中啟用 Screenshots 復選框，以便捕捉記錄的屏幕截圖。 屏幕截圖顯示在 Overview 窗格下方。

 操作6：分析 JavaScript

開始記錄前，請啟用 JS Profile 復選框，以便在您的時間線記錄中捕捉 JavaScript 堆棧。 啟用 JS 分析器后，您的火焰圖會顯示調用的每個 JavaScript 函數。

 操作7：分析繪制

開始記錄前，請啟用 Paint 復選框，以便獲取有關 Paint 事件的更多數據分析。 啟用繪制分析並點擊 Paint 事件后，新 Paint Profiler 標簽會出現在 Details 窗格中，后者顯示了許多與事件相關的更精細信息。

 

 操作8：渲染設置

打開主 DevTools 菜單，然后選擇More tools > Rendering settings 訪問渲染設置，這些設置在調試繪制問題時非常有用。渲染設置會作為一個標簽顯示在 Console 抽屜式導航欄（如果隱藏，請按 esc 顯示抽屜式導航欄）旁邊

 

 操作9：搜索記錄

查看事件時，您可能希望側重於一種類型的事件。例如，您可能需要查看每個 Parse HTML 事件的詳細信息。在 Timeline 處於焦

點時，按 Cmd+F (Mac) 或 Ctrl+F (Windows / Linux) 以打開一個查找工具欄。鍵入您想要檢查的事件類型的名稱，如 Event。工具

欄僅適用於當前選定的時間范圍。選定時間范圍以外的任何事件都不會包含在結果中。利用上下箭頭，您可以按照時間順序在結果中移動。

所以，第一個結果表示選定時間范圍內最早的事件，最后一個結果表示最后的事件。每次按向上或向下箭頭會選擇一個新事件，因此，您可以

在 Details 窗格中查看其詳細信息。按向上和向下箭頭等同於在火焰圖中點擊事件。

 

操作10：在 Timeline 部分上放大

您可以放大顯示一部分記錄，以便簡化分析。使用 Overview 窗格可以放大顯示一部分記錄。 放大后，火焰圖會自動縮放以匹配同一部分。

 

要在 Timeline 部分上放大，請執行以下操作：

• 在 Overview 窗格中，使用鼠標拖出 Timeline 選擇。
• 在標尺區域調整灰色滑塊。

選擇部分后，可以使用 W、A、S 和 D 鍵調整您的選擇。 W 和 S 分別代表放大和縮小。 A 和 D 分別代表左移和右移。

操作11：保存和打開記錄

您可以在 Overview 或火焰圖窗格中點擊右鍵並選擇相關選項，保存和打開記錄。

 

 

 

3、應用面板

（1）Application面板

 （2）簡要分析

  a.在 Chrome 52 之后資源面板更名為應用面板。

  b.使用資源面板檢查加載的所有資源，包括IndexedDB與Web SQL數據庫，本地和會話存儲，cookie，應用程序緩存，圖像，字體和樣式表。

  c.查看和修改本地存儲與會話存儲。

  d.檢查和修改 IndexedDB 數據庫。

  e.對 Web SQL 數據庫執行語句。

  f.查看應用緩存和服務工作線程緩存。

  g.點擊一次按鈕即可清除所有存儲、數據庫、緩存和服務工作線程。

 （3）實際操作

  操作1：本地存儲

  a.如果您使用本地存儲存儲鍵值對 (KVP)，則可以從 Local Storage 窗格中檢查、修改和刪除這些 KVP。

說明：

• 雙擊鍵或值可以修改相應的值。
• 雙擊空白單元格可以添加新 KVP。

• 點擊 KVP ，然后按 Delete 按鈕 () 可以刪除該 KVP。 只需點擊一次按鈕，即可從Clear storage窗格擦除所有本地存儲數據。

• 如果您使用一種可以創建、刪除或修改 KVP 的方式與頁面交互，則不會看到這些更改實時更新。 點擊 refresh 按鈕 () 可以查看您的更改。

  操作2：Session storage

   Session Storage 窗格與 Local Storage 窗格的工作方式相同。 參閱上面的本地存儲部分，了解如何查看和編輯會話存儲。

  操作3：IndexedDB

  a.使用 IndexedDB 窗格可以檢查、修改和刪除 IndexedDB 數據。展開 IndexedDB 窗格時，IndexedDB 下的第一個級別是數據庫。 如果存在多個活動的數據庫

，您會看到多個條目。 在下面的屏幕截圖中，頁面只有一個活動的數據庫。

b.點擊數據庫的名稱可以查看該數據庫的安全源、名稱和版本。

c.展開數據庫可以查看其鍵值對 (KVP)。

d.使用 Start from key 文本字段旁的箭頭按鈕可以在 KVP 的頁面之間移動。展開值並雙擊可以編輯該值。在您添加、修改或刪除值時，這些更改不會實時更新。

點擊 refresh 按鈕可以更新數據庫。

e.在 Start from key 文本字段中輸入鍵可以過濾出值小於該值的所有鍵。

說明：

在您添加、修改或刪除值時，這些更改不會實時更新。 點擊 refresh 按鈕 () 可以更新數據庫。點擊 Clear Object Store 按鈕 () 可以刪除數據庫

中的所有數據。 從Clear storage窗格中，點擊一次按鈕注銷服務工作線程並移除其他存儲與緩存也可以實現此目標。

 

4、安全面板(Security)

（1）Security面板

 

 （2）簡要分析

   a.使用安全面板調試混合內容問題，證書問題等等。

   b.提供了重要的安全性和數據完整性。

   c.在Chrome DecTools中使用Security面板調試安全問題前，請確保您已經在自己的網站上恰當地實現了https。

   d.使用 Security Overview 可以立即查看當前頁面是否安全。

   e.檢查各個源以查看連接和證書詳情（安全源）或找出具體哪些請求未受保護（非安全源）。

 （3）實際操作

   操作1： Security Overview

   a.要查看頁面的整體安全性，請打開 DevTools，然后轉至 Security 面板。您首先會看到 Security Overview,Security Overview 會一目了然地告訴您頁面是否安全。

安全頁面會通過消息 This page is secure (valid HTTPS). 指示。

  b.點擊 View certificate 查看主源的服務器證書。 非安全頁面會通過消息 This page is not secure. 指示。

c.Security 面板可以區分兩種非安全頁面。 如果請求的頁面通過 HTTP 提供，則主源會被標記為不安全。

 d.如果請求的頁面通過 HTTPS 檢索，但頁面會繼續使用 HTTP 檢索其他源的內容，然后頁面仍然會被標記為不安全。這稱為混合內容頁面。 混合內容頁面僅受部分保護

，因為 HTTP 內容可以被嗅探器獲取到且易受到中間人攻擊。

e.點擊 View request in Network Panel 打開 Network 面板的過濾視圖，然后查看具體是哪些請求通過 HTTP 提供。 這將顯示來自所有源的所有未受保護的請求。

   操作2：檢查源

a.使用左側面板可以檢查各個安全或非安全源。點擊安全源查看該源的連接和證書詳情。

b.如果您點擊非安全源，Security 面板會提供 Network 面板過濾視圖的鏈接。

c.點擊鏈接可以查看具體是源的哪些請求通過 HTTP 提供。

 

 

 總結

    本篇主要對Network,TimeLine,Application,Security做了簡要分析，並做了簡要的操作指示。

     到目前為止，對Google的講解基本結束了，若大家存在什么問題，可以把問題通過郵件發送給我，也可以在博客下面提問題。