超詳細的Chrome瀏覽器調試

Chrome CSS HTML5 CPU 聖故又名 2017-05-21

今天看了一篇關於Chrome瀏覽器客戶端調試的文章,獲益匪淺,在此分享給大家。

先來認識一下這些按鈕

超詳細的Chrome瀏覽器調試

功能菜單

箭頭按鈕

用於在頁面選擇一個元素來審查和查看它的相關信息,當我們在Elements這個按鈕頁面下點擊某個Dom元素時,箭頭按鈕會變成選擇狀態。

設備圖標

點擊它可以切換到不同的終端進行開發模式,移動端和pc端的一個切換,可以選擇不同的移動終端設備,同時可以選擇不同的尺寸比例,chrome瀏覽器的模擬移動設備和真實的設備相差不大,是非常好的選擇。

Elements

功能標籤頁:用來查看,修改頁面上的元素,包括DOM標籤,以及css樣式的查看,修改,還有相關盒模型的圖形信息。

對應的樣式

超詳細的Chrome瀏覽器調試

盒模型信息

同時,當我們瀏覽網站看到某些特別炫酷的效果和難做的樣式時候,打開這個功能,我們即可看到別人是如何實現的,學會它這知識就是你的了,仔細鑽研也會有意想不到的收穫

Console控制檯

用於打印和輸出相關的命令信息,其實console控制檯除了我們熟知的報錯。

Sources

js資源頁面:這個頁面內我們可以找到當然瀏覽器頁面中的js 源文件,方便我們查看和調試。

Sources Panel 的左側分別是 Sources 和 Content scripts和Snippets

超詳細的Chrome瀏覽器調試

Content scripts 是 Chrome 的一種擴展程序,它是按照擴展的ID來組織的,這些文件也是嵌入在頁面中的資源,這類文件可以讀寫和操作我們的資源,需要調試這些擴展文件,則可以在這個目錄下打開相關文件調試,但是幾乎我們的項目還沒有相關的擴展文件,所以啥也看不到,平時也不需要關心這塊。

Network

網絡請求標籤頁:可以看到所有的資源請求,包括網絡請求,圖片資源,html,css,js文件等請求,可以根據需求篩選請求項,一般多用於網絡請求的查看和分析,分析後端接口是否正確傳輸,獲取的數據是否準確,請求頭,請求參數的查看

Timeline

可以顯示JS執行時間、頁面元素渲染時間,不做過多介紹

Profiles

可以查看CPU執行時間與內存佔用,不做過多介紹

Resources

會列出所有的資源,以及HTML5的Database和LocalStore等,你可以對存儲的內容編輯和刪除,不做過多介紹

Security

可以告訴你這個網站的安全性,查看有效的證書等

Audits

可以幫你分析頁面性能,有助於優化前端頁面,分析後得到的報告

超詳細的Chrome瀏覽器調試

相關推薦

推薦中...