I Got Tired of Switching Tools While Coding on My Phone, So I Built This

Description and use

The built‑in Developer Panel in Authtics Host streamlines mobile web development by consolidating logs, network, client, and server information into a single interface, reducing tool switching.

Problem

Developers coding on phones need to switch between multiple tools to inspect logs, network, and server state, which is cumbersome.

Outcome

The integrated Developer Panel streamlines debugging and server management for mobile developers, eliminating the need to switch tools.

Workflow

• Install Node.js 22 and Authtics Host via npm
• Create project structure with index.ts, authtics_host.config.ts, and client/pages/index.tsx
• Configure devMode:true and other settings in config
• Run the app with node --experimental-strip-types index.ts
• Open the app in a browser and access the Developer Panel at bottom‑right
• Use tabs to view logs, network, route, client, server info, and manage the app

Evidence

I develop stuff on my phone.

Source

When you're developing a website, you need to check logs, investigate requests, see what's happening on the server, and figure out why something isn't working.

Source

The panel has eight tabs: Console, Route, Webpage Info, Network, Client Info, About Host, Server Info, Panel Customization.

Source

If you configure a DAT in authtics_host.config.ts, you can restrict developer access using a token you specify.

Source

The package includes more than just the Developer Panel, so check out the README for the other framework features and configuration options.

Source