Chrome IDE Trace

Open a DOM node from a local Ionic Vue app directly in Antigravity IDE.

Chrome IDE Trace has two required pieces that work together:

• A Chrome DevTools extension.
• A Vite plugin that adds source-location attributes to local Vue template DOM and starts a localhost editor opener during app development.
• An optional local native host fallback for older setups.

The Chrome extension alone is not enough. Add the Vite plugin to the app you are developing; when the app starts, the plugin starts one shared local opener server for all running apps.

User

Follow this section if you installed IDE Trace from the Chrome Web Store and want to use it in a local Ionic Vue or Vue Vite app.

What you need

• macOS.
• Google Chrome.
• Node.js and npm.
• A local Ionic Vue or Vue app that runs with Vite.
• Antigravity IDE or VS Code installed locally.

1. Install the Chrome extension

Install IDE Trace for Ionic Vue from the Chrome Web Store:

https://chromewebstore.google.com/detail/ide-trace-for-ionic-vue/icannpjhphghchiodhpcbjfoibjahhal

After Chrome says the extension is installed, keep going. The extension will not do anything useful until the Vite plugin is installed in the app you are developing.

2. Install the Vite plugin in your app

Go to the app you want to inspect:

cd path/to/your-ionic-vue-app

Install the package:

npm install -D chrome-ide-trace

Open vite.config.ts and add ideTraceVue() before Vue's plugin:

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import { ideTraceVue } from 'chrome-ide-trace/vite';

export default defineConfig({
  plugins: [
    ideTraceVue(),
    vue()
  ]
});

The order matters. ideTraceVue() must be before vue().

3. Start your app

Run your normal Vite dev command:

npm run dev

Open the local app URL in Chrome. It will usually look like one of these:

http://localhost:5173
http://localhost:8100

When Vite starts, ideTraceVue() also ensures the IDE Trace opener is running at http://127.0.0.1:51204. If multiple apps are running, they reuse that same opener server instead of starting one per app.

4. Open a DOM node in your editor

1. Open your local app in Chrome.
2. Open Chrome DevTools.
3. Go to the Elements tab.
4. Select an element rendered by your Vue app.
5. Open the IDE Trace sidebar in the Elements panel.
6. Click Open in IDE.

You can also right-click inside the page and choose Open source in IDE when the clicked element has trace data.

5. Choose your editor

The default editor URL opens Antigravity:

antigravity-ide://file/{encodedFile}:{line}:{column}

In the IDE Trace DevTools sidebar, you can switch the editor URL template to VS Code:

vscode://file/{encodedFile}:{line}:{column}

If nothing shows up

• Make sure your app URL starts with http://localhost, https://localhost, http://127.0.0.1, or https://127.0.0.1.
• Make sure your app is running through the Vite dev server.
• Make sure ideTraceVue() is before vue() in vite.config.ts.
• Refresh the app page after changing vite.config.ts.
• Check http://127.0.0.1:51204/__ide_trace/status; it should return {"ok":true,"service":"chrome-ide-trace-open-server"} while a traced app dev server is running.
• In DevTools, select an element from your Vue app, not the browser's own DevTools UI.

Optional native host fallback

The app-started opener server is the default path. If you still want Chrome native messaging as a fallback, run:

npx chrome-ide-trace install-native-host icannpjhphghchiodhpcbjfoibjahhal

The extension will try the app-started opener first, then the native host.

Contributor

Follow this section if you are working on this repository itself.

Install the repo

git clone https://github.com/dt2patel/ide-trace-ionic-vue.git
cd ide-trace-ionic-vue
npm install
npm run build

Load the local extension during development

1. Open chrome://extensions.
2. Enable Developer mode.
3. Click Load unpacked.
4. Select this repository's extension directory.

Optional: install the native host for the local extension

After the unpacked extension is loaded, run:

node scripts/install-native-host.mjs

The local installer can detect the unpacked extension ID from Chrome preferences.

The app-started opener server works without this step. The installer writes the Chrome native messaging manifest and copies the host to:

~/Library/Application Support/IDE Trace/native-host

Package the Chrome Web Store extension

Create a Web Store zip with:

npm run package:extension

The zip is written under release/. See docs/chrome-web-store.md for listing copy, privacy notes, and the first-submission checklist.

Run tests

npm test

How the source lookup works

Browser DOM does not reliably preserve the original Vue SFC template line by itself, especially after component compilation and Ionic custom elements. The Vite plugin adds dev-only data-ide-trace-* attributes, and the Chrome extension reads those attributes from the selected node or nearest traced ancestor.

• The extension looks for the nearest ancestor with data-ide-trace-file, so selecting text nodes or Ionic shadow DOM internals can still resolve to the owning Vue template element.
• The Vite plugin starts a shared localhost opener server in dev mode. The server only listens on 127.0.0.1 and only opens approved editor URL protocols.
• If a selected node has no trace, confirm the app is running through Vite dev server with ideTraceVue() before vue() in the plugin list.
• This is intended for local development only. Do not enable the Vite plugin in production builds.