Chrome_瀏覽器開發人員工具

時間 2019-11-08

原文原文鏈接

Google Chrome 瀏覽器開發人員工具，讓網頁開發變得更輕鬆 html

不管是 IE 6/7 的 Internet Explorer Developer Toolbar 或者是 IE 8 自帶的 Developer Tools，仍是 Firefox 的 Firebug ，以及 Safari 的 Web Inspector 和 Opera 的 Dragonfly，他們的宗旨只有一個——幫助程序員方便、更高效地進行網頁開發。程序員

做爲瀏覽器中生力軍，Google Chrome 瀏覽器 (4.0及以上版本) 也自帶了豐富的開發人員工具，讓您能夠隨時隨地對任何網頁的 CSS、 HTML 和 JavaScript 進行實時編輯、調試以及監控。 web

Google Chrome 瀏覽器開發人員工具不只僅能幫助您診斷、修復在網頁加載、腳本執行以及頁面呈現中出現的問題，還能夠幫助您最大限度地瞭解您的網頁或網絡應用程序對CPU以及內存的使用狀況。 chrome

本篇教程將從如下幾部分系統地講解如何使用 Google Chrome 瀏覽器開發人員工具來幫助您的開發：數據庫

· 準備工做瀏覽器

· 如何使用元素 (Elements) 面板性能優化

· 如何使用資源 (Resources) 面板服務器

· 如何使用腳本 (Scripts) 面板 cookie

· 如何使用時間軸 (Timeline) 面板網絡

· 如何使用剖析 (Profiles) 面板

· 如何使用存儲 (Storage) 面板

· 如何使用審計 (Audits) 面板

· 如何使用 JavaScript 控制檯 (Console)

準備工做

要開始使用開發人員工具，請先下載 Google Chrome 瀏覽器。（若是您想試用最新版本的的開發人員工具，能夠下載開發版或測試版（英文網頁）Google Chrome 瀏覽器。）

在 Google Chrome 瀏覽器安裝完成後，您能夠打開本身感興趣的網頁或網絡應用程序，而後經過下面任何一種方式進入開發人員工具：

· 點擊位於瀏覽器用戶界面右上角的「頁面」下拉菜單，而後選擇「開發人員」→「開發人員工具」。

· 右鍵點擊網頁上的任一元素，在彈出菜單中選擇「審查元素」。

· 在 Windows 或 Linux 操做系統上，使用 Ctrl+Shift+I 快捷鍵打開開發人員工具（或使用 Ctrl+Shift+J 直接進入 JavaScript 控制檯）。

· 在 Mac 上，使用 Command+Option+I 快捷鍵打開開發人員工具（或使用 Command+Option+J 直接進入 JavaScript 控制檯）。

如今您應該已經看到開發人員工具的窗口了吧？在窗口的最上方的工具欄裏排列着 8 個圖標，分別對應不一樣的功能，每個圖標點擊後都會打開相應的調試面板，幫助您獲取各類不一樣的信息，如 DOM 樹、資源佔用狀況、頁面相關的腳本等。經過 Ctrl+[ 和 Ctrl+] 鍵，能夠在這些項之間進行切換。工具欄最右方還提供了一個搜索框，方便在當前面板中進行搜索。

工具窗口下部的按鈕可讓調試窗口停靠到主窗口內，切換 JavaScript 控制檯狀態，以及其它一些功能。固然您也可使用 Esc 鍵來更快地切換 JavaScript 控制檯狀態。直接點擊控制檯圖標會使控制檯調試界面會佔據了整個開發工具窗口。窗口右下角顯示的是錯誤和警告計數，點擊它們也會打開控制檯。

接下來的單元，讓咱們一塊兒來一一分解這些圖標所對應面板具備的強大功能吧！

元素（Elements）面板

在元素（Elements）面板中，能夠看到整個頁面的 DOM 樹結構和每一個元素的全部屬性，同時也能夠實時地修改這些元素及其屬性，並能夠實時看到修改後的效果。

咱們這裏以 Google 簡體中文首頁爲例，鼠標右鍵單擊「 Google 搜索」按鈕，選擇「審查元素」，您會看到以下的窗口界面（注：此處使用的內嵌工具窗口模式，如您的工具窗口爲獨立窗口模式，可經過點擊窗口左下方的「停靠」圖標將其變爲內嵌模式）：

在工具窗口右側，顯示的是被選元素的樣式信息，若有興趣，能夠嘗試經過雙擊現有屬性來修改該元素的 style 屬性或應用的某個選擇器中的屬性值，也能夠經過取消勾選的方式去掉一些屬性，同時觀察頁面的實時變化。那怎樣給現有的元素或者選擇器增長一個屬性值呢？不用着急，鼠標雙擊您所想修改的元素的 element.style 部分或者它應用的選擇器的空白部分（以下圖所示），便可添加屬性。須要注意的是，添加任何屬性都必須以分號結束。

拖動工具窗口最右側的滾動條，在展開的 Styles 模塊下方還有 Metrics、Properties、Event Listeners 幾大模塊。Metrics 模塊以圖形方式展現出左側面板中選中元素的盒模型並標出了各部分的詳細數值，在調試頁面佈局問題時，這樣的展現方式每每更直觀、更清晰。

向上拖動工具窗口中部的滾動條，找到「圖片」元素，點擊後，可看到在頁面上相應的元素被選中，這時咱們將工具窗口右側的滾動條拖到最下方，展開 Event Listeners 中個各項，可看到這個連接（元素）的相關事件監聽函數。經過 Event Listeners 項右側的「齒輪」圖標，您能夠選擇是隻顯示選中節點上的註冊的事件，仍是顯示整個事件流中全部註冊的事件。

點擊工具窗口左下角的放大鏡圖標可進入「審查模式」，選中後，放大鏡變爲藍色，這時隨鼠標在主窗口的頁面中的移動，你會看到相應的元素被高亮標識出來，點擊後，工具窗口會顯示選中元素的 DOM 節點信息。

另外值得注意的一點是，在 Google Chrome 瀏覽器開發人員工具裏，全部腳本和樣式表是按語法着色的，調試起來更加清晰。

資源（Resources）面板

在資源面板中，你能夠看到從網絡上下載的全部資源。打開資源面板的時候，您一般會看到以下的界面：

因爲資源跟蹤會對性能產生必定影響，能夠選擇只對本次會話進行追蹤仍是對全部會話都進行資源跟蹤。

選擇好後點擊啓用資源追蹤（「Enable resource tracking」）按鈕，你會看到以下的狀態：

這是加載此網頁使用網絡資源的時間表。每一個水平的棒狀圖示表明一個資源佔用網絡的時間，而在每一個棒狀圖示的左側顏色較淺的部分表明延遲時間（Latency），即從向服務器發出請求到服務器第一次響應之間的時長。鼠標移至棒狀圖示上，可看到每一個部分所花銷的精確時間。

圖中藍色和紅色的兩條垂直線分別表明 DOMContent 加載完成和 Load 事件被觸發的時間點。在瞭解了網頁各部分加載所花費的的時間後，您能夠進行有效改進從而提升網站的效率。

位於時間表上方的軸，列出了可供選擇的不一樣類型的資源，您能夠選擇查看全部資源，或僅查看某一類的資源。

經過時間表下方的下拉菜單，你能夠指定排序方式。同時您還能夠經過下拉菜單左側的「列表」選擇使用寬行或窄行的方式來查看全部資源的信息。

點擊左側工具欄的 Size 圖標，能夠看到下載的各項資源的大小。

點擊左側各項資源，則能夠看到它的詳細信息，例如點擊 logo_cn.png 這項，咱們將會看到：

打開「 Headers 」標籤頁能夠查看完整的頭信息。您甚至能夠直接將資源圖標拖入瀏覽器窗口，在瀏覽器中直接直接訪問該項資源。

腳本（Scripts）面板

在腳本面板裏，您能夠方便的調試 JavaScript 代碼。下面的圖中標註了在腳本面板裏的幾個主要功能：

圖中的①—③的3個圖標分別表明：
① 單步調試，不進入函數體內部
② 單步調試，進入函數體內部
③ 跳出當前函數

設置斷點後按 F5 刷新，頁面會在執行到斷點語句處停下，如圖：

您能夠在右側添加所需觀察的變量，來進行跟蹤變量值的變化，也可查看堆棧調用狀況及全局變量和函數的信息，也能夠將鼠標移到感興趣的變量名上直接查看此變量當前的值。

在腳本面板中，您可能會用到如下快捷鍵幫助調試：

Windows/Linux	Mac	功能
Ctrl+/	F8 或 Command+/	繼續運行
Ctrl+’	F10 或 Command+’	單步調試，不進入函數體內部
Ctrl+;	F11 或 Command+;	單步調試，進入函數體內部
Shift+Ctrl+;	Shift+F11 或 Shift+Command+;	跳出當前函數
Ctrl+.	Ctrl+.	進入上一層調用棧
Ctrl+,	Ctrl+,	進入下一層調用棧

時間軸（Timeline）面板

時間軸面板爲您的網頁及網絡應用程序作了一個詳細的性能分析，告訴您載入頁面的時間究竟花在哪些地方。從加載資源到解析 JavaScript 腳本、計算樣式表及頁面渲染的全部步驟，您均可以在這裏看到它們消耗的時間和內存。

打開時間軸面板，您會看到這樣的界面：

此次咱們以 Google 的更多產品頁舉例，看一下這個面板的功能：

1. 首先，在 Google Chrome 瀏覽器標籤頁中打開：http://www.google.com.hk/intl/zh-CN/options/

2. 若是您還沒有打開開發人員工具，請按照準備工做這一章節的介紹打開開發人員工具，並切換到時間軸（Timeline）面板

3. 點擊「開始記錄」圖標，您會看到圓點變爲紅色

4. F5 刷新頁面，待頁面載入完成後，再次點擊「開始記錄」圖標，紅色圓點變爲灰色，您會看到時間軸面板裏記錄下來的時間消耗狀況：

鼠標移到棒狀圖示上，會看到相應的事件在載入、腳本解析及渲染三步驟所花費的詳細時間：

您還能夠拖動上半部分區域的時間軸上的灰色豎條，設定下方詳細數據區的時間範圍，以下圖所示：

切換到 Memory 行，並從新記錄，能夠觀察頁面載入的過程當中每一個時刻使用堆的大小。

剖析（Profiles）面板

剖析面板由 CPU 分析器和堆分析器組成，它可以幫助您瞭解網頁和網絡應用程序的執行時間和內存使用狀況。

· CPU 分析器顯示的是 JavaScript 腳本里的每一個函數分別佔用了多少執行時間

· 堆分析器顯示每一個 JavaScript 對象所使用的內存大小

經過了解資源使用分佈，您就能夠有效地對代碼進行優化，從而提升網站的效率。

咱們以 V8 引擎基準測試頁面爲例，探討剖析面板的使用。
首先在 Google Chrome 瀏覽器中打開 V8 引擎基準測試頁面，並打開開發人員工具的剖析面板，您會看到以下界面：

點擊開始按鈕，並刷新測試頁面，開始信息收集。頁面從新載入完成後，瀏覽器在基準測試中的得分會顯示出來，這時點擊按鈕中止 CPU 使用信息收集，您會看到「 CPU PROFILES 」項目下多出一個記錄，這是您此信息收集區間 CPU 消耗的一個詳細分解記錄，您從中能夠看出每一個函數佔CPU時間的百分比。若是您僅僅對 JavaScript 代碼中的幾個函數感興趣，您也能夠選中它們，而後點擊按鈕，面板中將只顯示被選中函數的信息，而按鈕做用偏偏相反，將只顯示除選中函數之外其它函數的信息。

在頁面載入的過程當中，您能夠在任意時刻點擊內存信息採集按鈕，獲取那一時刻內存使用情況信息。內存使用信息記錄會顯示在「 HEAP SNAPSHOTS 」項下面。

剖析面板的搜索框不只僅可進行函數名/對象名搜索，同時也支持數值（支持單位後綴，如 ms/s/B/KB/MB 及 % ）查找和帶比較運算符（ <、<=、=、>=、> ）的數值查找。例如在搜索框裏輸入「 >30KB 」，您會看到全部大於30KB的記錄條被標爲淺橙色，同時左側的內存使用記錄旁也會有數字代表在這個記錄中有多少條知足搜索條件的結果。

存儲（Storage）面板

經過存儲面板，您能夠與 HTML 5 的數據庫存儲和 cookie 進行交互。您能夠檢查當前頁面打開的全部數據庫的內容，也能夠在這些數據庫中進行 SQL 查詢。

咱們以 Webkit 演示頁來簡單介紹一下此面板的使用方法：

1. 在 Google Chrome 瀏覽器中打開 Webkit 演示頁，並打開開發人員工具的存儲面板

2. 在「黃色便條」中鍵入「第一條記錄」，再新建兩個便條，分別鍵入「第二條記錄」和「第三條記錄」

在存儲面板中，您能夠點擊數據庫圖標，會發現此頁面創建了一個名爲「 WebkitStickyNotes 」的表，點擊此表，可查看裏面全部的記錄。

您也能夠點擊數據庫圖標，而後直接在右側的命令行窗口鍵入 SQL 語句進行查詢。開發人員工具在您鍵入 SQL 語句時，具備自動補齊功能，使用起來很是方便。

在 COOKIES 項下，您能夠查看到該頁保存的全部 Cookies ，也能夠經過右鍵菜單刪除它們。

審計（Audits）面板

審計面板是在 Google Chrome 瀏覽器 5.0 中新引入的模塊。它能夠幫助您檢查網頁性能和網絡利用率。打開審計面板，您將看到這樣的界面：

您可選擇所需檢測的項目或選擇「檢查所有」（「 Select All 」），而後點擊「運行」（「 Run 」）按鈕，開發人員工具將爲您的網頁生成一份詳細的審計報告並給出關於網絡利用及性能優化方面的建議，以下圖所示，爲 Google Chrome 瀏覽器開發人員工具爲更多 Google 產品頁所生成的審計報告：

JavaScript 控制檯（Console）

JavaScript 控制檯可與其它面板聯合使用，您能夠藉助它來審查 DOM 元素、調試 JavaScript 代碼、查看 HTML 解析錯誤等。

咱們再次以 Google 簡體中文首頁爲例說明 JavaScript 控制檯的用法：

進入 Google Chrome 瀏覽器開發人員工具的元素面板，點擊工具窗口左下角的第二個圖標打開 JavaScript 控制檯，您能夠經過 $(‘element_id’) 來查看一個 DOM 元素，也能夠經過「 $N 」（n=0,1,2,...）查看最近選中的元素。