調試 是指在一個腳本中找出并修復錯誤的過程。所有的現代瀏覽器和大多數其他環境都支持調試工具 —— 開發者工具中的一個令調試更加容易的特殊用戶界面。它也可以讓我們一步步地跟蹤代碼以查看當前實際運行情況。
在這里我們將會使用 Chrome(谷歌瀏覽器),因為它擁有足夠多的功能,其他大部分瀏覽器的功能也與之類似。
你的 Chrome 版本可能看起來有一點不同,但是它應該還是處于很明顯的位置。
如果你是第一次這么做,那你應該會看到下面這個樣子:
點擊箭頭所指向得切換按鈕 會打開文件列表的選項卡。
讓我們在預覽樹中點擊和選擇 hello.js。這里應該會如下圖所示:
資源(Sources)面板包含三個部分:
現在你可以再次點擊切換按鈕 隱藏資源列表來給代碼騰出一些空間。
如果我們按下 Esc,下面會出現一個控制臺,我們可以輸入一些命令然后按下 Enter 來執行。
語句執行完畢之后,其執行結果會顯示在下面。
例如,1+2 將會返回 3,hello("debugger") 函數什么也不返回,因此結果是 undefined:
我們來看看 示例頁面 發生了什么。在 hello.js 中,點擊第 4 行。是的,就點擊數字 "4" 上,不是點擊代碼。
恭喜你!你已經設置了一個斷點。現在,請在第 8 行的數字上也點擊一下。
看起來應該是這樣的(藍色是你應該點擊的地方):
斷點 是調試器會自動暫停 JavaScript 執行的地方。
當代碼被暫停時,我們可以檢查當前的變量,在控制臺執行命令等等。換句話說,我們可以調試它。
我們總是可以在右側的面板中找到斷點的列表。當我們在數個文件中有許多斷點時,這是非常有用的。它允許我們:
條件斷點 Conditional breakpoints
在行號上 右鍵單擊 允許你創建一個 條件 斷點。只有當給定的表達式為真(即滿足條件)時才會被觸發。
當我們需要在特定的變量值或參數的情況下暫停程序執行時,這種調試方法就很有用了。
我們也可以使用 debugger 命令來暫停代碼,像這樣:
function hello(name) {
let phrase=`Hello, ${name}!`;
debugger; // <-- 調試器會在這停止
say(phrase);
}
當我們在一個代碼編輯器中并且不想切換到瀏覽器在開發者工具中查找腳本來設置斷點時,這非常方便。
在我們的例子中,hello() 函數在頁面加載期間被調用,因此激活調試器的最簡單的方法(在我們已經設置了斷點后)就是 —— 重新加載頁面。因此讓我們按下 F5(Windows,Linux)或 Cmd+R(Mac)吧。
設置斷點之后,程序會在第 4 行暫停執行:
請打開右側的信息下拉列表(箭頭指示出的地方)。這里允許你查看當前的代碼狀態:
現在是 跟蹤 腳本的時候了。
在右側面板的頂部是一些關于跟蹤腳本的按鈕。讓我們來使用它們吧。
—— “恢復(Resume)”:繼續執行,快捷鍵 F8。
繼續執行。如果沒有其他的斷點,那么程序就會繼續執行,并且調試器不會再控制程序。
我們點擊它一下之后,我們會看到這樣的情況:
執行恢復了,執行到 say() 函數中的另外一個斷點后暫停在了那里。看一下右邊的 “Call stack”。它已經增加了一個調用信息。我們現在在 say() 里面。
—— “下一步(Step)”:運行下一條指令,快捷鍵 F9。
運行下一條語句。如果我們現在點擊它,alert 會被顯示出來。
一次接一次地點擊此按鈕,整個腳本的所有語句會被逐個執行。
—— “跨步(Step over)”:運行下一條指令,但 不會進入到一個函數中,快捷鍵 F10。
跟上一條命令“下一步(Step)”類似,但如果下一條語句是函數調用則表現不同。這里的函數指的是:不是內置的如 alert 函數等,而是我們自己寫的函數。
“下一步(Step)”命令進入函數內部并在第一行暫停執行,而“跨步(Step over)”在無形中執行函數調用,跳過了函數的內部。
執行會在該函數執行后立即暫停。
如果我們對該函數的內部執行不感興趣,這命令會很有用。
—— “步入(Step into)”,快捷鍵 F11。
和“下一步(Step)”類似,但在異步函數調用情況下表現不同。如果你剛剛才開始學 JavaScript,那么你可以先忽略此差異,因為我們還沒有用到異步調用。
至于之后,只需要記住“下一步(Step)”命令會忽略異步行為,例如 setTimeout(計劃的函數調用),它會過一段時間再執行。而“步入(Step into)”會進入到代碼中并等待(如果需要)。詳見 DevTools 手冊。
—— “步出(Step out)”:繼續執行到當前函數的末尾,快捷鍵 Shift+F11。
繼續執行代碼并停止在當前函數的最后一行。當我們使用 偶然地進入到一個嵌套調用,但是我們又對這個函數不感興趣時,我們想要盡可能的繼續執行到最后的時候是非常方便的。
—— 啟用/禁用所有的斷點。
這個按鈕不會影響程序的執行。只是一個批量操作斷點的開/關。
—— 啟用/禁用出現錯誤時自動暫停腳本執行。
當啟動此功能并且開發者工具是打開著的時候,任何一個腳本的錯誤都會導致該腳本執行自動暫停。然后我們可以分析變量來看一下什么出錯了。因此如果我們的腳本因為錯誤掛掉的時候,我們可以打開調試器,啟用這個選項然后重載頁面,查看一下哪里導致它掛掉了和當時的上下文是什么。
Continue to here
在代碼中的某一行上右鍵,在顯示的關聯菜單(context menu)中點擊一個非常有用的名為 “Continue to here” 的選項。
當你想要向前移動很多步到某一行為止,但是又懶得設置一個斷點時非常的方便。
想要輸出一些東西到控制臺上?console.log 函數可以滿足你。
例如:將從 0 到 4 的值輸出到控制臺上:
// 打開控制臺來查看
for (let i=0; i < 5; i++) {
console.log("value", i);
}
普通用戶看不到這個輸出,它是在控制臺里面的。要想看到它 —— 要么打開開發者工具中的 Console(控制臺)選項卡,要么在一個其他的選項卡中按下 Esc:這會在下方打開一個控制臺。
如果我們在代碼中有足夠的日志記錄,那么我們可以從記錄中看到剛剛發生了什么,而不需要借助調試器。
我們可以看到,這里有 3 種方式來暫停一個腳本:
當腳本執行暫停時,我們就可以進行調試 —— 檢查變量,跟蹤代碼來查看執行出錯的位置。
開發人員工具中的選項比本文介紹的多得多。完整的手冊,請搜索chrome-devtools。
本章節的內容足夠讓你上手代碼調試了,但是之后,尤其是你做了大量關于瀏覽器的東西后,推薦你查看上面開發者工具更高級的功能。
對了,你也可以點擊開發者工具中的其他地方來看一下會顯示什么。這可能是你學習開發者工具最快的方式了。不要忘了還有右鍵單擊和關聯菜單喲。
avaScript調試是業內公認的難題。但一旦你掌握技巧,了解了工具本身,便能節省一大把時間。以下16條調試技巧,可供您在下次調試JavaScript代碼時使用!
這些技巧大多數都適用于Chrome和Firefox,許多技巧也可以與其他檢查員一起使用。另外,如果您想更快地找到JavaScript錯誤,請嘗試Raygun Crash Reporting,它會提醒您注意錯誤并提供堆棧跟蹤。
在console.log之后,調試器是我最喜歡的快速調試工具。如果放置調試器,在您的代碼行中,Chrome將在執行時自動在那里停止,您甚至可以將其包裝在條件句中,因此它僅在需要時運行。
有時,您要查看一組復雜的對象。您可以console.log它們并在列表中滾動,也可以使用console.table幫助器。它使您更輕松地查看正在處理的內容!
將輸出:
雖然桌上有每個移動設備都很棒,但在現實世界中這是不可行的。如何調整視口的大小呢?Chrome為您提供所需的一切。跳到檢查器中,然后單擊切換設備模式 按鈕。觀看您的媒體查詢成真!
在元素面板中標記一個DOM元素,然后在控制臺中使用它。Chrome瀏覽器檢查器會保留其歷史記錄中的最后五個元素,以便最后標記的元素顯示為$ 0,倒數第二個標記的元素為$ 1,依此類推。
如果按照“ item-4”,“ item-3”,“ item-2”,“ item-1”,“ item-0”的順序標記以下項,則可以在控制臺中訪問這樣的DOM節點:
確切地知道執行某項操作要花多長時間可能特別有用,尤其是在調試慢循環時。您甚至可以通過為方法分配標簽來設置多個計時器。讓我們看看它是如何工作的:
將輸出:
您可能知道JavaScript框架可以快速生成大量代碼。
您將擁有很多視圖并觸發許多事件,因此最終您將遇到一種情況,您想知道是什么導致了特定的函數調用。由于JavaScript不是一種結構化的語言,因此有時可能難以掌握發生的情況和時間。
這是當console.trace(或只是在控制臺中的跟蹤)派上用場時才能調試JavaScript的時候。想象一下,您想在car實例中看到函數調用funcZ的整個堆棧跟蹤:
將輸出:
現在我們可以看到func1叫做func2,它叫做func4。然后Func4 創建Car的實例,然后調用函數car.funcX,依此類推。即使您認為自己非常了解腳本,這仍然非常方便。假設您要改善代碼。獲取跟蹤和所有相關功能的詳細列表。每一個都可以單擊,現在您可以在它們之間來回切換。就像一個菜單只適合您。
有時您可能在生產中遇到問題,而源映射并沒有完全到達服務器。不要害怕。Chrome可以將您的Javascript文件縮小為更易于閱讀的格式。該代碼不會像您的實際代碼那樣有用-但至少您可以看到正在發生的事情。單擊檢查器中源查看器下方的{}漂亮打印按鈕。
比方說,你要設置一個斷點在function.The兩種最常見的方式做到這一點是:
1.找到你檢查線路,并添加一個斷點
2.在腳本中添加調試器
在這兩種解決方案,您必須手動瀏覽文件以隔離要調試的特定行。可能不太常見的是使用控制臺。在控制臺中使用debug(funcName),當腳本達到您傳遞的功能時,腳本將停止。
它很快,但是缺點是它不適用于私有或匿名函數。否則,這可能是找到要調試的函數的最快方法。(注意:盡管命名類似,但有一個名為console.debug的函數不是同一回事。)
在控制臺中鍵入debug(car.funcY),當腳本獲得對car.funcY的函數調用時,該腳本將在調試模式下停止:
今天,我們的Web應用程序上經常有一些庫和框架。它們中的大多數都經過了良好的測試,并且相對沒有錯誤。
但是,調試器仍會進入與此調試任務無關的所有文件。解決方案是將不需要調試的腳本黑框。這可能還包括您自己的腳本。在本文中閱讀有關調試黑匣子的更多信息。
在更復雜的調試中,有時我們希望輸出許多行。要使輸出保持更好的結構,您可以做的一件事是使用更多控制臺功能,例如console.log,console.debug,console.warn,console.info,console.error等。
然后,您可以在檢查器中過濾它們。有時,當您需要調試JavaScript時,這并不是您真正想要的。如果愿意,您可以發揮創意并設置信息樣式。要調試JavaScript時,請使用CSS并制作自己的結構化控制臺消息:
將輸出:
在console.log()中,您可以將%s設置為字符串,將%i設置為整數,并將%c設置為自定義樣式。您可能會找到使用這些樣式的更好方法。如果使用單個頁面框架,則可能需要一種樣式用于查看消息,而另一種樣式用于模型,集合,控制器等。
在Chrome控制臺中,您可以關注特定功能。每次調用該函數時,都會使用傳入的值進行記錄。
將輸出:
這是查看將哪些參數傳遞給函數的好方法。理想情況下,控制臺可以告訴您期望多少個參數,但是不能。在上面的示例中,func1需要三個參數,但僅傳入兩個參數。如果代碼中未對此進行處理,則可能導致錯誤。
在控制臺中執行querySelector的更快方法是使用美元符號。$('css-selector')將返回CSS選擇器的第一個匹配項。$$('css-selector')將全部返回。如果您多次使用某個元素,則值得將其另存為變量。
許多開發人員正在使用Postman來處理Ajax請求。Postman非常出色,但是打開一個新的瀏覽器窗口,編寫新的請求對象然后進行測試可能會有些煩人。
有時使用瀏覽器會更容易。當您這樣做時,如果您要發送到密碼安全頁面,則不再需要擔心身份驗證cookie。
這是您在Firefox中編輯和重新發送請求的方式。打開檢查器,然后轉到“網絡”選項卡。右鍵單擊所需的請求,然后選擇“編輯并重新發送”。
現在,您可以更改任何所需的內容。更改標題并編輯參數,然后單擊重新發送。
下面,我兩次提出一個具有不同屬性的請求:
DOM可能很有趣。有時情況會發生變化,而您不知道為什么。但是,當您需要調試JavaScript時,Chrome可讓您在DOM元素更改時暫停。
您甚至可以監視其屬性。在Chrome Inspector中,右鍵單擊該元素,然后選擇要使用的設置中斷:
有很多服務和工具可用于審核頁面的JavaScript,并幫助您發現速度下降或問題。這些工具之一是Raygun Real User Monitoring。
除了查找JavaScript問題外,這還可能因其他原因而有用-加載外部腳本緩慢,不必要的CSS,圖像過大。它可以幫助您了解導致意外加載時間過長或無法正確執行的JavaScript問題。
您還可以衡量JavaScript性能的改進并隨時間進行跟蹤。
最后,久經考驗的真正斷點可以成功。嘗試針對不同情況以不同方式使用斷點。
您可以單擊一個元素并設置一個斷點,以在修改某個元素時停止執行。您還可以進入開發人員工具中的“調試器”選項卡或“源”選項卡(取決于瀏覽器),并為任何特定源設置XHR斷點以在Ajax請求上停止。
在同一位置,還可以讓它在發生異常時暫停代碼執行。您可以在瀏覽器工具中使用這些各種類型的斷點,以最大程度地發現錯誤,而不必花費時間在外部工具集上。
*本文翻譯自https://raygun.com/learn/javascript-debugging-tips?utm_medium=newsletter&utm_source=javascriptweekly&utm_campaign=cooperpress&utm_content=article,如有侵權請聯系刪除
了調試Javascript編碼,JavaScript 有很多種調試器可供使用,以下是其中幾個常用的調試器:
以上是幾個常用的 JavaScript 調試器,你可以根據自己的需要選擇使用。也可以自編一個簡單的Javascript代碼調試器,這樣可以方便地插入自編的網頁中。
1、Javascript調試器自編代碼
<!DOCTYPE html>
<html>
<head>
<title>銀河統計</title>
<meta content="text/html; charset=UTF-8">
<style>
<!--
//-->
</style>
</head>
<body>
<img id="myLogo" style="width:120px; padding:0px; margin:5px;" img src="http://www.galaxystatistics.com/webTJX/mobile/logo1.png"/>
<div style="margin-left:1em;">
<a href="#" onclick="eval(document.getElementById('oCode').value)" style="margin-left:2em; font-size:14pt;">點擊運行代碼窗口</a>
<center>
<textarea id="oCode" style="width:94%; height:300px; border:1px solid #555555; text-align:left; padding-left:5px;">
console.clear();
let a1=1; b1=-2; c1=-1;
let a2=2; b2=1; c2=1;
let v=a1*b2-a2*b1;
if (v==0) {
console.log("無解");
} else {
x=(b2*c1-b1*c2)/v;
y=(a1*c2-a2*c1)/v;
console.log("x="+x+"; y="+y);
}
</textarea><br/>
</center>
<div style="color:#ff5555; width:98%; text-align:center;">文本編輯快捷鍵:Ctrl+A - 全選;Ctrl+C - 復制; Ctrl+X - 剪切;Ctrl+V - 粘貼</div><p/>
</div>
<i>注:Console對象用于JavaScript調試,為了顯示Console.log輸出結果,通過按Control+Shift+i(PC平臺)來打開Console窗口</i>
</body></html>
網頁代碼代碼運行效果如下:
圖1:Javascript調試器自編代碼運行效果圖
2、console對象常用方法
JavaScript 中的 console 是一個對象,它提供了一些方法用于向控制臺輸出信息。控制臺是一個在瀏覽器 環境中提供的命令行界面,可以用來顯示程序的輸出信息以及調試信息。
Console對象用于JavaScript調試,為了顯示Console.log輸出結果,通過按【Control+Shift+i】(PC平臺)來打開Console窗口。如圖:
圖2:運行代碼,console.log()方法將運行結果輸出到右邊console控制臺
常用的 console 方法:
以上是 console 對象的一些常用方法,使用這些方法可以方便地在控制臺中輸出調試信息,幫助開發者調試程序和解決問題。
本文介紹的Javascript調試器自編代碼可以隨時插入各類網頁中。以下是進一步精簡的代碼片段:
<div style="margin-left:1em;">
<a href="#" onclick="eval(document.getElementById('oCode').value)">點擊運行代碼窗口</a>
<textarea id="oCode" style="width:94%; height:300px; text-align:left; padding-left:5px;">
console.clear();
//代碼塊
console.log();
}
</textarea><br/>
</center>
<div style="color:#ff5555; width:98%; text-align:center;">文本編輯快捷鍵:Ctrl+A - 全選;Ctrl+C - 復制; Ctrl+X - 剪切;Ctrl+V - 粘貼</div>
</div>
通常將這段代碼復制到網絡統計學網頁后面,這樣就可以隨時調試網頁中介紹的代碼。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。