> For the complete documentation index, see [llms.txt](https://docs.webtonative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webtonative.com/javascript-apis/debugger.md).

# Debugger

Use it to diagnose issues on a real user's device (e.g. walking someone through a support call, or catching a production bug you can't reproduce locally) without wiring up remote DevTools or asking the user to send you logs manually.

{% hint style="info" %}
This doesn't go through the `window.WTN` JavaScript bridge like other WebToNative features — there's no import to add and no `npm` equivalent. It works by navigating to a special URL that the app intercepts before the page actually navigates away. See [How It Works](#how-it-works) below.
{% endhint %}

> **Platform support:** Android and iOS.

***

## Opening the Debugger

Trigger it by navigating to `w2n://console-screen` — the app catches this before it leaves your site and opens the console viewer as an overlay on top of whatever screen is currently showing.

```javascript
window.location.href = "w2n://console-screen";
```

Or wire it directly to a link or button, with no JavaScript needed:

```html
<a href="w2n://console-screen">Open Debugger</a>
```

### How It Works

`w2n://console-screen` is a custom URL scheme, not a page URL. Both apps intercept navigation to it at the WebView level and cancel the actual navigation, so your page never unloads — the console viewer just slides in on top of it. That also means it works on any page, even one where the WebToNative JavaScript file hasn't been imported, since nothing needs to be loaded on your page for the interception to happen.

***

## What It Shows

* **Console output** — every `console.log` / `info` / `warn` / `error` call, plus uncaught errors and unhandled promise rejections, grouped by the page URL they came from.
* **Native bridge traffic** — calls made through `window.WTN.*` and their responses, so you can see what your site sent to the app and what it got back, alongside the console output.
* A search bar to filter entries by URL, filter tabs to narrow by type/direction, and a clear-all action to wipe the current log list.

Close it with the **X** in the top bar, or the device back gesture/button — either returns you to the page exactly as it was underneath.

***

## Common Patterns

### Hidden Support/Debug Trigger

Since anyone who can navigate your site to `w2n://console-screen` can open this, most sites tuck the trigger somewhere a regular user won't stumble into it — a hidden button on a settings/support page, gated behind a tap sequence, or behind a flag you control from your own backend:

```javascript
function openDebugConsole() {
  window.location.href = "w2n://console-screen";
}

// e.g. only reachable from a support page you control
document.getElementById("support-debug-button")?.addEventListener("click", openDebugConsole);
```

***

## Frequently Asked Questions

<details>

<summary>Do I need to import the WebToNative JavaScript file to use this?</summary>

No — this doesn't use the `window.WTN` bridge at all, so it works even on a page where that script hasn't loaded. See [How It Works](#how-it-works).

</details>

<details>

<summary>What happens if I navigate to `w2n://console-screen` in a normal browser, outside the WebToNative app?</summary>

Nothing useful — browsers don't recognize the `w2n://` scheme, so the navigation just fails silently. Only rely on this from links/buttons that are reached from inside your WebToNative app.

</details>

<details>

<summary>Can I close the debugger from JavaScript once it's open?</summary>

No — there's no call to dismiss it programmatically. The user closes it with the on-screen **X** or the device back action.

</details>

<details>

<summary>Does opening it trigger `beforeunload` or change my page's URL?</summary>

No — the app cancels the navigation before it actually happens, so your page never unloads and the URL bar (if any) doesn't change. The console viewer opens as an overlay on top of the current page.

</details>