Can VS Code debugging use sourceMapPathOverrides along with serverReadyAction / debugWithChrome? - debugging

When debugging web app server code in VS Code (.NET Core in my case), there is a launch.json configuration option called serverReadyAction to open the web browser, e.g.:
"serverReadyAction": {
"pattern": "^\\s*Now listening on:\\s+(https?://\\S+)" ,
"action": "openExternally"
}
openExternally is one possible action, and debugWithChrome is another. The latter starts a Chrome debug session using the Debugger for Chrome extension. In this mode, a webRoot property can be added that is passed to the Chrome debug session:
"serverReadyAction": {
"action": "debugWithChrome",
"pattern": "^\\s*Now listening on:\\s+(https?://\\S+)" ,
"webRoot": "${workspaceRoot}/wwwroot"
}
The nice thing about this is that now I can hit breakpoints in my C# and my client-side JavaScript - lovely!
However, my JS is actually compiled from TypeScript and bundled (with Webpack in this case). Ordinarily when using the Debugger for Chrome extension, I can tell it about sourceMapPathOverrides. A typical config would be:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "https://localhost:5001",
"webRoot": "${workspaceRoot}/src",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
}
My question is if this is possible when using the a Chrome debug session created by serverReadyAction / debugWithChrome. It's not immediately apparent.

I haven't found a way to pass this option in, but I did see that the Chrome debugger extension has default properties for it:
"sourceMapPathOverrides": {
"type": "object",
"description": "%chrome.sourceMapPathOverrides.description%",
"default": {
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*",
"meteor://💻app/*": "${webRoot}/*"
}
},
https://github.com/microsoft/vscode-chrome-debug/blob/3771e9343c0776be19db6ba4653a7e4e7fdb96a6/package.json
So I can debug my TypeScript so long as my project files match one of those.

Related

Debugging the two project in the same solution in one time

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

vuejs3 debugging on Visual Studio Code not working

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",
// }

Next JS Server Side Default Port for Debugging

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,
}

Don't see projectname.dll for process being debugged in Visual Studio Code

I'm just learning VS Code and Angular, I've been following a tutorial online and trying to debug. After I start the debugger it asks me what process to attach too from a drop down list it provides.
According to the debugger, I should see a 'DatingApp.API.dll' process like the one in the tutorial here, as I've named my project the same as in the tutorial.
but what I see below doesn't have the .dll name, just -bash id
now I get this when I select .Net Core Attach in the debug section, instead of the .Net Core Launch (web) option
When I select .Net Core Launch (web) it automatically attaches to the app, but my question is why don't I see the process name 'DatingApp.API.dll' as an option and see '-bash 1730' instead?
'-bash 1730' is the process so I can connect using it, I'm just curious why it doesn't name it 'DatingApp.API.dll'?
Here is my launch.json file
{
"version": "0.2.0",
"configurations": [
{
"name": ".NET Core Launch (web)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
// If you have changed target frameworks, make sure to update the program path.
"program": "${workspaceFolder}/DatingApp.API/bin/Debug/netcoreapp2.2/DatingApp.API.dll",
"args": [],
"cwd": "${workspaceFolder}/DatingApp.API",
"stopAtEntry": false,
"launchBrowser": {
"enabled": true
},
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
"/Views": "${workspaceFolder}/Views"
}
},
{
"name": ".NET Core Attach",
"type": "coreclr",
"request": "attach",
"processId": "${command:pickProcess}"
}
]}
It's a little tricky, if you type in the search DatingApp.API it will show you DatingApp.API.exe as the only result, or at least that's what I got when tried. You can attached to it too.
And Voilá! Now you can debug your C# app.

Breakpoints and debugging statements open "read-only inlined content"

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.

Resources