前端開發(fā)必備調(diào)試技巧

Heier 發(fā)布于2019-08-20 17:58 / 2427人閱讀

摘要：定義使用向控制臺輸出信息，產(chǎn)生文件和啟動調(diào)試會話用途，用于調(diào)試，查看錯誤等。在上反鍵可以選擇可以重新執(zhí)行該函數(shù)，配合變量修改和編輯代碼等功能，可以在當(dāng)前中反復(fù)進行調(diào)試。

Chrome調(diào)試工具的使用 常用的面板

Elements(元素面板)

Console(控制臺面板)

Sources(資源面板)

NetWork(網(wǎng)絡(luò)面板)

1. Elements panel

定義：通過Elements 面板，不僅僅可以查看和編輯頁面和樣式，而且所做的改變立即生效。

操作DOM

查看DOM樹：打開Element面板，可以查看所有DOM節(jié)點，包括CSS和JavaScript，一般左側(cè)查看DOM樹，右側(cè)查看CSS樣式。

選區(qū)DOM節(jié)點：將鼠標移到網(wǎng)頁中的某元素上面，可以選中DOM節(jié)點

增加、刪除和修改DOM節(jié)點：在Element面板中，選擇DOM節(jié)點，在文本處右擊鼠標，會彈出一個菜單，

為節(jié)點添加屬性，查看盒模型

查看CSS樣式，如更改CSS屬性，動態(tài)變化

技巧：在CSS樣式的屬性值上，如果是數(shù)字的屬性值，則可以通過按上下方向快捷鍵來給屬性值加一，通過按住shift鍵的同時按上下方向快捷鍵，可以給屬性值遞增十

Element 譯為“元素”，Element 面板可以讓我們動態(tài)查看和編輯DOM節(jié)點和CSS樣式表，并且立即生效，避免了頻繁切換瀏覽器和編輯器的麻煩。 我們可以使用Element面板來查看源代碼，它不但可以很好的格式化DOM節(jié)點，清晰的展現(xiàn)HTML文檔，比在當(dāng)前網(wǎng)頁中右擊鼠標選擇“查看網(wǎng)頁源代碼”強大很多。 總之，Element面板可以讓我們很透徹的了解DOM和CSS的底層結(jié)構(gòu)。

碰到的問題

在查看某些偽類的屬性，如:hover時，無法查看到具體的樣式，查閱了一些資料，是通過鼠標Hover在元素上，然后右鍵檢查，或者在面板選擇上:hover。

2. Console panel

定義：使用Console API向控制臺輸出信息，產(chǎn)生JavaScript文件和啟動調(diào)試會話

用途：

console.log(messgae)，用于調(diào)試JS，查看錯誤等。

直接運行JS代碼

碰到的問題

console.log(),console.info(),console.error(),console.warn()需要區(qū)別一下，最好使用過濾工具，過濾一些無用信息

3. Network panel

查看HTTP請求，查看cookie，AJAX請求等信息，
例如，給按鈕綁定點擊事件，可以通過網(wǎng)絡(luò)面板，來查看請求是否成功發(fā)出，和接收到的信息。

4. Sources panel

用途：可以用來設(shè)置斷點調(diào)試JS

調(diào)試步驟

打斷點、單步執(zhí)行、監(jiān)聽變化

可以查看作用域、變量、回調(diào)等的變化，此外還可以監(jiān)聽事件的變化。

設(shè)置斷點

選擇想要設(shè)置斷點的js具體行，點擊行號，就設(shè)置了斷點，再次點擊，就取消已設(shè)置的斷點。

1、調(diào)用棧（Call Stack）：當(dāng)遇到斷點時，Call Stack 會顯示當(dāng)前斷點所處的方法調(diào)用棧，調(diào)用棧中的每一層叫做一個 frame，點擊任意 frame 可以跳到該 frame 的調(diào)用點上。在 frame 上反鍵可以選擇 Restart Frame 可以重新執(zhí)行該函數(shù)，配合變量修改和編輯代碼等功能，可以在當(dāng)前 frame 中反復(fù)進行調(diào)試。

2、作用域變量（Scope Variables）：在這里可以查看此時局部變量和全局變量的值。

3、斷點列表（Breakpoints）：這里會列出你設(shè)置的所有斷點，點擊即可跳轉(zhuǎn)到對應(yīng)斷點位置。

碰到的問題

單步執(zhí)行，和進入到函數(shù)執(zhí)行，是有差別的