I have written a CLI app that helps me to deploy code from code.html to a specified URL address by clicking F5 (it's configured in launch.json thorugh Powershell extension)
That command deploys my code, then opens a Chromium instance with the target page on which the code starts to run.
I want to debug this code (it's simply JavaScript embedded in HTML) in my local code.html file (setting breakpoints etc).
To do that, I have configured the described task as a prelaunchTask and then added a configuration that attaches a debugger to my running Chromium when it's ready (See below).
Everything is super cool, the browser attaches fine, but I simply can't map my local code.html to a code file(s) automatically generated at the specified URL location, because my code is not running in the same page I wrote in, but it's embedded into a remote page, which is autogenerated, i.e. I only know the URL address where it runs.
Is there a way to map the code.html file to a remote URL, so I could debug that code while running?
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 1234,
"urlFilter": "https://somewebsite.com*",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "deployment"
}
],
}
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "deployment",
"type": "shell",
"command": "C:\\Something.exe",
"args": [ someargs ]
}
]
}
Related
We can attach vscode to a running browser.
I use Edge and Chrome:
edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
the file launch.json is set like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "attach",
"name": "Attach to browser",
"port": 9222
}
]
}
The take here is.. how to dynamically attach a script file script.js to the running webpage which communicates with the page and debugger?!
Hi I've got a problem to run Chrome Debugger directly in VS Code. I'm working on Linux Mint. This is how my launch.json file looks like:
{
// 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": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"file": "${workspaceFolder}/index.html"
}
]
}
Now i try to run debugger and error message says: Unable to launch browser: "Unable to find Chrome version stable. Available auto-discovered versions are: ["dev"]. You can set the "runtimeExecutable" in your launch.json to one of these, or provide an absolute path to the browser executable."
Following the sugesstion I've added runtimeExecutable to chrome executable like this:
runtimeExecutable:"/opt/google/chrome/google-chrome" and now error message says:
Unable to Attach to the browser.
Google Chrome is installed on my machine version: 83.0.4103.116-1.
Thanks for help in advance
Error
Current Config
I'm also using Chromium on Linux Mint.
I solved the problem with
debug.javascript.usePreview: false in VS settings,
as explained in This answer
You need to add the webroot property too try this
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "${workspaceFolder}/index.html",
"webRoot": "${workspaceFolder}"
},
I am developing a Spring Boot application using Java 12 and Maven.
I can debug the Java code without any problems.
However, I was not able to configure the debugger to also be able to debug the javascript code in the front-end side of the application.
How can I do it?
This is my launch.json file:
{
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8888",
"webRoot": "${workspaceFolder}/src/main/java/resources/static"
},
{
"type": "java",
"name": "CodeLens (Launch) - WexManagerApplication",
"request": "launch",
"mainClass": "wexmanager/br.com.aquario.wexmanager.WexManagerApplication",
"projectName": "wexmanager"
}
]
}
I am trying to run two debuggers at the same time: One for the back-end and one for the front-end, but it doesn't seem to work.
Use a serverReadyAction under your Java launch configuration.
{
"type": "java",
"name": "Launch Dev AppServer",
"request": "launch",
"mainClass": "AppServer",
"projectName": "App",
"serverReadyAction": {
"action": "debugWithChrome",
"pattern": "Started SelectChannelConnector#[0-9]+.[0-9]+.[0-9]+.[0-9]+:([0-9]+)",
"webRoot": "${workspaceFolder}/src/main/resources"
}
}
action specifies the debug environment to use, pattern is a regular expression that will match the console output when the server is ready to accept connections (the port number that the server is listening on should be captured), and webRoot needs to point to the root JavaScript source file location.
This configuration is sufficient if you deploy unprocessed JavaScript but if you use a bundler like webpack you'll also need to create source maps and set the outFiles property appropriately.
Full documentation on configuring the ServerReadyAction JavaScript debug environment here: https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md
I created my app with create-react-app, and run it inside a VM managed by Vagrant. The sources are in the shared /vagrant folder and create-react-app claims out of the box debuggability with VS Code. I'm using VS Code on the host.
However, I'm not sure how to set my Chrome launch configuration for my use case, and no matter what I try I keep getting this message on any breakpoint I set:
breakpoint ignored because generated code not found (source map problem?)
Here's a sample configuration:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://127.0.0.1:3000/",
"webRoot": "${workspaceRoot}",
"sourceMapPathOverrides": {
"/vagrant/*": "${workspaceRoot}/*"
}
}
]
}
Where:
"sourceMapPathOverrides": {
"/vagrant/*": "${workspaceRoot}/*"
}
is really the secret ingredient to make source maps workable for VS Code. This maps the /vagrant/ directory that is normally the root of your project on the VM, to ${workspaceRoot} which is the root of your project on the host, when opened as a directory in VS Code.
A very simple fix, in hindsight.
I am using Visual Studio Code to debug some front-end javascript (for a Wordpress plugin). I am having trouble configuring the launch.json file correctly.
I can launch chrome manually and then attach to it after the fact (using an Attach request), in which case javascript breakpoints work fine fine.
If I launch chrome from within vscode (using the Launch request), it does connect (I see console output) but I don't get my breakpoints firing. I assume there is some setting incorrect in my launch.json file.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Signup Form",
"type": "chrome",
"request": "launch",
"url": "http://myclient.dev/signup-form",
"sourceMaps": true,
"webRoot": "../../..",
"runtimeArgs": [
"--remote-debugging-port=9222"
]
},
{
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222
}
]
}
I've tried whatever I could think of for web root (including the full local path to the web root at 'htdocs' and the relative path you see above. It doesn't seem to care what I put in there, so maybe I'm barking up the wrong tree.
The local project folder is here:
/home/me/code/vagrant-local/www/wordpress-myclient/htdocs/wp-content/plugins/cee-signup-form
On the server, that maps to:
http://myclient.dev/wp-content/plugins/cee-signup-form
In the page 'signup-form' I include the javascript file in question, using its full url.
Obviously, I can manually go the url and then attach every time I want to debug, but having a one-click launch and debug would be far superior.
What am I doing wrong?
Please follow below steps:
Check you have installed "VS Code - Debugger for Chrome" extention.
First Put this code in .vscode/launch.json :
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node",
"port": 9229,
"protocol": "inspector",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "start"],
"console": "integratedTerminal"
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/client/src"
}
],
"compounds": [
{
"name": "Full-stack",
"configurations": ["Node", "Chrome"]
}
]
}
Go to the Debug mode in VS Code and start with 'Full-stack'.
Start npm
Refer this : https://github.com/auchenberg/timey
In my case, on Ubuntu 14.04, it worked after having added
"runtimeExecutable": "/usr/bin/chromium-browser"
I have however to start chrome in advance.
It turns out that it was a bug in VSCode, and it is fixed in the latest version (1.2.1). After updating, I had to do three things.
Update the Chrome Extension
In VSCode, hit CTRL+P to bring up the Command Palette, then:
Extensions: Show Outdated Extensions
At this point it will let you update them. Learn more here: https://code.visualstudio.com/Docs/editor/extension-gallery#_update-an-extension
Edit the launch config
They now require absolute paths for the web root. So, I had to change the webRoot property of the launch.json file to explicitly include the workspace root.
"webRoot": "${workspaceRoot}/../../..",
Close all copies of Chrome before debugging
This is annoying. But it works.