> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/debug/devtools/debugger.md).

# debugger

* [JS](/web/js.md) ⟩ [statement](/web/js/grammar/statement.md) ⟩ [other](/web/js/grammar/statement/other.md) ⟩ debugger
* [JS](/web/js.md) ⟩ [debug](/web/js/debug.md) ⟩ [devtools](/web/js/debug/devtools.md) ⟩ debugger 

{% hint style="success" %}
([statement](/web/js/grammar/statement.md)) 

* normally does nothing.
* if a <mark style="color:purple;">**debugger**</mark>**&#x20;**<mark style="color:yellow;">**program**</mark> is <mark style="color:orange;">**available**</mark> and <mark style="color:orange;">**running**</mark> (:point\_right: see ⭐️ 重點), then it <mark style="color:yellow;">**may**</mark> perform some kind of <mark style="color:yellow;">**debugging**</mark> action.
* in practice, this statement <mark style="color:yellow;">**acts like a**</mark>**&#x20;**<mark style="color:red;">**breakpoint**</mark>.

```javascript
debugger    // acts like a breakpoint
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}

* it is <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**enough**</mark> to <mark style="color:yellow;">**have a**</mark>**&#x20;**<mark style="color:purple;">**debugger**</mark> <mark style="color:orange;">**available**</mark>.&#x20;
* the <mark style="color:purple;">**debugger**</mark> <mark style="color:yellow;">**statement**</mark> <mark style="color:red;">**won’t**</mark>**&#x20;**<mark style="color:yellow;">**start**</mark> the <mark style="color:purple;">**debugger**</mark> for you.&#x20;
* if you’re using a <mark style="color:yellow;">**web browser**</mark> and have the <mark style="color:orange;">**devtools**</mark> <mark style="color:yellow;">**open**</mark>, this statement will <mark style="color:yellow;">**cause a**</mark>**&#x20;**<mark style="color:orange;">**breakpoint**</mark>.
  {% endhint %}
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 5.6.2 debugger
  {% endtab %}

{% tab title="📘 手冊" %}

* [ ] [debugger](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger)
  {% endtab %}
  {% endtabs %}