最新 Chrome DevTools(v57) 使用詳解

寫在前面：Chrome DevTools 系列文章正在緊張地整理當中，目前正在整理 DevTools 的第一部分： Elements，你們能夠關注 Chrome DevTools 來得到最新的信息，也能夠關注整個項目front-end-study。

Chrome DevTools（Chrome 開發者工具） 是內嵌在 Chrome 瀏覽器裏的一組用於網頁製做和調試的工具。官網還推薦一款叫作 Chrome 金絲雀版本（Chrome Canary）的 Chrome 瀏覽器，從這裏你能夠得到最新版本的 DevTools。爲何 Google 稱之爲金絲雀呢，由於金絲雀早期在礦井中被用來預警，而該版本的 Chrome 必定程度上也能起到該做用。不用擔憂 Chrome Canary 會覆蓋本來的 Chrome，從 Logo 就能夠看出這是兩個軟件。本文的實操性很強，建議你們在閱讀時進行嘗試，以加深印象。另外，須要注意一下的是，本文不是對 DevTools 官方文檔的翻譯，只是對咱們實際使用中常用到的有用的功能進行整理。

訪問 DevTools

能夠經過如下這些方式打開 Chrome DevTools：

• 選擇右上角Chrome 菜單，而後選擇更多工具 -> 開發者工具

• 右鍵，選擇檢查/審查元素

固然，比較推薦利用快捷鍵來打開：

• Ctrl + Shift + I, F12 / Cmd + Opt + I，打開 DevTools

• Ctrl + Shift + J / Cmd + Opt + J，打開 DevTools，而且定位到控制檯面板

上面兩種方式不只能夠打開 DevTools，還能夠關閉 DevTools。固然，還有一種方式能夠打開 DevTools。

• Ctrl + Shift + C / Cmd + Opt + C，打開 DevTools，而且開啓審查元素模式（至關於點擊了 DevTools 左上角的圖標： ）

說到快捷鍵，這裏再跟你們介紹幾個很是有用的：

• F5, Ctrl + R / Cmd + R，刷新頁面

• Ctrl + F5, Ctrl + Shift + R / Cmd + Shift + R，刷新頁面並忽略緩存

• Ctrl + '+' / Cmd + Shift + '+'，放大 DevTools

• Ctrl + '-' / Cmd + Shift + '-'，縮小 DevTools

• Ctrl + 0 / Cmd + 0，DevTools 恢復大小

固然，DevTools 裏不只僅這些有用的快捷鍵，下面在介紹到具體的場景時再介紹。

DevTools 窗口

（圖片來自於 Chrome v57.0 截圖）

DevTools 是不少功能的集合，而在窗口頂部的工具欄是對這些功能的分組。最新的 Chrome 主要有 9 個功能組，分別對應了 9 個面板：

• Elements：在 Elements 面板中能夠經過 DOM 樹的形式查看全部頁面元素，同時也能對這些頁面元素進行所見即所得的編輯

• Console：一方面用來記錄頁面在執行過程當中的信息（通常經過各類 console 語句來實現），另外一方面用來當作 shell 窗口來執行腳本以及與頁面文檔、DevTools等進行交互

• Sources：Sources 面板主要用來調試頁面中的 JavaScript

• Network：在 Network 面板中能夠查看經過網絡來請求來的資源的詳細信息以及請求這些資源的耗時

• Performance：在 Performance 面板能夠查看頁面加載過程當中的詳細信息，好比在什麼時間開始作什麼事情，耗時多久等等。有人會問，這個跟上面的 Network 有什麼區別呢，上面也能顯示耗時信息。在 Performance 面板中，你不只能夠看到經過網絡加載資源的信息，還能看到解析 JS、計算樣式、重繪等頁面加載的方方面面的信息

• Memory：Memory 面板主要顯示頁面 JS 對象和相關聯的 DOM 節點的內存分佈狀況

• Application：記錄網頁加載的全部資源，包括存儲信息、緩存信息以及頁面用到的圖片、字體、腳本、樣式等信息

• Security：用於檢測當面頁面的安全性

• Audits：審計面板會對頁面的加載進行分析，而後給出提升頁面性能的建議，官網建議查看 PageSpeed Insights 來得到更多的頁面加載建議。

細心的同窗必定發現了咱們如今使用的 Chrome 上面沒有 Performance 和 Memory，而是 Timeline 和 Profiles，是否是我寫錯了呢？不是的，而是 Chrome 到 v57 後，便將 Timeline 改名爲 Performance，將 Profiles 改名爲 Memory。目前來看，Google 僅僅是改名以及調整了部分功能所屬的面板而已，並無功能上的增刪，這個會在下面介紹各個面板時詳細介紹。

除了 9 個功能面板，工具欄還有 3 個選項，分別是左側的 、 和右側的 ，分別表示檢查元素、設備切換以及 DevTools 的定製化面板。檢查元素後面在介紹 Elements 時會提到；設備切換是咱們比較經常使用的功能，可以將你的瀏覽器模擬成一個帶觸屏功能的移動設備；DevTools 定製化面板是對 DevTools 自己的定製與控制。下面着重介紹下「切換設備」這一功能。

切換設備

使用這個功能可以將你的瀏覽器變成任意一款移動設備，也能爲你的網頁設定寬高，這在作單頁應用時很是有用。如今選中「切換設備」選項，圖標由黑色變成藍色，整個瀏覽器內容窗口變成上下兩部分，上面是選項，下面是網頁內容：

上面有 4 個部分組成，第一個是設置設備類型，第二個表明下面網頁的寬和高，第三個表明縮放比例，第四個表明旋轉設備甚至選擇設備的狀態（須要設備支持，好比選擇Nexus 5X 時）。咱們着重看第一個。

點擊第一個下拉框，出現上圖，大家會發現有幾條分割線，先說瀏覽器默認的，有兩條分割線，將全部選項分紅 3 個部分，分別是

• Responsive，表明響應式，即你能夠隨意的拖動改變網頁的寬高

• 常見移動設備，好比 Galaxy S5 / iPhone 6 / iPad 等，選擇一項後，就能將瀏覽器模擬成那個設備的大小、User Agent 等行爲

• edit，編輯，選中以後出現以下界面：
  
  這個界面也能夠經過 -> Settings -> Devices 來打開。在這個界面上，你能夠選擇你常常須要使用的設備，固然也能夠定製你本身的設備。

  

  分別輸入設備名稱、設備寬高、DPR（默認是 1，可不填）、User-agent（用戶代理，可不填），選擇屏幕類型，最後點擊 "Add"，即可以將你的設備加到設備列表裏了。這裏再多說一下屏幕類型：

  • Mobile：可觸屏的移動設備，鼠標指針是粗黑的點，表明手指與屏幕的觸點

  • Mobile(no touch)：不可觸屏的移動設備

  • Desktop：通常指 PC 上的網頁，鼠標指針與普通 PC 網頁相似

  • Desktop(touch)：帶觸屏的 PC 上的網頁

  全部你們看到鼠標指針是個粗黑的點時不要以爲奇怪，那只是表明你如今在操控一臺移動設備。

當你將你自定義的設備添加進設備列表時，DevTools 會自動選中，從而能夠在下拉框中看到第四部分：

• 自定義的設備

那個人設備舉例，我通常不怎麼用到移動設備，因此我就保留了一個 iPhone 6，另外我還須要一個 1920 * 1080 的高清屏，因此我以 HD 命名，定義了一個 1920 * 1080 的設備。

上面大概介紹了 DevTools 的幾個面板和另外 3 個功能選項的做用，着重介紹了切換設備的功能，下面咱們一塊兒來看一下如何使用每個面板。

詳細介紹

下面的例子沒有特殊說明均拿 Github 進行舉例。

Elements

Elements

Console

Console

Sources

Sources

Network

Network

Performance

Performance

Memory

Memory

Application

Application

Security

Security

Audits

Audits