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.20.1"> 7 <title>Debugger | Node.js v14.20.1 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.20.1 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>▼</span></a> 119 <ol class="version-picker"><li><a href="https://nodejs.org/docs/latest-v18.x/api/debugger.html">18.x</a></li> 120<li><a href="https://nodejs.org/docs/latest-v17.x/api/debugger.html">17.x</a></li> 121<li><a href="https://nodejs.org/docs/latest-v16.x/api/debugger.html">16.x <b>LTS</b></a></li> 122<li><a href="https://nodejs.org/docs/latest-v15.x/api/debugger.html">15.x</a></li> 123<li><a href="https://nodejs.org/docs/latest-v14.x/api/debugger.html">14.x <b>LTS</b></a></li> 124<li><a href="https://nodejs.org/docs/latest-v13.x/api/debugger.html">13.x</a></li> 125<li><a href="https://nodejs.org/docs/latest-v12.x/api/debugger.html">12.x <b>LTS</b></a></li> 126<li><a href="https://nodejs.org/docs/latest-v11.x/api/debugger.html">11.x</a></li> 127<li><a href="https://nodejs.org/docs/latest-v10.x/api/debugger.html">10.x</a></li> 128<li><a href="https://nodejs.org/docs/latest-v9.x/api/debugger.html">9.x</a></li> 129<li><a href="https://nodejs.org/docs/latest-v8.x/api/debugger.html">8.x</a></li> 130<li><a href="https://nodejs.org/docs/latest-v7.x/api/debugger.html">7.x</a></li> 131<li><a href="https://nodejs.org/docs/latest-v6.x/api/debugger.html">6.x</a></li> 132<li><a href="https://nodejs.org/docs/latest-v5.x/api/debugger.html">5.x</a></li> 133<li><a href="https://nodejs.org/docs/latest-v4.x/api/debugger.html">4.x</a></li> 134<li><a href="https://nodejs.org/docs/latest-v0.12.x/api/debugger.html">0.12.x</a></li> 135<li><a href="https://nodejs.org/docs/latest-v0.10.x/api/debugger.html">0.10.x</a></li></ol> 136 </li> 137 138 <li class="edit_on_github"><a href="https://github.com/nodejs/node/edit/master/doc/api/debugger.md">Edit on GitHub</a></li> 139 </ul> 140 </div> 141 <hr> 142 </header> 143 144 <details id="toc" open><summary>Table of contents</summary><ul> 145<li><span class="stability_2"><a href="#debugger_debugger">Debugger</a></span> 146<ul> 147<li><a href="#debugger_watchers">Watchers</a></li> 148<li><a href="#debugger_command_reference">Command reference</a> 149<ul> 150<li><a href="#debugger_stepping">Stepping</a></li> 151<li><a href="#debugger_breakpoints">Breakpoints</a></li> 152<li><a href="#debugger_information">Information</a></li> 153<li><a href="#debugger_execution_control">Execution control</a></li> 154<li><a href="#debugger_various">Various</a></li> 155</ul> 156</li> 157<li><a href="#debugger_advanced_usage">Advanced usage</a> 158<ul> 159<li><a href="#debugger_v8_inspector_integration_for_node_js">V8 inspector integration for Node.js</a></li> 160</ul> 161</li> 162</ul> 163</li> 164</ul></details> 165 166 <div id="apicontent"> 167 <h2>Debugger<span><a class="mark" href="#debugger_debugger" id="debugger_debugger">#</a></span></h2> 168 169<p></p><div class="api_stability api_stability_2"><a href="documentation.html#documentation_stability_index">Stability: 2</a> - Stable</div><p></p> 170 171<p>Node.js includes a command-line debugging utility. To use it, start Node.js 172with the <code>inspect</code> argument followed by the path to the script to debug.</p> 173<pre><code class="language-console"><span class="hljs-meta">$ </span><span class="language-bash">node inspect myscript.js</span> 174< Debugger listening on ws://127.0.0.1:9229/621111f9-ffcb-4e82-b718-48a145fa5db8 175< For help, see: https://nodejs.org/en/docs/inspector 176< 177< Debugger attached. 178< 179 ok 180Break on start in myscript.js:2 181 1 // myscript.js 182<span class="hljs-meta">> </span><span class="language-bash">2 global.x = 5;</span> 183 3 setTimeout(() => { 184 4 debugger; 185<span class="hljs-meta">debug></span></code></pre> 186<p>The Node.js debugger client is not a full-featured debugger, but simple step and 187inspection are possible.</p> 188<p>Inserting the statement <code>debugger;</code> into the source code of a script will 189enable a breakpoint at that position in the code:</p> 190<!-- eslint-disable no-debugger --> 191<pre><code class="language-js"><span class="hljs-comment">// myscript.js</span> 192<span class="hljs-variable language_">global</span>.<span class="hljs-property">x</span> = <span class="hljs-number">5</span>; 193<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> { 194 <span class="hljs-keyword">debugger</span>; 195 <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'world'</span>); 196}, <span class="hljs-number">1000</span>); 197<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'hello'</span>);</code></pre> 198<p>Once the debugger is run, a breakpoint will occur at line 3:</p> 199<pre><code class="language-console"><span class="hljs-meta">$ </span><span class="language-bash">node inspect myscript.js</span> 200< Debugger listening on ws://127.0.0.1:9229/621111f9-ffcb-4e82-b718-48a145fa5db8 201< For help, see: https://nodejs.org/en/docs/inspector 202< 203< Debugger attached. 204< 205 ok 206Break on start in myscript.js:2 207 1 // myscript.js 208<span class="hljs-meta">> </span><span class="language-bash">2 global.x = 5;</span> 209 3 setTimeout(() => { 210 4 debugger; 211<span class="hljs-meta">debug> </span><span class="language-bash">cont</span> 212< hello 213< 214break in myscript.js:4 215 2 global.x = 5; 216 3 setTimeout(() => { 217<span class="hljs-meta">> </span><span class="language-bash">4 debugger;</span> 218 5 console.log('world'); 219 6 }, 1000); 220<span class="hljs-meta">debug> </span><span class="language-bash">next</span> 221break in myscript.js:5 222 3 setTimeout(() => { 223 4 debugger; 224<span class="hljs-meta">> </span><span class="language-bash">5 console.log(<span class="hljs-string">'world'</span>);</span> 225 6 }, 1000); 226 7 console.log('hello'); 227<span class="hljs-meta">debug> </span><span class="language-bash">repl</span> 228Press Ctrl+C to leave debug repl 229<span class="hljs-meta">> </span><span class="language-bash">x</span> 2305 231<span class="hljs-meta">> </span><span class="language-bash">2 + 2</span> 2324 233<span class="hljs-meta">debug> </span><span class="language-bash">next</span> 234< world 235< 236break in myscript.js:6 237 4 debugger; 238 5 console.log('world'); 239<span class="hljs-meta">> </span><span class="language-bash">6 }, 1000);</span> 240 7 console.log('hello'); 241 8 242<span class="hljs-meta">debug> </span><span class="language-bash">.<span class="hljs-built_in">exit</span></span> 243<span class="hljs-meta">$</span></code></pre> 244<p>The <code>repl</code> command allows code to be evaluated remotely. The <code>next</code> command 245steps to the next line. Type <code>help</code> to see what other commands are available.</p> 246<p>Pressing <code>enter</code> without typing a command will repeat the previous debugger 247command.</p> 248<section><h3>Watchers<span><a class="mark" href="#debugger_watchers" id="debugger_watchers">#</a></span></h3> 249<p>It is possible to watch expression and variable values while debugging. On 250every breakpoint, each expression from the watchers list will be evaluated 251in the current context and displayed immediately before the breakpoint's 252source code listing.</p> 253<p>To begin watching an expression, type <code>watch('my_expression')</code>. The command 254<code>watchers</code> will print the active watchers. To remove a watcher, type 255<code>unwatch('my_expression')</code>.</p> 256</section><section><h3>Command reference<span><a class="mark" href="#debugger_command_reference" id="debugger_command_reference">#</a></span></h3> 257<h4>Stepping<span><a class="mark" href="#debugger_stepping" id="debugger_stepping">#</a></span></h4> 258<ul> 259<li><code>cont</code>, <code>c</code>: Continue execution</li> 260<li><code>next</code>, <code>n</code>: Step next</li> 261<li><code>step</code>, <code>s</code>: Step in</li> 262<li><code>out</code>, <code>o</code>: Step out</li> 263<li><code>pause</code>: Pause running code (like pause button in Developer Tools)</li> 264</ul> 265<h4>Breakpoints<span><a class="mark" href="#debugger_breakpoints" id="debugger_breakpoints">#</a></span></h4> 266<ul> 267<li><code>setBreakpoint()</code>, <code>sb()</code>: Set breakpoint on current line</li> 268<li><code>setBreakpoint(line)</code>, <code>sb(line)</code>: Set breakpoint on specific line</li> 269<li><code>setBreakpoint('fn()')</code>, <code>sb(...)</code>: Set breakpoint on a first statement in 270function's body</li> 271<li><code>setBreakpoint('script.js', 1)</code>, <code>sb(...)</code>: Set breakpoint on first line of 272<code>script.js</code></li> 273<li><code>setBreakpoint('script.js', 1, 'num < 4')</code>, <code>sb(...)</code>: Set conditional 274breakpoint on first line of <code>script.js</code> that only breaks when <code>num < 4</code> 275evaluates to <code>true</code></li> 276<li><code>clearBreakpoint('script.js', 1)</code>, <code>cb(...)</code>: Clear breakpoint in <code>script.js</code> 277on line 1</li> 278</ul> 279<p>It is also possible to set a breakpoint in a file (module) that 280is not loaded yet:</p> 281<pre><code class="language-console"><span class="hljs-meta">$ </span><span class="language-bash">node inspect main.js</span> 282< Debugger listening on ws://127.0.0.1:9229/48a5b28a-550c-471b-b5e1-d13dd7165df9 283< For help, see: https://nodejs.org/en/docs/inspector 284< 285< Debugger attached. 286< 287 ok 288Break on start in main.js:1 289<span class="hljs-meta">> </span><span class="language-bash">1 const mod = require(<span class="hljs-string">'./mod.js'</span>);</span> 290 2 mod.hello(); 291 3 mod.hello(); 292<span class="hljs-meta">debug> </span><span class="language-bash">setBreakpoint(<span class="hljs-string">'mod.js'</span>, 22)</span> 293Warning: script 'mod.js' was not loaded yet. 294<span class="hljs-meta">debug> </span><span class="language-bash">c</span> 295break in mod.js:22 296 20 // USE OR OTHER DEALINGS IN THE SOFTWARE. 297 21 298<span class="hljs-meta">></span><span class="language-bash">22 exports.hello = <span class="hljs-function"><span class="hljs-title">function</span></span>() {</span> 299 23 return 'hello from module'; 300 24 }; 301<span class="hljs-meta">debug></span></code></pre> 302<p>It is also possible to set a conditional breakpoint that only breaks when a 303given expression evaluates to <code>true</code>:</p> 304<pre><code class="language-console"><span class="hljs-meta">$ </span><span class="language-bash">node inspect main.js</span> 305< Debugger listening on ws://127.0.0.1:9229/ce24daa8-3816-44d4-b8ab-8273c8a66d35 306< For help, see: https://nodejs.org/en/docs/inspector 307< Debugger attached. 308Break on start in main.js:7 309 5 } 310 6 311<span class="hljs-meta">> </span><span class="language-bash">7 addOne(10);</span> 312 8 addOne(-1); 313 9 314<span class="hljs-meta">debug> </span><span class="language-bash">setBreakpoint(<span class="hljs-string">'main.js'</span>, 4, <span class="hljs-string">'num < 0'</span>)</span> 315 1 'use strict'; 316 2 317 3 function addOne(num) { 318<span class="hljs-meta">> </span><span class="language-bash">4 <span class="hljs-built_in">return</span> num + 1;</span> 319 5 } 320 6 321 7 addOne(10); 322 8 addOne(-1); 323 9 324<span class="hljs-meta">debug> </span><span class="language-bash">cont</span> 325break in main.js:4 326 2 327 3 function addOne(num) { 328<span class="hljs-meta">> </span><span class="language-bash">4 <span class="hljs-built_in">return</span> num + 1;</span> 329 5 } 330 6 331<span class="hljs-meta">debug> </span><span class="language-bash"><span class="hljs-built_in">exec</span>(<span class="hljs-string">'num'</span>)</span> 332-1 333<span class="hljs-meta">debug></span></code></pre> 334<h4>Information<span><a class="mark" href="#debugger_information" id="debugger_information">#</a></span></h4> 335<ul> 336<li><code>backtrace</code>, <code>bt</code>: Print backtrace of current execution frame</li> 337<li><code>list(5)</code>: List scripts source code with 5 line context (5 lines before and 338after)</li> 339<li><code>watch(expr)</code>: Add expression to watch list</li> 340<li><code>unwatch(expr)</code>: Remove expression from watch list</li> 341<li><code>watchers</code>: List all watchers and their values (automatically listed on each 342breakpoint)</li> 343<li><code>repl</code>: Open debugger's repl for evaluation in debugging script's context</li> 344<li><code>exec expr</code>: Execute an expression in debugging script's context</li> 345</ul> 346<h4>Execution control<span><a class="mark" href="#debugger_execution_control" id="debugger_execution_control">#</a></span></h4> 347<ul> 348<li><code>run</code>: Run script (automatically runs on debugger's start)</li> 349<li><code>restart</code>: Restart script</li> 350<li><code>kill</code>: Kill script</li> 351</ul> 352<h4>Various<span><a class="mark" href="#debugger_various" id="debugger_various">#</a></span></h4> 353<ul> 354<li><code>scripts</code>: List all loaded scripts</li> 355<li><code>version</code>: Display V8's version</li> 356</ul> 357</section><section><h3>Advanced usage<span><a class="mark" href="#debugger_advanced_usage" id="debugger_advanced_usage">#</a></span></h3> 358<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> 359<p>V8 Inspector integration allows attaching Chrome DevTools to Node.js 360instances for debugging and profiling. It uses the 361<a href="https://chromedevtools.github.io/devtools-protocol/">Chrome DevTools Protocol</a>.</p> 362<p>V8 Inspector can be enabled by passing the <code>--inspect</code> flag when starting a 363Node.js application. It is also possible to supply a custom port with that flag, 364e.g. <code>--inspect=9222</code> will accept DevTools connections on port 9222.</p> 365<p>To break on the first line of the application code, pass the <code>--inspect-brk</code> 366flag instead of <code>--inspect</code>.</p> 367<pre><code class="language-console"><span class="hljs-meta">$ </span><span class="language-bash">node --inspect index.js</span> 368Debugger listening on ws://127.0.0.1:9229/dc9010dd-f8b8-4ac5-a510-c1a114ec7d29 369For help, see: https://nodejs.org/en/docs/inspector</code></pre> 370<p>(In the example above, the UUID dc9010dd-f8b8-4ac5-a510-c1a114ec7d29 371at the end of the URL is generated on the fly, it varies in different 372debugging sessions.)</p> 373<p>If the Chrome browser is older than 66.0.3345.0, 374use <code>inspector.html</code> instead of <code>js_app.html</code> in the above URL.</p> 375<p>Chrome DevTools doesn't support debugging <a href="worker_threads.html">worker threads</a> yet. 376<a href="https://github.com/GoogleChromeLabs/ndb/">ndb</a> can be used to debug them.</p></section> 377 <!-- API END --> 378 </div> 379 </div> 380 </div> 381 <script> 382 'use strict'; 383 { 384 const kCustomPreference = 'customDarkTheme'; 385 const userSettings = sessionStorage.getItem(kCustomPreference); 386 const themeToggleButton = document.getElementById('theme-toggle-btn'); 387 if (userSettings === null && window.matchMedia) { 388 const mq = window.matchMedia('(prefers-color-scheme: dark)'); 389 if ('onchange' in mq) { 390 function mqChangeListener(e) { 391 document.body.classList.toggle('dark-mode', e.matches); 392 } 393 mq.addEventListener('change', mqChangeListener); 394 if (themeToggleButton) { 395 themeToggleButton.addEventListener('click', function() { 396 mq.removeEventListener('change', mqChangeListener); 397 }, { once: true }); 398 } 399 } 400 if (mq.matches) { 401 document.body.classList.add('dark-mode'); 402 } 403 } else if (userSettings === 'true') { 404 document.body.classList.add('dark-mode'); 405 } 406 if (themeToggleButton) { 407 themeToggleButton.hidden = false; 408 themeToggleButton.addEventListener('click', function() { 409 sessionStorage.setItem( 410 kCustomPreference, 411 document.body.classList.toggle('dark-mode') 412 ); 413 }); 414 } 415 } 416 </script> 417</body> 418</html> 419