I have a Vue project created with the Vue CLI and I'm having problems with the vue.config.js. I would like to be able to set a breakpoint within the Vue CLI to step through and investigate exactly what's going on.
For example, I'm having issues with the proxy setting and I would like to be able to step through lib/util/prepareProxy.js when I run npm run serve. How would I do this?
Running npm run serve will run vue-cli-service under the hood that is a separate package of Vue itself.
vue-cli-service is running webpack-dev-server under the hood which is running by Node on your terminal (and not JS engine of the browser)
for debugging in node there are several solutions but the simplest one is using --inspect (update: or --inspect-brk) mode of Node.js.
So instead of running npm run serve try running:
node --inspect ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve
Which is the underlying command that is actually running but with --inspect flag. this should solve your problem.
--inspect to --inspect-brk and opened it up in Chromium with about:inspect. Works great.
--inspect or --inspect-brk but I'm not able to use breakpoints in VS Code: getting "unbound breakpoint" message! I launch VS Code debug using: { "version": "0.2.0", "configurations": [ { "type": "pwa-node", "request": "attach", "name": "Attach by Process ID", "processId": "${command:PickProcess}" } ] }There is a bug on windows machines that debugger cannot be attached in some cases (see Unable to attach a debugger while running jest tests)
So I fixed it by editing directly node_modules/.bin/vue-cli-service and adding --inspect-brk argument after calling "node"
if [ -x "$basedir/node" ]; then
"$basedir/node" "--inspect-brk" "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
ret=$?
else
node --inspect-brk "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
ret=$?
fi
exit $ret
I just experienced this issue myself. I found a solution that worked for me here
I haven't used Vue in some time and wanted to start a new project with VUE CLI Version 5, using TypeScript. However, every time I attempted to start the debugger, I received a message saying "We couldn't find a corresponding source location, but found some other files with the same name." After making adjustments to my launch.json, the furthest I would get is a breakpoint being hit in my app.js file.
The solution involves making changes to the vue.config.js file:
//vue.config.js
const { defineConfig } = require('@vue/cli-service')
const fs = require('fs');
const { SourceMapConsumer, SourceMapGenerator } = require('source-map');
module.exports = defineConfig({
configureWebpack() {
return {
devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
plugins: [{
apply(compiler) {
compiler.hooks.thisCompilation.tap('Initializing Compilation', (compilation) => {
compilation.hooks.finishModules.tapPromise('All Modules Built', async (modules) => {
for (const module of modules) {
if (shouldSkipModule(module)) continue;
const pathWithoutQuery = module.resource.replace(/\?.*$/, '');
const sourceFile = fs.readFileSync(pathWithoutQuery).toString('utf-8');
const sourceMap = extractSourceMap(module);
sourceMap.sources = [pathWithoutQuery];
sourceMap.sourcesContent = [sourceFile];
sourceMap.mappings = await shiftMappings(sourceMap, sourceFile, pathWithoutQuery);
}
});
});
}
}]
};
function shouldSkipModule(module) {
const { resource = '' } = module;
if (!resource) return true;
if (/node_modules/.test(resource)) return true;
if (!/\.vue/.test(resource)) return true;
if (!/type=script/.test(resource)) return true;
if (!/lang=ts/.test(resource)) return true;
if (isMissingSourceMap(module)) return true;
return false;
}
function isMissingSourceMap(module) {
return !extractSourceMap(module);
}
function extractSourceMap(module) {
if (!module['_source']) return null;
return module['_source']['_sourceMap'] ||
module['_source']['_sourceMapAsObject'] ||
null;
}
async function shiftMappings(sourceMap, sourceFile, sourcePath) {
const indexOfScriptTag = getIndexOfScriptTag(sourceFile);
const shiftedSourceMap = await SourceMapConsumer.with(sourceMap, null, async (consumer) => {
const generator = new SourceMapGenerator();
consumer.eachMapping((mapping) => {
const {
generatedColumn,
generatedLine,
originalColumn,
originalLine,
} = mapping;
let original = mapping.original;
let name = mapping.name;
let source = sourcePath;
if (originalLine === null || originalColumn === null) {
name = null;
source = null;
}
else {
original = {
column: originalColumn,
line: originalLine + indexOfScriptTag,
};
}
generator.addMapping({
generated: {
column: generatedColumn,
line: generatedLine,
},
original,
source,
name
});
});
return generator.toJSON();
});
return shiftedSourceMap.mappings;
}
function getIndexOfScriptTag(sourceFile) {
const lines = sourceFile.match(/.+/g);
let indexOfScriptTag = 0;
for (const line of lines) {
++indexOfScriptTag;
if (/<script/.test(line)) break;
}
return indexOfScriptTag;
}
},
})
Finally, alter your launch.json, where "my-vue-project" is the name of your project
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch", //launch
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack://my-vue-project/./src/*": "${webRoot}/src/*"
}
}
]
}
The repo looked to have a slight error.
Easy solution 1: Just use the Vue.js devtools, i.e. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
Easy solution 2: Use a debugger statement
<script>
export default {
data() {
return {
message: ''
}
},
mounted() {
const hello = 'Hello World!'
debugger
this.message = hello
}
};
</script>
Difficult solution:
Set or update the devtool property inside vue.config.js:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting Chrome/Firefox: Launch as the environment. Replace content of the generated launch.json with the corresponding configuration:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
}
Set your breakpoint within the Vue CLI.
Run npm serve
Go to the Debug view, select the ‘vuejs: chrome/firefox’ configuration, then press F5 or click the green play button.
Your breakpoint should now be hit as a new browser instance opens http://localhost:8080
