chrome開發者工具使用技巧

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中

 

待深刻。