js調試前端,前端調試

本文目錄一覽：

1. debugger;

我以前也說過，你可以在JavaScript代碼中加入一句debugger;來手工造成一個斷點效果。

需要帶有條件的斷點嗎？你只需要用if語句包圍它：

if (somethingHappens) {

debugger;

}

但要記住在程序發布前刪掉它們。

2. 設置在DOM node發生變化時觸發斷點

有時候你會發現DOM不受你的控制，自己會發生一些奇怪的變化，讓你很難找出問題的根源。

谷歌瀏覽器的開發工具里有一個超級好用的功能，專門可以對付這種情況，叫做「Break on…」，你在DOM節點上右鍵，就能看到這個菜單項。

斷點的觸發條件可以設置成這個節點被刪除、節點的屬性有任何變化，或它的某個子節點有變化發生。

3. Ajax 斷點

XHR斷點，或Ajax斷點，就像它們的名字一樣，可以讓我們設置一個斷點，在特點的Ajax調用發生時觸發它們。

當你在調試Web應用的網路傳輸時，這一招非常的有效。

tumblr_inline_n1s7ceQ08c1r2

4. 移動設備模擬環境

谷歌瀏覽器里有一些非常有趣的模擬移動設備的工具，幫助我們調試程序在移動設備里的運行情況。

找到它的方法是：按F12，調出開發者工具，然後按ESC鍵(當前tab不能是Console)，你就會看到第二層調試窗口出現，裡面的Emulation標籤頁里有各種模擬設備可選。

當然，這不會就變成了真正的iPhone，只是模擬了iPhone的尺寸，觸摸事件和瀏覽器User Agent值。

tumblr_inline_n1s71kb2NL1r2

5. 使用Audits改進你的網站

YSlow是一個非常棒的工具。谷歌瀏覽器的開發者工具里也有一個非常類似的工具，叫Audits。

它可快速的審計你的網站，給你提出非常實際有效的優化你的網站的建議和方法。

在某個需要輸入的地方輸入 console.log() ，列印調試結果

引入 asserts 模塊，對調試區域進行 debug

這兩種調試方式，都需要我們顯式將各種 debug 信息嵌入到我們的業務邏輯代碼中，而熟悉了命令行調試之後，我們可以更好地開啟自己的調試之旅。NodeJS 給我們提供了 Debugger 模塊，內建客戶端，通過 TCP 將命令行的輸入傳送到內建模塊以達到調試的目的。

1.打開檢查，在sources找到對應的js文件，打上斷點

2.刷新頁面出現灰色區域表示進入調試模式

3.上面的按鈕表示下一步也可以使用快捷鍵f10

4.上面的按鈕表示終止本次調試（終止不了可以多點幾次），但是刷新依然會進入調試模式

5.點擊上面的藍色按鈕，表示取消斷點，再次刷新頁面就不會進入調試模式

在谷歌瀏覽器中按f12，然後選下面的scripts，就可以調試js代碼了，點擊左邊的列數可以設置斷點，再點擊一下，取消斷點

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/276129.html