I made such a script that makes links from Console Browser DevTools, open in VSCode

[lukaszpolowczyk]

I made such a script that makes links from Console Browser DevTools, open in VSCode. This uses the mechanism in Vite. It works great, you can test it. It works for sure with SvelteKit from Vite in Firefox and Chromum browsers.

If anyone needs it, I found an easy way to do it right now, without a plugin and without browser functionality.

Just add the code to src/app.html, and it works already.

It looks like this:

Just click the url in the console containing /__open-in-editor?file= in it, and VSCode will open what you need.

It works in Firefox, Chrome, Edge, Vivaldi.

I can already say that it is very convenient. :D
I dream that Mozilla will add this to their DevTools in a refined version.
Or Vite plugin to be created, with a separate console that does not have the flaws that are in this script of mine.

Known problems:

1. The code is asynchronous due to the use of fetch and wasm, making console.log/warn/error/info asnchronous. It seems to me that this is not a problem most of the time, it's just that the logs appear in a desynchronized way, you don't need to call them with await.
2. When there is no code map for a file, it returns an XHR error in the console (map not loaded. unfortunately, I don't think it's possible to hide this XHR error), then the line and column number may be wrong (but it still links to the right file, just the wrong line). Needed code maps in some places in Svelte, because it seems to be missing.
   If Vite provided source maps to the client as global objects, this problem with XHR errors could be solved.
3. When the script is enabled, the original links to the browser DevTools Debugger don't work - they all link only to the function associated with my script, because it substitutes every console.log/error/info/warn. I wonder if it can be done better?
4. Clicking the link to the editor opens a new tab in the web browser, which you have to manually close later (but it's still less work than looking for a line in the file manually). I'm thinking of a little extension for Firefox that detects tabs with /__open-in-editor?file=, and automatically closes them....
5. The links are quite long. but nothing can be done about it.

I add this code ABOVE %sveltekit.head% in src/app.html, refresh the page in the browser, and done:

<script src="https://unpkg.com/[email protected]/dist/source-map.js"></script>
<script>
  sourceMap.SourceMapConsumer.initialize({
      "lib/mappings.wasm": "https://unpkg.com/[email protected]/lib/mappings.wasm"
  });
</script>
<script>
  async function getPos (url, line, column) {
    try {
    const res = await fetch(`${url}.map`);
    const mapJson = await res.json();
    const place = await sourceMap.SourceMapConsumer.with(mapJson, null, consumer => {
      
      const place = consumer.originalPositionFor({
        line: Number(line),
        column: Number(column)
      });
      return place;
    });
    return place;
    } catch {
      return {};
    }
  }
  
  function uniConsole (name) {
    const n = `_${name}`;
    window[n] = console[name];
    const prefix = `${location.origin}/__open-in-editor?file=`;
    
    console[name] = async (...a) => { try { throw Error(); } catch (err) {
      const stackLine = err.stack.includes("at ") ? (
        err.stack.split("\n")[2].includes("(") && err.stack.split("\n")[2].includes(")") ? (
          err.stack.split("\n")[2].split(")")[0].split("(")[1]
        ) : err.stack.split("\n")[2].split("at ")[1]
      ) : err.stack.split("\n")[1];
      
      if (!stackLine) { window[n](...a, err.stack); return; }
      
      const preUri = stackLine.split("@").at(-1).replace(`${location.origin}/`,"").replace(/^fs/, "");
      const path = preUri.split("?")[0].split(":")[0];
      
      const line = preUri.split("?").at(-1).split(":").at(-2);
      const column = preUri.split("?").at(-1).split(":").at(-1);
      
      if (path.length>0 && line && column) {
        const ob = await getPos(`${location.origin}/${path}`, line, column);
        const { line:l, column:c } = ob.line && ob.column ? ob : ({line, column});
        const target = `${path}:${l}:${c}`;
        window[n](...a, `${prefix}${target}`);
      } else
      if (path.length>0 && !line && !column) {
        const target = `${path}`;
        window[n](...a, `${prefix}${target}`);
      } else {
        const target = `${stackLine}`;
        window[n](...a, `${prefix}${target}`);
      }
      
    }}
  }
  uniConsole("log");
  uniConsole("warn");
  uniConsole("error");
  uniConsole("info");
</script>

Latest source-map version - https://github.com/mozilla/source-map/#use-on-the-web

[lukaszpolowczyk]

The purpose of the thread is to discuss whether it can be done better, in a plugin, or a built-in mechanism in a web browser- https://bugzilla.mozilla.org/show_bug.cgi?id=1771862

Original post - sveltejs/vite-plugin-svelte#400 (comment)