How do I generate a source map for a Svelte plugin?

[CodeBradley]

I'm running into an error that doesn't make sense to me and would like to debug while looking at the original code. This doesn't seem to be working:

export default defineConfig({
  build: {
    emptyOutDir: true,
    sourcemap: true
  },
  plugins: [
    svelte(),
    webExtension({
      manifest: generateManifest,
      watchFilePaths: ["package.json", "manifest.json"],
    }),
  ],
});

[aklinker1]

Config looks correct. I need a reproduction to help any more than that.

[CodeBradley]

I actually got this working now, however I get a 503 error when using external source maps. I've resolved it by switching to inline source maps for now, but hoping to find a solution for that as well.

I have no clue what specifically is generating the error and blocking the maps, but I doubt it's related to Vite. Mentioning it in the off chance someone here knows how to fix it.

Great repo @aklinker1, thanks for creating this.

[aklinker1]

Ah, so it was a content script that was having the problem.

This seems to be an issue with Chrome and content scripts. I can find really old stack overflow posts about this, which appear to be resolved, but that doesn't seem true anymore. I have the same problem on my extensions.

If anyone figured this out, I'll gladly add the fix to this project.

[CodeBradley]

Yeah, I had the same experience. Manifest v2's solution of adding web_accessible_resources doesn't seem to help, for anyone else who may see this.

Example:

{
    "web_accessible_resources": [{
          "resources": [ "*.js.map" ],
          "matches": [ "https://*", "http://*" ]
     }],
}

[CodeBradley]

Digging into this while in a meeting for the greater good of humanity. It looks like I got it working externally without generating the errors, but only when I'm looking at the debugger inside of Chrome DevTools. Inside of Visual Studio Code, it takes me to the minified version every time I step in the chrome debugger.

Ideally, it should take me to the exact svelte file and let me step through it and edit it in that single file. With the inline debugger, it opens up a read-only version of my .svelte file, so I need to check variables there and go to the actual file to make edits; which I've never had to do in any other language (including webpack related development).

I don't think it's anything you can fix in the repo, per se, but here's what I have so far for the external configuration:

manifest.json

//Specific to this repo
{
  "{{chrome}}.manifest_version": 3,
  "permissions": [
    "sidePanel",
    "storage"
  ],
  "{{chrome}}.action": {
    "default_popup": "src/popups/app.html"
  },
  "{{chrome}}.side_panel": {
    "default_path": "src/side-panels/app.html"
  },
  "{{chrome}}.content_scripts": [
    {
      "matches": [
        "https://*/*",
        "http://*/*"
      ],
      "js": ["src/content-scripts/highlighter/app.js"]
    }
  ],
   //Manifest v2 Recommended change
  "web_accessible_resources": [
    {
        "resources": ["*.js.map"],
        "matches": ["https://*/*","http://*/*"]
    }
  ]
}

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
             //This config is meant for content_scripts, so this is just a random domain. Would probably be nice if it could go to options.html, popup.html, etc. automatically for debugging. Not sure how to get that working though.
            "url": "https://www.svelte.dev/",
            //Opens chrome and injects the unpacked extension and auto opens dev tools to trigger debugging automatically
            "runtimeArgs": ["--load-extension=${workspaceFolder}/dist", "--auto-open-devtools-for-tabs"],
            //Stops the errors imaged above
            "resolveSourceMapLocations": [
                "${workspaceFolder}/dist/**",
                "!**/node_modules/**"
            ]
        },
        { 
            //Requires Debugger for Firefox Extension
            "type": "firefox",
            "request": "launch",
            "name": "Launch Firefox",
            "url": "https://svelte.dev/", 
            "addonPath": "${workspaceFolder}/dist"
        }
    ]
}

[aklinker1]

Oh my gosh this is incredible! You got the debugger working?! I've been trying to figure this out forever.

Sad that it doesn't work perfectly with Svelte, but thank you for sharing your setup! This will be super helpful for me. I'll add this launch.json to the docs

[CodeBradley]

Yeah, it took hours of digging through SO, Reddit, Chromium Issues, etc. when I should've just finished the project, lol. Hoping it some people though.

If you or anyone else that reads this figures out why the sourceMaps only work in Chrome DevTools, and triggers breakpoints in the compiled/minified version within VSCode instead of the .svelte files, then I would love to know.

If someone could confirm if it's working in React, Vue, etc., so I can narrow it down to a Svelte or VSCode problem, then I would love to know that as well.