今天看了一篇關於Chrome瀏覽器客戶端調試的文章,獲益匪淺,在此分享給大家。
先來認識一下這些按鈕
箭頭按鈕
用於在頁面選擇一個元素來審查和查看它的相關信息,當我們在Elements這個按鈕頁面下點擊某個Dom元素時,箭頭按鈕會變成選擇狀態。
設備圖標
點擊它可以切換到不同的終端進行開發模式,移動端和pc端的一個切換,可以選擇不同的移動終端設備,同時可以選擇不同的尺寸比例,chrome瀏覽器的模擬移動設備和真實的設備相差不大,是非常好的選擇。
Elements
功能標籤頁:用來查看,修改頁面上的元素,包括DOM標籤,以及css樣式的查看,修改,還有相關盒模型的圖形信息。
對應的樣式
盒模型信息
同時,當我們瀏覽網站看到某些特別炫酷的效果和難做的樣式時候,打開這個功能,我們即可看到別人是如何實現的,學會它這知識就是你的了,仔細鑽研也會有意想不到的收穫
Console控制檯
用於打印和輸出相關的命令信息,其實console控制檯除了我們熟知的報錯。
Sources
js資源頁面:這個頁面內我們可以找到當然瀏覽器頁面中的js 源文件,方便我們查看和調試。
Sources Panel 的左側分別是 Sources 和 Content scripts和Snippets
Content scripts 是 Chrome 的一種擴展程序,它是按照擴展的ID來組織的,這些文件也是嵌入在頁面中的資源,這類文件可以讀寫和操作我們的資源,需要調試這些擴展文件,則可以在這個目錄下打開相關文件調試,但是幾乎我們的項目還沒有相關的擴展文件,所以啥也看不到,平時也不需要關心這塊。
Network
網絡請求標籤頁:可以看到所有的資源請求,包括網絡請求,圖片資源,html,css,js文件等請求,可以根據需求篩選請求項,一般多用於網絡請求的查看和分析,分析後端接口是否正確傳輸,獲取的數據是否準確,請求頭,請求參數的查看
Timeline
可以顯示JS執行時間、頁面元素渲染時間,不做過多介紹
Profiles
可以查看CPU執行時間與內存佔用,不做過多介紹
Resources
會列出所有的資源,以及HTML5的Database和LocalStore等,你可以對存儲的內容編輯和刪除,不做過多介紹
Security
可以告訴你這個網站的安全性,查看有效的證書等
Audits
可以幫你分析頁面性能,有助於優化前端頁面,分析後得到的報告