Skip to content

nativescript.md

Latest commit

 

History

History
146 lines (108 loc) · 5.79 KB

nativescript.md

File metadata and controls

146 lines (108 loc) · 5.79 KB
Raw
title Set up NativeScript
description Inspect a NativeScript Angular app from the simulator or a device, step by step.
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

npm install @santoshyadavdev/ng-devtools @valor/nativescript-websockets
pnpm add @santoshyadavdev/ng-devtools @valor/nativescript-websockets
yarn add @santoshyadavdev/ng-devtools @valor/nativescript-websockets
bun add @santoshyadavdev/ng-devtools @valor/nativescript-websockets

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