I'm trying to debug Vue in a Laravel project using VS Code.
Laravel 8.0, Vue 2.6.12
I already followed the guide at Vue.js website, However, I am getting the error message below in Chrome Console and not able to trigger the breakpoint.
DevTools failed to load source map ...
Could you please help me with the configuration of VS Code debugger?
Please note that I am using Laravel Mix as well.
{
"type": "chrome",
"request": "launch",
"name": "Vuejs: Chrome",
"url": "https://studio.local",
"breakOnLoad": true,
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///*": "${workspaceFolder}/*"
"webpack:///node_modules/*": "${workspaceFolder}/src/node_modules/*"
}
}
I also added mix.sourceMaps() into my webpack.mix.js
Thank you!
UPDATE
The issue with js files is solved. I have a new issue with debugging .vue files. I don't know what rule I need to add in sourceMapPathOverrides section.
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Vuejs: Chrome",
"url": "https://site.local",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///resources/assets/dashboard/js/components/app/layouts/AppDashboardLayout.vue*": "${webRoot}/resources/assets/dashboard/js/components/app/layouts/AppDashboardLayout.vue",
"webpack:///resources/assets/*": "${webRoot}/resources/assets/*", // NOT WORKING
"webpack:///./resources/assets/*": "${webRoot}/resources/assets/*", // WORKS FOR JS FILES
"webpack:///./node_modules/*": "${webRoot}/node_modules/*",
}
}
]
I have a lot of .vue files under different directories. I cannot add a line for each .vue file.
Do you have any idea what I need to do?
Thank you
Related
I'm running into an issue where if I add the "resolveSourceMapLocations" to my launch.json file (see below), then my debug breakpoints show up as unbound (unfilled circles). But if I remove the "resolveSourceMapLocations" section from my launch.json, then debugging works great but I get a "Could not read source map ... " error and my form resolver won't work for AJV.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch React App",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**"
]
}
]
}
I have these entries in my package.json file:
"react": "^18.2.0"
"react-hook-form": "^7.41.5",
"ajv": "^8.12.0"
"#hookform/resolvers": "^2.9.10"
I've tried different implementations of the "resolveSourceMapLocations" entry to no avail. Wondering if anyone has run into this issue.
Any help at all would be greatly appreciated. I hate having to choose between debugging in VSCode or working AJV resolvers in React Hook Forms.
I'm using only the Visual Studio Code. From CLI I created a solution with 2 projects.
Api
Acceptane tests
Debugging it separately work perfect, but in case when I want to debug a test and an endpoint in the same time - doesn't work.
launch.json file
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": ".NET Core Launch (API)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceFolder}/ContentDownloader.API/bin/Debug/net6.0/ContentDownloader.API.dll",
"args": [],
"cwd": "${workspaceFolder}/ContentDownloader.API",
"stopAtEntry": false,
"requireExactSource": false,
"serverReadyAction": {
"action": "openExternally",
"pattern": "\\bNow listening on:\\s+(https?://\\S+)"
},
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
{
"name": ".NET Core Attach",
"type": "coreclr",
"request": "attach"
}
]
}
I try do it like:
dotnet run at solution/API/ here
via a Debug Test button I run debugger for particular test (this is an acceptance test, it request to the api and check the results)
at output I have:
...\dotnet\sdk\6.0.100\Microsoft.Common.CurrentVersion.targets(5100,5): warning MSB3026: can't copy "SomeSolution\API\obj\Debug\net6.0\apphost.exe" do "bin\Debug\net6.0\API.exe". The process cannot access the file '...\SomeSolution\API\bin\Debug\net6.0\API.exe' because it is being used by another process. [...\SomeSolution\API\API.csproj]
...because it is being used by another process.
I understand what it means :) but I have no idea or found a way to solve my problem,
I tried to write my own task / launch.json, but all without success
Please advise
I am trying to debug a Vue app using VSC. I have the following launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides":{
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides":{
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
I also added the following vue.config.js file to the root directory of the project
module.exports = {
configureWebpack: {
devtool: 'source-map'
},
devServer: {
port: 8080
}
}
To debug the Vue app, I use "npm run serve" at the terminal, click the "Run and Debug" option on the left side menu, and choose my debug config titled "Launch Chrome against localhost".
I am not able to bind any breakpoints,i.e. the breakpoints are unfilled gray circles within the code.
Not sure what to try next, nothing coming up in online searches on what could be the issue.
you probably have a mismatch in your "sourceMapPathOverrides".
"sourceMapPathOverrides" should point to the root foolder where webpack generated the source-map. You can check this in your chrome dev-tools.
Do the following
1 - Open your chrome dev-tools:
2 - Explore webpack:// most times it get's sourced inside . or src folders. To check this, open a random vue component and it should look like the same as in your vs-code editor, that's the right source-map where "sourceMapPathOverrides" should be pointing.
Bonus
The exact config I was using back then is:
{
"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}/*"
}
}
]
}
Anyways make sure you follow the steps that I listed and see if that fixes it.
I have recently moved over to Vuejs3 and my debugging setup stopped working. The breakpoints don't get triggered. I am using the same config files as before and not sure if something changed with this release.
Debugger for Chrome Extension: v4.12.12
VsCode: 1.56.2
Vue CLI v3
Platform: Ubuntu 20.04.2 LTS
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "vuejs: pwa-chrome",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"name": "vuejs: chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
vue.config.js
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
I had to change my launch.json file to the below. Apparently the pwa- prefix is a way to target VS Code's new JavaScript debugger. See stackoverflow discussion. The old debugger no longer works on this platform.
Hope this will help somebody.
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
I was in similar situation and couldn't find relevant resolutions:
Quick Answer:
After upgrade to VS Code 1.56.2, make sure to remove old breakpoints and create new breakpoint and at-least have 1 breakpoint and launch.json available.
Lengthy details:
I have similar issue for python scripts when I start the "debugger bar" I see it for a couple of seconds the top debugging bar and then it disappears. Bu then no message on the console, nothing. I tried reinstalling VS Code, enabling/disabling extension, various restart.
OS and Version: Mac OSX Version 11.4 (20F71)
VS Code Version: 1.56.2
Extension: Python v2021.5.842923320 by Microsoft
RootCause:
What I did know for sure that I updated my VS Code, and after that this mysterious issue start happening, so when to release log of VS Code 1.56.2. I found below release log
Debug view displayed on break#
The default value of the debug.openDebug setting is now
openOnDebugBreak so that on every breakpoint hit, VS Code will open
the Debug view. The Debug view is also displayed on first session
start.
So VS code Version 1.56 release, debugger will only show when at-least 1 breakpoint is found. However, looks like there is issue with their internal code checking for historical breakpoint data after VS Code upgrade..
https://code.visualstudio.com/updates/v1_56#_debug-view-displayed-on-break
Add 2 paths in the sourceMapPathOverrides. It is working for me.
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
}
Works after removing sourceMapPathOverrides:
// "sourceMapPathOverrides": {
// "webpack:///src/*.vue": "${webRoot}/*.vue",
// "webpack:///./src/*.js": "${webRoot}/*.js",
// }
Context:
I am working on a React.js app that uses Webpack, and I'm using VS Code as my editor.
The Webpack config is specifying inline-source-map as its devtool option. but I am using hot reloading, too. So, source maps actually come into the browser via this webpack:// protocol.
I am using the following launch.json config:
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url" : "https://myapp.local/", // This is not the real app URL
"trace" : true,
"sourceMaps": true,
"webRoot": "${workspaceRoot}/build",
"sourceMapPathOverrides": {
"webpack:///*" : "${webRoot}/*"
},
"preLaunchTask" : "development",
"internalConsoleOptions": "openOnSessionStart",
"smartStep": true,
"skipFiles": [
"node_modules/**",
"extensions:"
]
}
and I'm using this tasks.json.
Problem
So this mostly works well, except when I put a breakpoint somewhere, it opens the tab in a new tab marked as read-only inlined content from source map:
I just want to be able to debug and work on my files directly!
This is because VC can't find the sources on the file system, so it resorts to using the copy it got from the web server.
This is typical in projects that span both server and client side code, and as a result, the web (HTML/JS/CSS) root is nested inside the workspace root. It can be easily fixed:
in VC, open the root folder of your project. go to "File -> Save workspace as" and save the workspace. Going forward always use the workspace (rather than folder) to enter your project.
In launch.json, set the webRoot value to reflect the relative path of the webRoot (typically folder with index.html). If your webRoot is under "UI", then it should look like this:
"webRoot": "${workspaceFolder}/UI"
I got it working with this launch.json config. Hopefully it helps you.
{
"name": "Launch localhost",
"type": "chrome",
"request": "attach",
"url": "http://localhost:8080",
"port": 9222,
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": { "webpack:///./src/*": "${workspaceFolder}/src/*" },
"sourceMaps": true,
}
I was running into the same issue remote debugging Python, thanks the two above answers I was able to solve it.
as SimbalCoder suggested I saved the workspace. I suppose this is needed to set your workspace folder path.
I then modified my launch.json as such:
{
"name": "Python: Remote Attach",
"type": "python",
"request": "attach",
"connect": {
"host": "localhost",
"port": 5678
},
"pathMappings": [
{
"localRoot": "${workspaceFolder}/Scripts/MyScripts/"
}
],
}
Now the pathMappings are pointing to the correct file and upon debugger entry it is opening the correct file.