fearnycompknowhow / vue-typescript-debugger

vue-typescript-debugger

Project setup

If the codebase appears broken, try installing the packages using npm ci instead of npm i.

Almost all of the issues developers encounter when using this codebase stem from (sub)package versions that differ from the ones used in this project. npm ci will ensure that only the exact package versions that are listed in the package-lock.json file are installed.

Open Chrome in Debug Mode

There are two seperate launch configs based on which version of the Vue CLI you are using (this codebase uses Vue CLI v5).

While on the Debug screen, you can change which launch configuration you want to use with the dropdown that is adjacent to the Start Debugging button.

Compile and hot-reload for development

npm run serve

npm run start

Compile and minify for production

npm run build

vue-typescript-debugger's Issues

TypeError: SourceMapConsumer.with is not a function

Hi,

thanks for your blogpost here https://ckhconsulting.com/vue-typescript-debuggers/
I had really success with all of your steps, except the last one.
I'm working on a ionic vue project and get an error:

TypeError: SourceMapConsumer.with is not a function

when running
ionic serve
(which is nothing else than
vue-cli-service serve

Do you have an idea what to change or to do?

here is the complete error feedback
`$ ionic serve

vue-cli-service serve
[vue-cli-service] INFO Starting development server...
[vue-cli-service] ERROR TypeError: SourceMapConsumer.with is not a function
[vue-cli-service] TypeError: SourceMapConsumer.with is not a function
[vue-cli-service] at /Users/rico/_repos/99v/vantcode-clubnews-vue-app/vue.config.js:67:74
[vue-cli-service] at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/rico/_repos/99v/vantcode-clubnews-vue-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), :28:17)
[vue-cli-service] at AsyncSeriesHook.lazyCompileHook (/Users/rico/_repos/99v/vantcode-clubnews-vue-app/node_modules/tapable/lib/Hook.js:154:20)
[vue-cli-service] at Compilation.finish (/Users/rico/_repos/99v/vantcode-clubnews-vue-app/node_modules/webpack/lib/Compilation.js:1253:28)
[vue-cli-service] at /Users/rico/_repos/99v/vantcode-clubnews-vue-app/node_modules/webpack/lib/Compiler.js:672:17
[vue-cli-service] at _done (eval at create (/Users/rico/_repos/99v/vantcode-clubnews-vue-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1)
[vue-cli-service] at eval (eval at create (/Users/rico/_repos/99v/vantcode-clubnews-vue-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), :32:22)
[vue-cli-service] at /Users/rico/_repos/99v/vantcode-clubnews-vue-app/node_modules/webpack/lib/Compilation.js:1185:12
[vue-cli-service] at /Users/rico/_repos/99v/vantcode-clubnews-vue-app/node_modules/webpack/lib/Compilation.js:1097:9
[vue-cli-service] at processTicksAndRejections (node:internal/process/task_queues:76:11)
[vue-cli-service] node:internal/process/promises:227
[vue-cli-service] triggerUncaughtException(err, true /* fromPromise */);
[vue-cli-service] ^
[vue-cli-service] RpcIpcMessagePortClosedError: Cannot send the message - the message port has been closed for the process 52135.
[vue-cli-service] at /Users/rico/_repos/99v/vantcode-clubnews-vue-app/node_modules/@vue/cli-plugin-typescript/node_modules/fork-ts-checker-webpack-plugin-v5/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:47:47
[vue-cli-service] at processTicksAndRejections (node:internal/process/task_queues:80:21) {
[vue-cli-service] code: undefined,
[vue-cli-service] signal: undefined
[vue-cli-service] }

[ERROR] vue-cli-service has unexpectedly closed (exit code 1).`

missing "original" variable initiation

Hi, your blog post helped me a lot as I head the same struggle as you did (vue3, typescript, SFCs and none of the other suggested configs helped). I wasn't able to get it to fully work yet, but I wanted to get some help back.

I think you're missing the initiation of the "original" variable:

I suggest to add a

let original = undefined;

to yield

Issue with getIndexOfScriptTag

Thank you very much with your blogpost!
I followed your steps and it works like a charm with my project, mostly.
But not all files got accurate sourcemap, some files got a deviation of one line.
After some debugging I found

function getIndexOfScriptTag(sourceFile) {
  const lines = sourceFile.match(/.+/g);

This match will ignore all empty lines in the file, which will cause trouble.
And the offset length isn't accurate, the result should minus 1 before return.
Your example file got a empty line between template section and script section, which accidently give you an accurate result. But if you create a .vue file with no empty line between template section and script section, or even with some empty lines in template section, the generated source map will got a deviation.

I think this function should be modified like this:

function getIndexOfScriptTag(sourceFile) {
    const lines = sourceFile.split('\n');
    let indexOfScriptTag = 0;

    for (const line of lines) {
        ++indexOfScriptTag;
        if (/<script/.test(line)) break;
    }

    return indexOfScriptTag - 1;
}