Add a debug setting.

source/scss/pages/_settings.scss

@@ -12,5 +12,11 @@
     select {
       margin-bottom: 1rem;
     }
+
+    input[type='checkbox'] {
+      height: 1.75rem;
+      width: 1.75rem;
+      margin-right: 0.5rem;
+    }
   }
 }

source/ts/pages/settings.ts

@@ -2,6 +2,7 @@ import {Component, html} from 'htm/preact';
 
 import ExternalAnchor from '../components/external-anchor.js';
 import SharedFooter from '../components/shared-footer.js';
+import {isDebugEnabled} from '../utilities/debug.js';
 import {
   defaultTheme,
   getThemeByCssClass,
@@ -12,6 +13,7 @@ import {
 type Props = Record<string, unknown>;
 
 type State = {
+  debugChecked: boolean;
   selectedTheme: string;
 };
 
@@ -20,11 +22,17 @@ export default class SettingsPage extends Component<Props, State> {
     super(props);
 
     this.state = {
+      debugChecked: isDebugEnabled(),
       selectedTheme:
         window.localStorage.getItem('theme') ?? defaultTheme.cssClass,
     };
   }
 
+  onDebugChange = (event: Event) => {
+    const checked = (event.target as HTMLInputElement).checked;
+    window.localStorage.setItem('debug', checked.toString());
+  };
+
   onThemeChange = (event: Event) => {
     const theme = getThemeByCssClass((event.target as HTMLSelectElement).value);
     setTheme(theme);
@@ -65,6 +73,21 @@ export default class SettingsPage extends Component<Props, State> {
           </p>
         </section>
 
+        <section class="setting">
+          <h2>Debug</h2>
+
+          <input
+            checked=${this.state.debugChecked}
+            id="debug-checkbox"
+            name="debug-checkbox"
+            onChange=${this.onDebugChange}
+            type="checkbox"
+          />
+          <label for="debug-checkbox">
+            Log debug information to the console.
+          </label>
+        </section>
+
         <${SharedFooter} page="settings" />
       </div>
     `;

source/ts/utilities/debug.ts

@@ -0,0 +1,13 @@
+export function isDebugEnabled(): boolean {
+  return window.localStorage.getItem('debug') === 'true';
+}
+
+export function debug(...args: any[]): void {
+  if (!isDebugEnabled()) {
+    return;
+  }
+
+  for (const argument of args) {
+    console.debug(argument);
+  }
+}