JavaScript 中的斷點

Muhammad Muzammil Hussain 2023年1月30日
  1. 斷點
  2. JavaScript 中的斷點
  3. JavaScript 中的 Debugger 關鍵字
JavaScript 中的斷點

在本文中,我們將討論斷點的用法和好處,以及如何藉助 debugger 關鍵字和瀏覽器的偵錯程式模式來除錯我們的 JavaScript 程式碼。

斷點

大多數時候,我們的程式程式碼包含很少的邏輯語法錯誤,並且我們的程式沒有按照給定的語句提供所需的結果。因此,為了解決錯誤和除錯我們的程式程式碼,我們需要停止執行並檢查每一步的執行流程。

我們在程式中使用斷點來停止執行,各種程式語言都專門包含斷點關鍵字。

斷點關鍵字在程式碼執行期間停止執行,因為大多數時候,錯誤不會顯示任何錯誤訊息或日誌,我們需要找出實際問題所在。

JavaScript 中的斷點

除錯是一個棘手的過程,現在大多數瀏覽器都提供了內建的 JavaScript 偵錯程式。我們可以使用偵錯程式設定斷點並定義我們需要停止執行的位置。

我們可以在程式碼執行時在執行時檢查變數值。

我們可以通過按 F12 鍵在瀏覽器中啟用除錯,然後從偵錯程式選單中選擇 Console 部分。如果我們的瀏覽器支援除錯,我們可以使用 console.log() 方法來顯示和檢查值。

控制檯的示例:

<!DOCTYPE html>
<html>
<body>

<h1>Delftstack learning</h1>

<h2>JavaScript debugger keyword example</h2>

<p>You can on debugger with F12 key and select console in debugger menu.</p>

<script>
a = 2;
b = 4;
sum = a + b;

console.log(c); // it will display the value of sum variable
</script>

</body>
</html>

在上面的 HTML 原始碼中,我們使用了 console.log() 預設方法來顯示變數 ab 的總和;我們可以看到偵錯程式模式的登入控制檯部分。

我們可以在偵錯程式視窗中為 JavaScript 程式碼設定斷點,在每個斷點處都會停止執行,這將有助於檢查 JavaScript 值。我們可以使用偵錯程式視窗中的播放按鈕再次恢復執行。

JavaScript 中的 Debugger 關鍵字

JavaScript debugger 關鍵字在程式碼語句中用於停止執行;它執行與我們在偵錯程式中設定斷點相同的功能。

偵錯程式的示例:

<!DOCTYPE html>
<html>
   <body>
      <h1>Delftstack learning</h1>
      <h2>JavaScript debugger keyword example</h2>
      <p id="test"></p>
      <p>You can on debugger and see the execution will be stop at third line.</p>
      <script>
         let sum = 15 + 5;
         
         debugger; // to stop execution
         
         document.getElementById("test").innerHTML = sum;
         
      </script>
   </body>
</html>

在上面的 HTML 原始碼中,我們在 JavaScript 程式碼中使用了 debugger 關鍵字來停止執行並使用 getElementById("id").innerHTMLsum 變數分配給段落。