web前端須知調試技巧——Chrome調試(1)

1、Elements 功能標籤頁

這個是查看和編輯頁面上的元素，包括html 和 css

1.1 箭頭圖示：用於在頁面選擇一個元素來審查和查看它的相關資訊，當我們在Elements這個按鈕頁面下點擊某個Dom元素時，箭頭按鈕會變成選擇狀態

右側的css樣式對應的會展示出此id 的樣式資訊，此時可以在右側進行一個修改，修改即可在頁面上生效，灰色的element.style樣式同樣可以進行添加和書寫，唯一的區別是，在這裡添加的樣式是添加到了該元素內部，實現方式即：該div元素的style屬性，這個頁面的功能很強大，在我們做了相關的頁面後，修改樣式是一塊很重要的工作，細微的差距都需要調整，但是不可能說做到每修改一點即編譯一遍代碼，再刷新流覽器查看效果，這樣很低效，一次性在流覽器中修改之後，再到代碼中進行修改。右側是顯示css檔及行數。

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

1.2 設備圖示：點擊它可以切換到不同的終端進行開發模式，移動端和pc端的一個切換，可以選擇不同的移動終端設備，

同時可以選擇不同的尺寸比例， chrome流覽器的類比移動設備和真實的設備相差不大，是非常好的選擇

2、Console控制台

列印和輸出相關的命令資訊，其實console控制台除了我們熟知的報錯，列印console.log資訊外，還有很多相關的功能

a: 一些對頁面資料的指令操作，比如打斷點正好執行到獲取的資料上，

由於資料都是層層嵌套的物件，這個時候查看裡面的key/value不是很方便，即可用這個指令開查看， obj的json string 格式的key/value，我們對於資料裡面有哪些欄位和屬性即可一目了然

b: 除了console.log還有其他相關的指令可用 console也有相關的API

3、Sources js資源頁面

這個頁面內我們可以找到當然流覽器頁面中的js 原始檔案，方便我們查看和調試

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

點擊{}大括弧按鈕將代碼轉成可讀格式

當我們想不起某個方法的具體使用時候，會打開控制台隨意寫一些測試代碼，或者想測試一下剛剛寫的方法是否會出現期待的樣子，但是控制台一打回車本想換行但是卻執行剛寫的半截代碼，所以推薦使用Sources下面的左側的Sinppets代碼片段按鈕，這時候點擊創建一個新的片段檔，寫完測試代碼後把滑鼠放在新建檔上run，再結合控制台查看相關資訊（新建了一個名叫：app.js的片段代碼，在你的專案環境頁面內，該片段可執行專案內的方法）

Content scripts 是 Chrome 的一種擴展程式，它是按照擴展的ID來組織的，這些檔也是嵌入在頁面中的資源，這類檔可以讀寫和操作我們的資源，需要調試這些擴展檔，則可以在這個目錄下打開相關檔調試

4、Network 網路請求標籤頁

可以看到所有的資源請求，包括網路請求，圖片資源，html,css，js檔等請求，可以根據需求篩選請求項，一般多用於網路請求的查看和分析，分析後端介面是否正確傳輸，獲取的資料是否準確，請求頭，請求參數的查看

all

XHR 非同步請求資源，我們可以分析相關的請求資訊

打開一個Ajax非同步請求，可以看到它的請求頭資訊，是一個POST請求，參數有哪些，還可以預覽它的返回的結果資料，這些資料的使用和查看有利於我們很好的和後端工程師們聯調資料，也方便我們前端更直觀的分析資料

5、Timeline標籤頁可以顯示JS執行時間、頁面元素渲染時間

6、Profiles標籤頁可以查看CPU執行時間與記憶體佔用

7、Resources標籤頁會列出所有的資源，以及HTML5的Database和LocalStore等，你可以對存儲的內容編輯和刪除

8、Security標籤頁可以告訴你這個網站的安全性，查看有效的證書等

9、Audits標籤頁可以幫你分析頁面性能，有助於優化前端頁面，分析後得到的報告

--------------------------------------------------------

www.qietu.com 專注于前端開發和前端培訓

308736107 前端交流群

6135833 前端開發及培訓諮詢qq

這類檔可以讀寫和操作我們的資源，需要調試這些擴展檔，則可以在這個目錄下打開相關檔調試