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結構的查看與編輯，你可以直接在某個元素上雙擊修改元素的屬性。 
- Edit as HTML直接對元素的HTML進行編輯，或者刪除某個元素，所有的修改都會即時在頁面上得到呈現。
- Copy可以將HTML代碼直接復制下來，在拷貝別人網站上面的HTML代碼的時候灰常方便，你懂的~~
- Delete node刪掉一個HTML Node
- Break on可以對某個元素進行監聽，在JS對元素的屬性或者HTML進行修改的時候，直接觸發斷點，跳轉到對改元素進行修改的JS代碼處
Elements標簽頁的右側可以對元素的CSS進行查看與編輯修改： 
- Style看HTML元素的樣式
- Computed可以看元素的盒子模型
- Properties看到元素具有的方法與屬性，比查API手冊要方便得多
4.Network標簽頁:Network標簽頁對於分析網站請求的網絡情況、查看某一請求的請求頭和響應頭還有響應內容很有用。注意是在你打開Chrome開發者工具后發起的請求，才會在這里顯示的哦。
點擊左側某一個具體請求URL，可以看到該請求的詳細HTTP請求情況： 
我們可以在這里看到HTTP請求頭、HTTP響應頭、HTTP返回的內容等信息。
- Headers請求頭信息和響應頭信息
- Preview預覽結果，如果是文件可以查看這個文件；如果是圖片可以預覽這個圖片；如果是從服務器返回來的JSON數據，可以查看格式話后的JSON
- Response從服務器返回的響應結果
- Cookies請求和響應的Cookie
- 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 ：分析網頁並提供建議去優化網頁