chrome自帶調試工具介紹

Chrome瀏覽器不只能夠調試頁面、JS、請求、資源、cookie，還能夠模擬手機進行調試等等，爲開發者提供了不少方便，下面就介紹一下我經常使用到的調試技巧。

1.chrome瀏覽頁面經常使用快捷鍵

Ctrl+N 打開新窗口。
Ctrl+T 打開新標籤頁。

Ctrl+W關閉當前標籤

Ctrl + F4 關閉chrome瀏覽器

Ctrl+Tab 或 Ctrl+PgDown 切換到下一個標籤頁。

Ctrl+Shift+Tab 或 Ctrl+PgUp 切換到上一個標籤頁。

Ctrl+1 到 Ctrl+8 切換到標籤欄中指定地位編號所對應的標籤頁。
Ctrl+9 切換到最後一個標籤頁。

Ctrl+Shift+T 從頭打開前次封閉的標籤頁。谷歌瀏覽器可記住比來封閉的 10 個標籤頁。

F5 刷新頁面

Ctrl + F5 強制刷新頁面

F12 審查元素

F10設置斷點後按此鍵能夠一行一行執行js，在執行的過程當中若遇到了一個js函數就能夠按F11鍵跳到那個函數裏面去

Ctrl+Shift+Delete:用於顯示「清除瀏覽數據」界面，以下

 

2.打開chrome開發者工具：按F12或者點擊右鍵而後選擇審查元素

 

3.Elements標籤頁:Elements標籤頁的左側就是對頁面HTML結構的查看與編輯，你能夠直接在某個元素上雙擊修改元素的屬性。

1. Edit as HTML直接對元素的HTML進行編輯，或者刪除某個元素，全部的修改都會即時在頁面上獲得呈現。
2. Copy能夠將HTML代碼直接複製下來，在拷貝別人網站上面的HTML代碼的時候灰常方便，你懂的~~
3. Delete node刪掉一個HTML Node
4. Break on能夠對某個元素進行監聽，在JS對元素的屬性或者HTML進行修改的時候，直接觸發斷點，跳轉到對改元素進行修改的JS代碼處

Elements標籤頁的右側能夠對元素的CSS進行查看與編輯修改：

 

1. Style看HTML元素的樣式
2. Computed能夠看元素的盒子模型
3. Properties看到元素具備的方法與屬性，比查API手冊要方便得多

 

4.Network標籤頁:Network標籤頁對於分析網站請求的網絡狀況、查看某一請求的請求頭和響應頭還有響應內容頗有用。注意是在你打開Chrome開發者工具後發起的請求，纔會在這裏顯示的哦。

點擊左側某一個具體請求URL，能夠看到該請求的詳細HTTP請求狀況：

咱們能夠在這裏看到HTTP請求頭、HTTP響應頭、HTTP返回的內容等信息。

1. Headers請求頭信息和響應頭信息
2. Preview預覽結果，若是是文件能夠查看這個文件；若是是圖片能夠預覽這個圖片；若是是從服務器返回來的JSON數據，能夠查看格式話後的JSON
3. Response從服務器返回的響應結果
4. Cookies請求和響應的Cookie
5. Timing具體的響應時間

 

5.Sources標籤頁:sources標籤頁能夠查看到請求的資源狀況，包括CSS、JS、圖片等的內容。也能夠設置各類斷點。對存儲的內容進行編輯而後保存也會實時的反應到頁面上。

 

 

6.Timeline標籤頁:注意這個Timeline的標籤頁不是指網絡請求的時間響應狀況，這個Timeline指的JS執行時間、頁面元素渲染時間（每一個信息都怎麼看，我沒弄懂..）

 

7.Profiles標籤頁:主要是作性能優化的，包括查看CPU執行時間與內存佔用（這個也沒弄懂）

 

8.Audits標籤頁:這個對於優化前端頁面、加速網頁加載速度頗有用哦（至關與Yslow）

點擊run按鈕，就能夠開始分析頁面，分析完了就能夠看到分析結果了

 

9.Console標籤頁:就是Javascript控制檯了

在這個面板能夠查看錯誤信息、打印調試信息（console.log()）、寫一些測試腳本，還能夠看成Javascript API查看用。

 

10.移動端開發調試:如今新版chrome彈出控制檯後以下圖，其中的工具對移動端調試很是方便。

在控制檯中能夠直接模擬手機、調整UA、修改網絡鏈接狀態

11.推薦安裝的的插件：

json viewer：格式化輸出json數據，方便看json數據

二維碼生成器：根據當前頁面的地址生成二維碼

firebug ：這個不說了

Image Downloader for Tumblr：Download images from Tumblr with a single click. 若要一鍵下載該網頁圖片，能夠試試這個

fireshot： 捕捉網頁截圖，能夠存儲爲各類格式

有道詞典Chrome劃詞插件 ：方便查看英語單詞，呵呵，咋英語很差

YSlow ：分析網頁並提供建議去優化網頁

參考博客：http://segmentfault.com/a/1190000002439648