Chrome瀏覽器不只能夠調試頁面、JS、請求、資源、cookie,還能夠模擬手機進行調試。自從使用了Chrome,我就離不開它了。
下面整理一下如何使用Chrome進行調試。php
怎樣打開Chrome的開發者工具?
或者在Chrome的工具中找到:
或者,你直接記住這個快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打開控制檯),或者直接按F12。
打開的開發者工具就長下面的樣子:
java
不過我通常習慣與點右上角的那個按鈕,將開發者工具彈出做爲一個獨立的窗口:
node
Elements標籤頁
Elements標籤頁的左側就是對頁面HTML結構的查看與編輯,你能夠直接在某個元素上雙擊修改元素的屬性。
web
- Edit as HTML直接對元素的HTML進行編輯,或者刪除某個元素,全部的修改都會即時在頁面上獲得呈現。
- Copy能夠將HTML代碼直接複製下來,在拷貝別人網站上面的HTML代碼的時候灰常方便,你懂的~~
- Delete node刪掉一個HTML Node
- Break on能夠對某個元素進行監聽,在JS對元素的屬性或者HTML進行修改的時候,直接觸發斷點,跳轉到對改元素進行修改的JS代碼處
Elements標籤頁的右側能夠對元素的CSS進行查看與編輯修改:
chrome
- Style看HTML元素的樣式
- Computed能夠看元素的盒子模型
- Properties看到元素具備的方法與屬性,比查API手冊要方便得多
Network標籤頁
Network標籤頁對於分析網站請求的網絡狀況、查看某一請求的請求頭和響應頭還有響應內容頗有用。注意是在你打開Chrome開發者工具後發起的請求,纔會在這裏顯示的哦。
點擊左側某一個具體請求URL,能夠看到該請求的詳細HTTP請求狀況:
咱們能夠在這裏看到HTTP請求頭、HTTP響應頭、HTTP返回的內容等信息。瀏覽器
- Headers請求頭信息和響應頭信息
- Preview預覽結果,若是是文件能夠查看這個文件;若是是圖片能夠預覽這個圖片;若是是從服務器返回來的JSON數據,能夠查看格式話後的JSON
- Response從服務器返回的響應結果
- Cookies請求和響應的Cookie
- Timing具體的響應時間
Resources標籤頁
Resources標籤頁能夠查看到請求的資源狀況,包括CSS、JS、圖片等的內容。也能夠設置各類斷點。對存儲的內容進行編輯而後保存也會實時的反應到頁面上。
性能優化
Timeline標籤頁
注意這個Timeline的標籤頁不是指網絡請求的時間響應狀況,這個Timeline指的JS執行時間、頁面元素渲染時間(每一個信息都怎麼看,我沒弄懂..)
服務器
Profiles標籤頁
主要是作性能優化的,包括查看CPU執行時間與內存佔用(這個也沒弄懂)
Audits標籤頁
這個對於優化前端頁面、加速網頁加載速度頗有用哦(至關與Yslow)
點擊run按鈕,就能夠開始分析頁面,分析完了就能夠看到分析結果了
Console標籤頁
就是Javascript控制檯了:
在這個面板能夠查看錯誤信息、打印調試信息(console.log())、寫一些測試腳本,還能夠看成Javascript API查看用。
移動端開發調試
如今新版chrome彈出控制檯後以下圖,其中的工具對移動端調試很是方便。
在控制檯中能夠直接模擬手機、調整UA、修改網絡鏈接狀態
No Leanote account? Sign up now.