如何通过Google Chrome扩展调试浏览器脚本中的Nuxt应用

Hey fellow dev! I know how frustrating it is when you’re trying to debug Nuxt code running inside a Chrome extension and the usual dev tools workflow just falls flat. After banging my head against this for a few days, here are the actionable steps that worked for me:

1. Tweak Nuxt’s Build Configuration for Extension Compatibility #

First, make sure your Nuxt setup generates sourcemaps Chrome can pick up in the extension context. Update your nuxt.config.ts:

export default defineNuxtConfig({
  devtools: { enabled: true }, // Keep devtools enabled for deeper inspection
  build: {
    sourcemap: true, // Critical for mapping minified code back to your source files
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        // Disable code splitting if it clashes with extension sandbox restrictions
        config.optimization.splitChunks = false;
      }
    }
  }
});

This ensures even bundled Nuxt code links back to your original files in Chrome’s dev tools.

2. Load Your Extension in Developer Mode #

• Open Chrome and navigate to chrome://extensions/
• Toggle "Developer mode" on (top-right corner)
• Click "Load unpacked" and select your extension’s build directory (where Nuxt generates its files)
• Pin the extension to your toolbar for quick access during debugging

3. Access the Right Dev Tools Context #

Don’t just right-click and inspect the extension popup—this only shows the popup’s DOM, not the Nuxt runtime. Instead:

• Right-click your pinned extension icon and select "Inspect popup"
• In the dev tools window, go to the Sources tab
• Look for your Nuxt source files under webpack:// or localhost:3000 (depending on your dev setup)
  • If they’re hidden, expand the top frame, find your Nuxt entry file (usually app.js), and set breakpoints directly there

4. Work Around Extension CSP Restrictions #

Chrome extensions have strict Content Security Policies (CSP) that can block Nuxt’s dev tools or hot reloading. For development only (never use this in production!), update your extension’s manifest.json:

{
  "content_security_policy": "script-src 'self' 'unsafe-eval' 'unsafe-inline' http://localhost:3000; object-src 'self'"
}

unsafe-eval and unsafe-inline are required for Nuxt’s dev mode—make sure to remove them when packaging for production.

5. Use Nuxt’s Built-In DevTools #

If Chrome’s dev tools feel limited, leverage Nuxt’s native devtools:

• Run your Nuxt app in dev mode (npm run dev)
• In your extension popup’s dev tools, look for the Nuxt tab (it appears if devtools are enabled)
• Here you can inspect components, Vuex/Pinia state, and run commands directly in the Nuxt context—perfect for Vue-specific bugs

6. Debug Background Scripts (If Applicable) #

If your Nuxt app runs in a background script or service worker:

• Go to chrome://extensions/, click "Details" on your extension
• Under "Inspect views", click "background page" to open its dev tools
• Navigate to the Sources tab to find your Nuxt files and set breakpoints just like with the popup

Pro tip: When using hot reloading, manually reload your extension via the "Reload" button on its details page—Chrome doesn’t always pick up Nuxt code updates automatically.

内容的提问来源于stack exchange，提问作者mr_squall