【轉自：https://segmentfault.com/a/1190000007877846】
基本夠調試用了！有這麼詳細文章，真實很感謝作者！
寫在前面：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，打開 DevToolsCtrl + 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 + '+'，放大 DevToolsCtrl + '-' / Cmd + Shift + '-'，縮小 DevToolsCtrl + 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 個選項，分別是左側的 
切換設備
使用這個功能能夠將你的瀏覽器變成任意一款移動設備，也能爲你的網頁設定寬高，這在做單頁應用時非常有用。現在選中“切換設備”選項，圖標由黑色變成藍色，整個瀏覽器內容窗口變成上下兩部分，上面是選項，下面是網頁內容：
上面有 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
Console
Sources
Network
Performance
Memory
Application
Security
Audits
相關資料：
1、https://www.imooc.com/article/2559
2、https://www.oschina.net/translate/performance-optimisation-with-timeline-profiles
3、http://blog.csdn.net/tonghuaxl/article/details/73479976
4、http://www.cnblogs.com/caizhenbo/p/6679478.html#3889967
5、https://www.jianshu.com/p/471950517b07 【Network分析（包括cookies）】