A NativeScript overlay walks the native view tree and reports over a WebSocket to a devtools server on your machine.

Set up NativeScript

This guide adds the devtools to a NativeScript Angular app. The app has no DOM, so a separate overlay walks the native view tree through Angular's debug API and reports to the standalone devtools server.

What you get

The component tree, the signal graph and the injector tree, including environment injectors and their providers. Signal stores and the change log, when your app uses NgRx. The highlight tool outlines a component's view on the simulator or device. /__mcp on the devtools server. The source scanners read the app's src/.

The flow

Add @santoshyadavdev/ng-devtools and @valor/nativescript-websockets. Import @valor/nativescript-websockets first in src/polyfills.ts. Call initNativeScriptOverlay() in src/main.ts, before the app bootstraps. Start ng-devtools dev in the app's folder and open the UI.

Step 1: Install

Step 2: Add a WebSocket global

The overlay talks to the server over a WebSocket, and the NativeScript runtime has no WebSocket global. Import the polyfill first:

// src/polyfills.ts
import '@valor/nativescript-websockets';

Step 3: Start the overlay

// src/main.ts
import {initNativeScriptOverlay} from '@santoshyadavdev/ng-devtools/overlay-nativescript';

if (__DEV__) {
  initNativeScriptOverlay();
}

Call it before runNativeScriptAngularApp(). The injector inspector relies on Angular's injector profiler, which Angular only wires while it creates the platform.

Where the overlay connects

Target	Default URL
iOS simulator	http://localhost:9999/
Android emulator	http://10.0.2.2:9999/
Physical device	Pass { baseURL }

For a physical device, pass the address of your machine as baseURL, and allow plain HTTP to that address in Info.plist and AndroidManifest.xml.

Step 4: Run the devtools server

Run the server in the app's folder, so the source scanners read its src/:

cd my-nativescript-app
npx @santoshyadavdev/ng-devtools dev --no-auth

The server listens on localhost only, which the iOS simulator and the Android emulator reach. --no-auth is needed because the app cannot enter the one-time code the panel asks for.

What	Where
Devtools UI	http://localhost:9999/
MCP endpoint	http://localhost:9999/__mcp

A physical device reaches your machine over the network, so the server has to listen on an interface the device can reach:

npx @santoshyadavdev/ng-devtools dev --host 192.168.1.20 --no-auth

With --host and --no-auth, every host that can reach that address can call the devtools RPC and MCP endpoints without a code. Use it on a trusted network only, and bind to the one interface the device uses rather than 0.0.0.0.

See Standalone CLI for the other server options and Security for what --no-auth turns off.

Try the demo

examples/nativescript is a ns create --ng project wired up this way, with a small showcase component (signals, a computed, an effect and a component-level provider). It is tested on the iOS simulator. Android is untested.

The demo maps @santoshyadavdev/ng-devtools/* to the package's build output in packages/ng-devtools/dist, so build the package first:

pnpm devtools:build-pkg
pnpm devtools:nativescript
cd examples/nativescript && npm install && ns debug ios --no-hmr

pnpm devtools:nativescript starts the devtools server on localhost, scanning examples/nativescript/src. For a physical device, pnpm devtools:nativescript:device listens on every interface instead, with the same warning as above.

Where to next