Troubleshooting

Refresh the Page

If JSX code isn't syncing or elements aren't clickable, try refreshing the page.

Help us fix this: When this happens, let us know on Discord. Your reports help us track down and resolve these sync issues.

Restart Chrome DevTools

After Chrome updates, extensions sometimes need a fresh console session. Close and reopen Chrome DevTools (F12 or Cmd+Option+I).

Open a New Tab

JSX Tool stores state per tab. If things get stuck, close the current tab and open your app in a fresh one. This often resolves state-related issues.

Reload the Extension

Last resort: Go to chrome://extensions, find JSX Tool, and click the refresh icon. Then open a new tab.

This clears the extension's internal state and usually resolves persistent issues.

Restart Your Dev Server

If prompts fail to send, your dev server may need a restart. Stop and restart your development server to refresh the connection.

Debugging tip: Enable debug logging by setting debug: true in your dev server config.

If you see repeated [jsx-tool] Signature verification failed errors in your logs:

• Update to @jsx-tool/filemap-dev-server@0.0.13 or later
• Or temporarily set insecure: true in your config

Re-authenticate

If you keep seeing login prompts when trying to send requests, log out and back in at jsxtool.com to refresh your session.

Command Key Sticks

Sometimes the Command (or Ctrl) key can get "stuck" in the pressed state, causing unexpected behavior when clicking elements.

Quick fix: Press the Command key (or Ctrl on Windows/Linux) a couple of times to reset it.

We're actively working on a permanent solution for this issue.

Blank Screen of Death

If JSX Tool suddenly shows a blank screen or empty component tree, Chrome has likely killed our service worker to save memory.

Solution: Close the current tab and open your app in a new tab. This will restart the service worker and restore JSX Tool functionality.

This typically happens when you navigate away from a tab for too long. Chrome automatically terminates idle service workers to save memory.

Icon Libraries & Vite Dependency Optimizations

Some dependencies with specific optimizations can break React sourcemaps, preventing JSX Tool from properly inspecting components.

Common culprits: Icon and font libraries like @phosphor-icons/react, Font Awesome, and similar packages.

Solution: Exclude these from Vite's dependency optimization in your vite.config.ts:

export default defineConfig({
  optimizeDeps: {
    exclude: ['@phosphor-icons/react', '@fortawesome/react-fontawesome']
  }
})

This preserves sourcemaps for these libraries, allowing JSX Tool to track component locations correctly.