Debugger

Opens a full-screen, in-app console log viewer over your website — showing console.log / warn / error / info output, uncaught JS errors, and unhandled promise rejections as they happen.

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.

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 below.

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.

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

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

<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:

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

Do I need to import the WebToNative JavaScript file to use this?

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.

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

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.

Can I close the debugger from JavaScript once it's open?

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

Does opening it trigger `beforeunload` or change my page's URL?

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.