• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6  <meta name="nodejs.org:node-version" content="v14.21.2">
7  <title>Debugger | Node.js v14.21.2 Documentation</title>
8  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=fallback">
9  <link rel="stylesheet" href="assets/style.css">
10  <link rel="stylesheet" href="assets/hljs.css">
11  <link rel="canonical" href="https://nodejs.org/api/debugger.html">
12</head>
13<body class="alt apidoc" id="api-section-debugger">
14  <div id="content" class="clearfix">
15    <div id="column2" class="interior">
16      <div id="intro" class="interior">
17        <a href="/" title="Go back to the home page">
18          Node.js
19        </a>
20      </div>
21      <ul>
22<li><a href="documentation.html" class="nav-documentation">About this documentation</a></li>
23<li><a href="synopsis.html" class="nav-synopsis">Usage and example</a></li>
24</ul>
25<hr class="line">
26<ul>
27<li><a href="assert.html" class="nav-assert">Assertion testing</a></li>
28<li><a href="async_hooks.html" class="nav-async_hooks">Async hooks</a></li>
29<li><a href="buffer.html" class="nav-buffer">Buffer</a></li>
30<li><a href="addons.html" class="nav-addons">C++ addons</a></li>
31<li><a href="n-api.html" class="nav-n-api">C/C++ addons with Node-API</a></li>
32<li><a href="embedding.html" class="nav-embedding">C++ embedder API</a></li>
33<li><a href="child_process.html" class="nav-child_process">Child processes</a></li>
34<li><a href="cluster.html" class="nav-cluster">Cluster</a></li>
35<li><a href="cli.html" class="nav-cli">Command-line options</a></li>
36<li><a href="console.html" class="nav-console">Console</a></li>
37<li><a href="corepack.html" class="nav-corepack">Corepack</a></li>
38<li><a href="crypto.html" class="nav-crypto">Crypto</a></li>
39<li><a href="debugger.html" class="nav-debugger active">Debugger</a></li>
40<li><a href="deprecations.html" class="nav-deprecations">Deprecated APIs</a></li>
41<li><a href="diagnostics_channel.html" class="nav-diagnostics_channel">Diagnostics Channel</a></li>
42<li><a href="dns.html" class="nav-dns">DNS</a></li>
43<li><a href="domain.html" class="nav-domain">Domain</a></li>
44<li><a href="errors.html" class="nav-errors">Errors</a></li>
45<li><a href="events.html" class="nav-events">Events</a></li>
46<li><a href="fs.html" class="nav-fs">File system</a></li>
47<li><a href="globals.html" class="nav-globals">Globals</a></li>
48<li><a href="http.html" class="nav-http">HTTP</a></li>
49<li><a href="http2.html" class="nav-http2">HTTP/2</a></li>
50<li><a href="https.html" class="nav-https">HTTPS</a></li>
51<li><a href="inspector.html" class="nav-inspector">Inspector</a></li>
52<li><a href="intl.html" class="nav-intl">Internationalization</a></li>
53<li><a href="modules.html" class="nav-modules">Modules: CommonJS modules</a></li>
54<li><a href="esm.html" class="nav-esm">Modules: ECMAScript modules</a></li>
55<li><a href="module.html" class="nav-module">Modules: <code>module</code> API</a></li>
56<li><a href="packages.html" class="nav-packages">Modules: Packages</a></li>
57<li><a href="net.html" class="nav-net">Net</a></li>
58<li><a href="os.html" class="nav-os">OS</a></li>
59<li><a href="path.html" class="nav-path">Path</a></li>
60<li><a href="perf_hooks.html" class="nav-perf_hooks">Performance hooks</a></li>
61<li><a href="policy.html" class="nav-policy">Policies</a></li>
62<li><a href="process.html" class="nav-process">Process</a></li>
63<li><a href="punycode.html" class="nav-punycode">Punycode</a></li>
64<li><a href="querystring.html" class="nav-querystring">Query strings</a></li>
65<li><a href="readline.html" class="nav-readline">Readline</a></li>
66<li><a href="repl.html" class="nav-repl">REPL</a></li>
67<li><a href="report.html" class="nav-report">Report</a></li>
68<li><a href="stream.html" class="nav-stream">Stream</a></li>
69<li><a href="string_decoder.html" class="nav-string_decoder">String decoder</a></li>
70<li><a href="timers.html" class="nav-timers">Timers</a></li>
71<li><a href="tls.html" class="nav-tls">TLS/SSL</a></li>
72<li><a href="tracing.html" class="nav-tracing">Trace events</a></li>
73<li><a href="tty.html" class="nav-tty">TTY</a></li>
74<li><a href="dgram.html" class="nav-dgram">UDP/datagram</a></li>
75<li><a href="url.html" class="nav-url">URL</a></li>
76<li><a href="util.html" class="nav-util">Utilities</a></li>
77<li><a href="v8.html" class="nav-v8">V8</a></li>
78<li><a href="vm.html" class="nav-vm">VM</a></li>
79<li><a href="wasi.html" class="nav-wasi">WASI</a></li>
80<li><a href="worker_threads.html" class="nav-worker_threads">Worker threads</a></li>
81<li><a href="zlib.html" class="nav-zlib">Zlib</a></li>
82</ul>
83<hr class="line">
84<ul>
85<li><a href="https://github.com/nodejs/node" class="nav-https-github-com-nodejs-node">Code repository and issue tracker</a></li>
86</ul>
87    </div>
88
89    <div id="column1" data-id="debugger" class="interior">
90      <header>
91        <div class="header-container">
92          <h1>Node.js v14.21.2 documentation</h1>
93          <button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode/light mode" aria-label="Toggle dark mode/light mode" hidden>
94            <svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" height="24" width="24">
95              <path fill="none" d="M0 0h24v24H0z" />
96              <path d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15A4.01 4.01 0 0111 18c0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"/>
97              <path d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"/>
98            </svg>
99            <svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" height="24" width="24">
100              <path d="M0 0h24v24H0z" fill="none" />
101              <path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/>
102            </svg>
103          </button>
104        </div>
105        <div id="gtoc">
106          <ul>
107            <li>
108              <a href="index.html">Index</a>
109            </li>
110            <li>
111              <a href="all.html">View on single page</a>
112            </li>
113            <li>
114              <a href="debugger.json">View as JSON</a>
115            </li>
116
117    <li class="version-picker">
118      <a href="#">View another version <span>&#x25bc;</span></a>
119      <ol class="version-picker"><li><a href="https://nodejs.org/docs/latest-v19.x/api/debugger.html">19.x</a></li>
120<li><a href="https://nodejs.org/docs/latest-v18.x/api/debugger.html">18.x <b>LTS</b></a></li>
121<li><a href="https://nodejs.org/docs/latest-v17.x/api/debugger.html">17.x</a></li>
122<li><a href="https://nodejs.org/docs/latest-v16.x/api/debugger.html">16.x <b>LTS</b></a></li>
123<li><a href="https://nodejs.org/docs/latest-v15.x/api/debugger.html">15.x</a></li>
124<li><a href="https://nodejs.org/docs/latest-v14.x/api/debugger.html">14.x <b>LTS</b></a></li>
125<li><a href="https://nodejs.org/docs/latest-v13.x/api/debugger.html">13.x</a></li>
126<li><a href="https://nodejs.org/docs/latest-v12.x/api/debugger.html">12.x</a></li>
127<li><a href="https://nodejs.org/docs/latest-v11.x/api/debugger.html">11.x</a></li>
128<li><a href="https://nodejs.org/docs/latest-v10.x/api/debugger.html">10.x</a></li>
129<li><a href="https://nodejs.org/docs/latest-v9.x/api/debugger.html">9.x</a></li>
130<li><a href="https://nodejs.org/docs/latest-v8.x/api/debugger.html">8.x</a></li>
131<li><a href="https://nodejs.org/docs/latest-v7.x/api/debugger.html">7.x</a></li>
132<li><a href="https://nodejs.org/docs/latest-v6.x/api/debugger.html">6.x</a></li>
133<li><a href="https://nodejs.org/docs/latest-v5.x/api/debugger.html">5.x</a></li>
134<li><a href="https://nodejs.org/docs/latest-v4.x/api/debugger.html">4.x</a></li>
135<li><a href="https://nodejs.org/docs/latest-v0.12.x/api/debugger.html">0.12.x</a></li>
136<li><a href="https://nodejs.org/docs/latest-v0.10.x/api/debugger.html">0.10.x</a></li></ol>
137    </li>
138
139            <li class="edit_on_github"><a href="https://github.com/nodejs/node/edit/master/doc/api/debugger.md">Edit on GitHub</a></li>
140          </ul>
141        </div>
142        <hr>
143      </header>
144
145      <details id="toc" open><summary>Table of contents</summary><ul>
146<li><span class="stability_2"><a href="#debugger_debugger">Debugger</a></span>
147<ul>
148<li><a href="#debugger_watchers">Watchers</a></li>
149<li><a href="#debugger_command_reference">Command reference</a>
150<ul>
151<li><a href="#debugger_stepping">Stepping</a></li>
152<li><a href="#debugger_breakpoints">Breakpoints</a></li>
153<li><a href="#debugger_information">Information</a></li>
154<li><a href="#debugger_execution_control">Execution control</a></li>
155<li><a href="#debugger_various">Various</a></li>
156</ul>
157</li>
158<li><a href="#debugger_advanced_usage">Advanced usage</a>
159<ul>
160<li><a href="#debugger_v8_inspector_integration_for_node_js">V8 inspector integration for Node.js</a></li>
161</ul>
162</li>
163</ul>
164</li>
165</ul></details>
166
167      <div id="apicontent">
168        <h2>Debugger<span><a class="mark" href="#debugger_debugger" id="debugger_debugger">#</a></span></h2>
169
170<p></p><div class="api_stability api_stability_2"><a href="documentation.html#documentation_stability_index">Stability: 2</a> - Stable</div><p></p>
171
172<p>Node.js includes a command-line debugging utility. To use it, start Node.js
173with the <code>inspect</code> argument followed by the path to the script to debug.</p>
174<pre><code class="language-console"><span class="hljs-meta">$ </span><span class="language-bash">node inspect myscript.js</span>
175&#x3C; Debugger listening on ws://127.0.0.1:9229/621111f9-ffcb-4e82-b718-48a145fa5db8
176&#x3C; For help, see: https://nodejs.org/en/docs/inspector
177&#x3C;
178&#x3C; Debugger attached.
179&#x3C;
180 ok
181Break on start in myscript.js:2
182  1 // myscript.js
183<span class="hljs-meta">> </span><span class="language-bash">2 global.x = 5;</span>
184  3 setTimeout(() => {
185  4   debugger;
186<span class="hljs-meta">debug></span></code></pre>
187<p>The Node.js debugger client is not a full-featured debugger, but simple step and
188inspection are possible.</p>
189<p>Inserting the statement <code>debugger;</code> into the source code of a script will
190enable a breakpoint at that position in the code:</p>
191<!-- eslint-disable no-debugger -->
192<pre><code class="language-js"><span class="hljs-comment">// myscript.js</span>
193<span class="hljs-variable language_">global</span>.<span class="hljs-property">x</span> = <span class="hljs-number">5</span>;
194<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {
195  <span class="hljs-keyword">debugger</span>;
196  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'world'</span>);
197}, <span class="hljs-number">1000</span>);
198<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'hello'</span>);</code></pre>
199<p>Once the debugger is run, a breakpoint will occur at line 3:</p>
200<pre><code class="language-console"><span class="hljs-meta">$ </span><span class="language-bash">node inspect myscript.js</span>
201&#x3C; Debugger listening on ws://127.0.0.1:9229/621111f9-ffcb-4e82-b718-48a145fa5db8
202&#x3C; For help, see: https://nodejs.org/en/docs/inspector
203&#x3C;
204&#x3C; Debugger attached.
205&#x3C;
206 ok
207Break on start in myscript.js:2
208  1 // myscript.js
209<span class="hljs-meta">> </span><span class="language-bash">2 global.x = 5;</span>
210  3 setTimeout(() => {
211  4   debugger;
212<span class="hljs-meta">debug> </span><span class="language-bash">cont</span>
213&#x3C; hello
214&#x3C;
215break in myscript.js:4
216  2 global.x = 5;
217  3 setTimeout(() => {
218<span class="hljs-meta">> </span><span class="language-bash">4   debugger;</span>
219  5   console.log('world');
220  6 }, 1000);
221<span class="hljs-meta">debug> </span><span class="language-bash">next</span>
222break in myscript.js:5
223  3 setTimeout(() => {
224  4   debugger;
225<span class="hljs-meta">> </span><span class="language-bash">5   console.log(<span class="hljs-string">'world'</span>);</span>
226  6 }, 1000);
227  7 console.log('hello');
228<span class="hljs-meta">debug> </span><span class="language-bash">repl</span>
229Press Ctrl+C to leave debug repl
230<span class="hljs-meta">> </span><span class="language-bash">x</span>
2315
232<span class="hljs-meta">> </span><span class="language-bash">2 + 2</span>
2334
234<span class="hljs-meta">debug> </span><span class="language-bash">next</span>
235&#x3C; world
236&#x3C;
237break in myscript.js:6
238  4   debugger;
239  5   console.log('world');
240<span class="hljs-meta">> </span><span class="language-bash">6 }, 1000);</span>
241  7 console.log('hello');
242  8
243<span class="hljs-meta">debug> </span><span class="language-bash">.<span class="hljs-built_in">exit</span></span>
244<span class="hljs-meta">$</span></code></pre>
245<p>The <code>repl</code> command allows code to be evaluated remotely. The <code>next</code> command
246steps to the next line. Type <code>help</code> to see what other commands are available.</p>
247<p>Pressing <code>enter</code> without typing a command will repeat the previous debugger
248command.</p>
249<section><h3>Watchers<span><a class="mark" href="#debugger_watchers" id="debugger_watchers">#</a></span></h3>
250<p>It is possible to watch expression and variable values while debugging. On
251every breakpoint, each expression from the watchers list will be evaluated
252in the current context and displayed immediately before the breakpoint's
253source code listing.</p>
254<p>To begin watching an expression, type <code>watch('my_expression')</code>. The command
255<code>watchers</code> will print the active watchers. To remove a watcher, type
256<code>unwatch('my_expression')</code>.</p>
257</section><section><h3>Command reference<span><a class="mark" href="#debugger_command_reference" id="debugger_command_reference">#</a></span></h3>
258<h4>Stepping<span><a class="mark" href="#debugger_stepping" id="debugger_stepping">#</a></span></h4>
259<ul>
260<li><code>cont</code>, <code>c</code>: Continue execution</li>
261<li><code>next</code>, <code>n</code>: Step next</li>
262<li><code>step</code>, <code>s</code>: Step in</li>
263<li><code>out</code>, <code>o</code>: Step out</li>
264<li><code>pause</code>: Pause running code (like pause button in Developer Tools)</li>
265</ul>
266<h4>Breakpoints<span><a class="mark" href="#debugger_breakpoints" id="debugger_breakpoints">#</a></span></h4>
267<ul>
268<li><code>setBreakpoint()</code>, <code>sb()</code>: Set breakpoint on current line</li>
269<li><code>setBreakpoint(line)</code>, <code>sb(line)</code>: Set breakpoint on specific line</li>
270<li><code>setBreakpoint('fn()')</code>, <code>sb(...)</code>: Set breakpoint on a first statement in
271function's body</li>
272<li><code>setBreakpoint('script.js', 1)</code>, <code>sb(...)</code>: Set breakpoint on first line of
273<code>script.js</code></li>
274<li><code>setBreakpoint('script.js', 1, 'num &#x3C; 4')</code>, <code>sb(...)</code>: Set conditional
275breakpoint on first line of <code>script.js</code> that only breaks when <code>num &#x3C; 4</code>
276evaluates to <code>true</code></li>
277<li><code>clearBreakpoint('script.js', 1)</code>, <code>cb(...)</code>: Clear breakpoint in <code>script.js</code>
278on line 1</li>
279</ul>
280<p>It is also possible to set a breakpoint in a file (module) that
281is not loaded yet:</p>
282<pre><code class="language-console"><span class="hljs-meta">$ </span><span class="language-bash">node inspect main.js</span>
283&#x3C; Debugger listening on ws://127.0.0.1:9229/48a5b28a-550c-471b-b5e1-d13dd7165df9
284&#x3C; For help, see: https://nodejs.org/en/docs/inspector
285&#x3C;
286&#x3C; Debugger attached.
287&#x3C;
288 ok
289Break on start in main.js:1
290<span class="hljs-meta">> </span><span class="language-bash">1 const mod = require(<span class="hljs-string">'./mod.js'</span>);</span>
291  2 mod.hello();
292  3 mod.hello();
293<span class="hljs-meta">debug> </span><span class="language-bash">setBreakpoint(<span class="hljs-string">'mod.js'</span>, 22)</span>
294Warning: script 'mod.js' was not loaded yet.
295<span class="hljs-meta">debug> </span><span class="language-bash">c</span>
296break in mod.js:22
297 20 // USE OR OTHER DEALINGS IN THE SOFTWARE.
298 21
299<span class="hljs-meta">></span><span class="language-bash">22 exports.hello = <span class="hljs-function"><span class="hljs-title">function</span></span>() {</span>
300 23   return 'hello from module';
301 24 };
302<span class="hljs-meta">debug></span></code></pre>
303<p>It is also possible to set a conditional breakpoint that only breaks when a
304given expression evaluates to <code>true</code>:</p>
305<pre><code class="language-console"><span class="hljs-meta">$ </span><span class="language-bash">node inspect main.js</span>
306&#x3C; Debugger listening on ws://127.0.0.1:9229/ce24daa8-3816-44d4-b8ab-8273c8a66d35
307&#x3C; For help, see: https://nodejs.org/en/docs/inspector
308&#x3C; Debugger attached.
309Break on start in main.js:7
310  5 }
311  6
312<span class="hljs-meta">> </span><span class="language-bash">7 addOne(10);</span>
313  8 addOne(-1);
314  9
315<span class="hljs-meta">debug> </span><span class="language-bash">setBreakpoint(<span class="hljs-string">'main.js'</span>, 4, <span class="hljs-string">'num &#x3C; 0'</span>)</span>
316  1 'use strict';
317  2
318  3 function addOne(num) {
319<span class="hljs-meta">> </span><span class="language-bash">4   <span class="hljs-built_in">return</span> num + 1;</span>
320  5 }
321  6
322  7 addOne(10);
323  8 addOne(-1);
324  9
325<span class="hljs-meta">debug> </span><span class="language-bash">cont</span>
326break in main.js:4
327  2
328  3 function addOne(num) {
329<span class="hljs-meta">> </span><span class="language-bash">4   <span class="hljs-built_in">return</span> num + 1;</span>
330  5 }
331  6
332<span class="hljs-meta">debug> </span><span class="language-bash"><span class="hljs-built_in">exec</span>(<span class="hljs-string">'num'</span>)</span>
333-1
334<span class="hljs-meta">debug></span></code></pre>
335<h4>Information<span><a class="mark" href="#debugger_information" id="debugger_information">#</a></span></h4>
336<ul>
337<li><code>backtrace</code>, <code>bt</code>: Print backtrace of current execution frame</li>
338<li><code>list(5)</code>: List scripts source code with 5 line context (5 lines before and
339after)</li>
340<li><code>watch(expr)</code>: Add expression to watch list</li>
341<li><code>unwatch(expr)</code>: Remove expression from watch list</li>
342<li><code>watchers</code>: List all watchers and their values (automatically listed on each
343breakpoint)</li>
344<li><code>repl</code>: Open debugger's repl for evaluation in debugging script's context</li>
345<li><code>exec expr</code>: Execute an expression in debugging script's context</li>
346</ul>
347<h4>Execution control<span><a class="mark" href="#debugger_execution_control" id="debugger_execution_control">#</a></span></h4>
348<ul>
349<li><code>run</code>: Run script (automatically runs on debugger's start)</li>
350<li><code>restart</code>: Restart script</li>
351<li><code>kill</code>: Kill script</li>
352</ul>
353<h4>Various<span><a class="mark" href="#debugger_various" id="debugger_various">#</a></span></h4>
354<ul>
355<li><code>scripts</code>: List all loaded scripts</li>
356<li><code>version</code>: Display V8's version</li>
357</ul>
358</section><section><h3>Advanced usage<span><a class="mark" href="#debugger_advanced_usage" id="debugger_advanced_usage">#</a></span></h3>
359<h4>V8 inspector integration for Node.js<span><a class="mark" href="#debugger_v8_inspector_integration_for_node_js" id="debugger_v8_inspector_integration_for_node_js">#</a></span></h4>
360<p>V8 Inspector integration allows attaching Chrome DevTools to Node.js
361instances for debugging and profiling. It uses the
362<a href="https://chromedevtools.github.io/devtools-protocol/">Chrome DevTools Protocol</a>.</p>
363<p>V8 Inspector can be enabled by passing the <code>--inspect</code> flag when starting a
364Node.js application. It is also possible to supply a custom port with that flag,
365e.g. <code>--inspect=9222</code> will accept DevTools connections on port 9222.</p>
366<p>To break on the first line of the application code, pass the <code>--inspect-brk</code>
367flag instead of <code>--inspect</code>.</p>
368<pre><code class="language-console"><span class="hljs-meta">$ </span><span class="language-bash">node --inspect index.js</span>
369Debugger listening on ws://127.0.0.1:9229/dc9010dd-f8b8-4ac5-a510-c1a114ec7d29
370For help, see: https://nodejs.org/en/docs/inspector</code></pre>
371<p>(In the example above, the UUID dc9010dd-f8b8-4ac5-a510-c1a114ec7d29
372at the end of the URL is generated on the fly, it varies in different
373debugging sessions.)</p>
374<p>If the Chrome browser is older than 66.0.3345.0,
375use <code>inspector.html</code> instead of <code>js_app.html</code> in the above URL.</p>
376<p>Chrome DevTools doesn't support debugging <a href="worker_threads.html">worker threads</a> yet.
377<a href="https://github.com/GoogleChromeLabs/ndb/">ndb</a> can be used to debug them.</p></section>
378        <!-- API END -->
379      </div>
380    </div>
381  </div>
382  <script>
383    'use strict';
384    {
385      const kCustomPreference = 'customDarkTheme';
386      const userSettings = sessionStorage.getItem(kCustomPreference);
387      const themeToggleButton = document.getElementById('theme-toggle-btn');
388      if (userSettings === null && window.matchMedia) {
389        const mq = window.matchMedia('(prefers-color-scheme: dark)');
390        if ('onchange' in mq) {
391          function mqChangeListener(e) {
392            document.body.classList.toggle('dark-mode', e.matches);
393          }
394          mq.addEventListener('change', mqChangeListener);
395          if (themeToggleButton) {
396            themeToggleButton.addEventListener('click', function() {
397              mq.removeEventListener('change', mqChangeListener);
398            }, { once: true });
399          }
400        }
401        if (mq.matches) {
402          document.body.classList.add('dark-mode');
403        }
404      } else if (userSettings === 'true') {
405        document.body.classList.add('dark-mode');
406      }
407      if (themeToggleButton) {
408        themeToggleButton.hidden = false;
409        themeToggleButton.addEventListener('click', function() {
410          sessionStorage.setItem(
411            kCustomPreference,
412            document.body.classList.toggle('dark-mode')
413          );
414        });
415      }
416    }
417  </script>
418</body>
419</html>
420