ACR

Amazing Console Repl

English | 한국어

ACR is a lightweight debugger for mobile webviews. When remote DevTools is hard to attach, you can drop in one script and inspect logs, requests, storage, and runtime info directly on the page.

Usage

Build

npm install
npm run build

Add the bundle

<script src="https://cdn.jsdelivr.net/npm/@teihong93/acr?init=true&react-query=true"></script>

You can also pin a specific version:

<script src="https://cdn.jsdelivr.net/npm/@teihong93/[email protected]?init=true&react-query=true"></script>

With this URL form, ACR initializes itself and also registers the React Query tab.

Supported query params:

• init=true
• react-query=true
• auto-open=true|false
• theme=dark|light
• max-console-entries=300
• max-network-entries=200
• react-query-watch=true|false
• react-query-interval-ms=500
• react-query-timeout-ms=120000

Initialize with API (optional)

<script>
  window.ACR.init({
    autoOpen: true,
    initialTheme: 'dark',
  });
</script>

Add a custom tab (optional)

window.ACR.registerTab({
  id: 'my-tab',
  title: 'My Tab',
  View: ({ core }) => {
    return preact.h('div', null, `logs: ${core.consoleEntries.length}`);
  },
});

Add React Query tab (optional)

ACR does not add this tab by default. Register it only when your app uses React Query.

<script>
  window.ACR.registerReactQueryTab({ watch: true, intervalMs: 1000, timeoutMs: 30000 });
</script>

ACR checks known globals first (for example window.__TANSTACK_QUERY_CLIENT__), then scans React Fiber tree/context as a fallback. You can still pass a client directly if you want deterministic binding:

<script>
  window.ACR.registerReactQueryTab({
    client: window.myQueryClient,
  });
</script>

Playground

npm run playground

Then open http://localhost:4173/. The playground is Vite-based and uses real React + TanStack React Query with automatic client discovery. npm run playground builds ACR first, then starts the playground.

Development

Scripts

npm run dev           # watch mode build
npm run build         # production bundle
npm run deploy:cdn    # build + versioned artifact + CDN upload
npm run deploy:cdn:dry # same flow without upload
npm run typecheck     # TypeScript type check
npm run lint          # ESLint
npm run format        # Prettier write
npm run format:check  # Prettier check

Release and versioning

Versioning is managed with standard-version.

npm run release:dry
npm run release
npm run release:patch
npm run release:minor
npm run release:major

CDN deployment:

npm run deploy:cdn does:

• build the bundle
• create dist/acr@<version>.js from dist/acr.min.js
• upload the versioned file using your CDN command

Set CDN_UPLOAD_CMD with placeholders:

• {file}: absolute path to the generated file
• {filename}: file name like [email protected]
• {version}: version from package.json

npm run deploy:cdn automatically loads environment values from the project root .env.

cp .env.example .env
# edit .env
npm run deploy:cdn

Dry-run:

npm run deploy:cdn:dry

CDN script tag example:

<script src="https://cdn.jsdelivr.net/npm/@teihong93/[email protected]?init=true&react-query=true"></script>

The version from package.json is injected at build time and displayed in the Info tab.

Contributors

• teihong93

Issues and pull requests are welcome.