Chrome devtools官網首頁：https://developer.chrome.com/devtools/index
打開devtools快捷鍵：Ctrl+Shift+J或F12
共分8個tab，切換快捷鍵：ctrl+["或者"ctrl+]“
控制台的官方API文檔地址:
控制台使用：
https://developers.google.com/chrome-developer-tools/docs/console
控制台API:
https://developers.google.com/chrome-developer-tools/docs/console-api
控制台命令行api：
https://developers.google.com/chrome-developer-tools/docs/commandline-api
分窗口介紹：
Elements:
1.元素上右鍵選scroll into view可以把元素顯示到窗口
2.對於a鏈接等hover/active等樣式的控制點右側
然后選擇相應狀態，就可以快速編輯了
3. 
可以在元素上添加斷點。
Network:
1. 紅藍兩條垂直線條，對於前端分析非常重要，藍色線條表示DOMREADY事件，即瀏覽器已經把整個HTML文檔的DOM結構解析完畢。一般我們在這個時候去做DOM查找比較靠譜，在它之前進行DON元素查找可能會出現元素無法找到的現象。紅線表示LOAD事件，即整個頁面的JS/CSS/圖片等都下載完畢，對應着腳本里的window.onload事件。兩條線越靠近左側，即頁面的響應速度越快，反之越慢。
2. TTFB（Time To First Byte）查看：
顏色區分：
有關TTFB的介紹：http://www.rackaid.com/blog/time-to-first-byte/
3. initiator列表示初始化請求的處理對象，可能會有四種可能的值：Parser、Redirect、Script、Other。分別表示請求是由頁面的HTML解析時發送的；直接的頁面請求；由script腳本處理發送的；或者其他諸如頁面里的link鏈接點擊發送的
4. size and Content列中的Size是響應頭部和響應體結合起來的內容大小。Content是資源解碼后的內容的大小。如果資源是從瀏覽器緩存中而不是服務器端獲取的，那么這個字段將顯示”from cache”
5. Time and Latency(延遲的意思)列中的Time是從請求開始到接收到最后一個字節的總時長。Latency是加載響應第一個字節的時間
6. Timeline:展示了網絡資源從HTTP請求開始到接收到最后一個字節的加載詳細信息。對於每一個色條，淺色表示等待時間，發出請求后服務器開始響應時間, 可以認為是 網絡延遲 + 服務器處理請求時間。深色表示接收時間，服務器響應到接收完畢數據的時間。
單擊timeline會出現排序方式菜單：
含義分別為：
- Timeline:通過每一個網絡請求的開始時間進行排序。這也是默認排序。同時也等同於Start Time選項
- Start Time：same as sorting by the Timeline Option
- Response Time:通過每一個請求的響應時間來排序
- End Time:通過每一個請求完成時間來排序
- Duration:通過每一個請求的總時長來排序
- Latency：通過請求開始到響應開始之間的時間來排序(known as the “time to first byte”)
不同顏色表示不同資源類型：
6. 可以在network面板的列表行頭部右鍵選擇要展示的列：
7. 有關每種http狀態碼含義：http://tool.oschina.net/commons?type=5
Sources：
1.快捷鍵：
在sources窗口下可以使用:ctrl+shift+o 當前文件中查找函數；ctrl+o 在所有文件中查找某個文件，
設置斷點：ctrl+B或點擊行號
跳到下一個斷點：F8
下一步（不進入函數）：F10
下一步（進入函數）：F11
2.該標簽下的css,js文件修改后可直接保存生效，但html頁面、經pretty print格式化的js不支持修改調試。如果在窗口中對文件進行了大量修改，想回退到某一次修改的結果，可以通過右鍵選歷史修改，在顯示的歷史記錄中回退。
3.
4.條件斷點：尤其對大量循環時有用，可設置為只在滿足特定條件才觸發。
5.右側可控制斷點、查看到當前各種信息、設置斷點。
continue:繼續執行代碼直到遇到另一個斷點停止。對應快捷鍵：F8
Step over:一行一行的執行代碼方便查看變量是怎么被操作更新的。如果你的代碼調用了一個方法，它會跳過調用方法的調試跟蹤，以便焦點始終保持在當前方法里。對應快捷鍵F10
Step into:像Step over，但是在調用方法時點擊Step into會將調試定位到調用的方法的第一行代碼的位置.對應快捷鍵F11
Step out:當Step into進一個方法時。點擊Step out會使方法剩下的代碼執行完畢，然后調試點再次回到父方法的調試點處。對應快捷鍵shift+F11
Toggle breakpoints:當開啟了調試模式之后，點擊此按鈕進行使用斷點和禁用斷點間的切換
設置了斷點之后你可以從右邊的BreakPoints選項去看到你設置了哪些斷點，同時右鍵點擊你設置的藍色斷點部分還可以編輯斷點,設置斷點的禁用、使用、刪除、斷點觸發條件以及是否從此處開始執行等。
執行到斷點時，鼠標懸停到已執行過的變量、方法、參數上會顯示當前該內容的值，右側的call stack會顯示當前調用的堆棧情況，scope varibles顯示當前作用域鏈上的變量。
該面板可用的快捷鍵：
6. Audits：可以進行頁面分析，對於優化前端頁面、加速網頁加載速度很有用。可以根據給的提示對頁面進行優化。
7. Timeline:顯示js執行、頁面元素渲染時間。
8. Profiles:主要做性能優化，包括CPU執行時間、內存占用等.
Profiles和timeline的使用參看：http://www.qingdou.me/3719.html
9. Resources標簽頁可以查看到請求的資源情況，包括CSS、JS、圖片等的內容，同時還可以查看到存儲相關的如Cookies、HTML5的Database和LocalStore等，你可以對存儲的內容編輯和刪除。
CSS文件可以直接修改CSS文件，並且修改即時生效。
10.控制台技巧：
1.可以直接使用$("")獲取元素，與頁面是否加載了jquery無關
2.常用命令console.dir，monitorEvent(),getEventListeners()等。
模擬移動端效果：
有的版本在齒輪設置中，有的在drawer中
待深入。