# devtools

[JS](..) ⟩ [debug]() ⟩ devtools&#x20;

{% hint style="success" %}
&#x20;[**browser**](../../browser)’s <mark style="color:yellow;">**developer tools**</mark>.
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}
* [debugger](devtools/debugger "mention") statement
* [show-shadow-dom](devtools/show-shadow-dom "mention")
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %}
* include a [**`debugger`**](devtools/debugger) statement to set a <mark style="color:yellow;">**breakpoint**</mark> in your program.&#x20;
* <mark style="color:red;">**if**</mark> the <mark style="color:yellow;">**developer tools**</mark> of your [**browser**](../../browser) are <mark style="color:red;">**active**</mark>, the program will <mark style="color:yellow;">**pause**</mark> whenever it reaches such a statement.
{% endhint %}
{% endtab %}
{% endtabs %}
