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.
Related
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 a reccent deno user. Been using node for a long time, switched to deno and am very happy with it. It's really good
However, I have an issue.
Whenever I try to debug a deno file, the vscode debugger starts running for like half a second and then stops, and nothing happens.
It doesnt freeze or anything, it just starts for a moment and stops.
I am using this as launch configuration
{
"version": "0.2.0",
"configurations": [
{
"name": "Deno1",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "deno",
"outputCapture": "std",
"runtimeArgs": ["run", "--inspect-brk", "-A", "${fileName}"],
"port": 9229,
}
]
}
I took it from this post
I should add that I was able to debug this file already, but one day it just started showing this issue i just described without (to my knowledge) any change on my part.
I am trying to debug this file
How can I fix this issue?
To make it work you need to add a "program" field to launch.json and move the path of the file there, which is briefly mentioned in this answer from the post you linked to. But also you need to change "port" to "attachSimplePort":
{
"version": "0.2.0",
"configurations": [
{
"request": "launch",
"name": "Launch Program",
"type": "node",
"program": "${workspaceFolder}/tests/grammar.test.ts",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "deno",
"runtimeArgs": [
"run",
"--inspect-brk",
"--allow-all"
],
"attachSimplePort": 9229,
"outputCapture": "std",
}
]
}
To debug another part of the application just change the path in program, for example to an entrypoint file like main.ts. With --inspect-brk the debugger will first break at the first line of the program and then you can for example continue to a breakpoint with F5 or the continue button in the debugger panel.
(Deno v1.14)
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
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",
// }
I've been trying to debug my server side code in NextJS by marking a breakpoint. I am using VSCode to my development.
Initially, my launch.json was like this.
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
This works fine; however, it does not hit any server side code like getStaticProps, getStaticPaths and getServerSideProps.
I found this blog post that I believe can solve my problem. So I added a script to my package.json, and amend my launch.json. So now it looks like this
package.json
{
"scripts": {
"debug": "node --inspect-brk ./node_modules/next/dist/bin/next"
}
}
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "Launch Next.js",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 3000
}
],
"compounds": [
{
"name": "Debug Next.js + Chrome",
"configurations": [
"Launch Next.js",
"Launch Chrome against localhost"
]
}
]
}
So when I try to run this, I got an error to my Launch Next.js configuration.
I believe this is because I am pointing to an incorrect port. I tried to search what is the default port for server side part of NextJS. But I cannot find one.
I have same problem with setting breakpoint on API, so I took a few hours to figue out what's the real problem. Finally I found the issue:
Because when you run a Nextjs app, Node will first run next script, then next script will spawn a child process which is your own code. Nextjs also automatically set NODE_OPTIONS=--inspect when you use dev mode, but it use different port number and the number changes automatically. The KEY POINT is: The Next script and the child process will have different debugging port number. , That is the reason that you sometimes can't set breakpoints.
There are some senarios:
If you start your server manually in VSCODE terminal by type "npm run dev", VSCODE will
automatically find the debugging ports and you will be fine.
If you start your server outside of VSCODE from a terminal, and then use
attach, VSCODE will only attach one port, usaully only attached to
Nextjs script. That's why you can't set breakpoint in you own code.
If you use launch method to start server in launch.json. Then same
problem will happened like No.2, You can't set your breakpoint.
There is a simple way to solve the problem: Either start server from VSCODE internal terminal or in launch.json, add:
"autoAttachChildProcesses": true,
then you can start debugging by hit F5 and everything going well.
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
},
"autoAttachChildProcesses": true,
}