I'm trying to debug a live website that I don't own the code with Chromes Local overrides and the VS Code extension. I can't get it to work. Can I only connect to localhost? How can I get this to work?
I tried two configs:
{
"version": "0.1.0",
"configurations": [
{
"name": "Attach to url with files served from ./out",
"type": "chrome",
"request": "attach",
"port": 443,
"url": "https://notmysite.com/",
"webRoot": "${workspaceFolder}/"
}
]
}
With launching Chrome like this:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
And I tried launching with this config:
{
"version": "0.1.0",
"configurations": [
{
"name": "Launch External Site",
"type": "chrome",
"request": "launch",
"url": "http://notmysite.com",
"webRoot": "${workspaceFolder}"
}
]
}
Related
I use Visual Studio Code and want to run my local HTML and CSS project, but when I do I get this error message.
localhost refused to connect.
and my launch.json file looks like this:
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
Does anyone have any ideas on what I can do?
I am trying to launch HTML multiple files in the same folder, and open them in Chrome (not a new window with every file) in Visual Studio Code. I tried this solution: Multiple Launch Files in Visual Studio Code, but I think, I am missing something.
I always get the message to close my current debug session before starting a new one.
Here is my launch.json file for the folder:
{
// 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": "Chrome1",
"request": "launch",
"type": "pwa-chrome",
"webRoot": "${workspaceFolder}",
"file":"${file}"
},
{
"name": "Chrome2",
"request": "launch",
"type": "pwa-chrome",
"webRoot": "${workspaceFolder}",
"file": "${file}"
},
{
"name": "Chrome3",
"request": "launch",
"type": "pwa-chrome",
"webRoot": "${workspaceFolder}",
"file": "${file}"
}
],
"compounds": [
{
"name": "Chrome1/Chrome2/Chrome3",
"configurations": ["Launch Chrome","Launch Chrome","Launch Chrome"],
"preLaunchTask": "${defaultBuildTask}"
}
]
}
Thanks!
it does open chrome with 3 tab for 3 debug.
{
// 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": "chrome",
"request": "launch",
"name": "Chrome1",
"file": "${workspaceFolder}/a.html"
}, {
"type": "chrome",
"request": "launch",
"name": "Chrome2",
"file": "${workspaceFolder}/b.html"
}, {
"type": "chrome",
"request": "launch",
"name": "Chrome3",
"file": "${workspaceFolder}/c.html"
}
],
"compounds": [{
"name": "Chrome123",
"configurations": ["Chrome1", "Chrome2", "Chrome3"],
}]
}
I have 2 projects (React projects) that I would like to be able to debug at the same time when using VS Code. The launch configurations for the projects are like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Project A",
"url": "http://localhost:3003",
"webRoot": "${workspaceFolder}"
}
]
}
And
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Project B",
"url": "http://localhost:3001",
"webRoot": "${workspaceFolder}"
}
]
}
If I launch any of the projects individually it all works fine. But if I try to launch one while the other is already running I get this:
So the question is, how should I make the setup so I can debug multiple projects in VS Code that use the Debugger for Chrome extension?
I have had the same issue because it worked with an older version of vscode-debgger. I open the folder which contains both project and run it with a config like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Project A and B",
"url": "http://localhost:3001",
"urlFilter": "http://localhost:*",
"pathMapping": {
"http://localhost:3001": "${workspaceFolder}/projectA",
"http://localhost:3003": "${workspaceFolder}/projectB"
}
}
]
}
When Chrome starts you still have to manually open the second tab with http://localhost:3003.
Given answered and solved partially regarding this question, I have now the following launch configurations to debug my react-redux + electron app.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Main",
"program": "${workspaceFolder}/src/main.js",
"protocol": "inspector",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"runtimeArgs": [
"--remote-debugging-port=9229",
"."
],
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
}
},
{
"type": "node",
"request": "launch",
"name": "NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"start"
],
"port": 9229
},
{
"type": "chrome",
"request": "launch",
"name": "Renderer",
"url": "https://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"runtimeExecutable": "C:/Users/[username]/AppData/Local/Programs/Opera developer/launcher.exe",
"runtimeArgs": [
"--remote-debugging-port=9229"
],
"port": 9229
}
],
"compounds": [
{
"name": "All",
"configurations": [
"Main",
"NPM",
"Renderer"
]
}
]
}
So it works as this: the NPM configuration starts the node.js server and then Renderer and Main respectively debugs the front-end part and back-end part.
However, when the compound setting is launched, all of them are executed at one time and both https://localhost:3000/ and election app shows blank screen until the server is completely set up.
For now, it is okay to just reload the webpage and the electron client once the server starts, but I'm just curious if there is a way to make a sequential-launch order to make it further elegant. Any good ideas?
I think you can make your renderer code a little more elegant by doing an attach instead of a launch.
For example I use a compound where I launch the main, and then attach to the renderer with the following (no reload needed).
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch",
"cwd": "${workspaceRoot}/src/app",
"runtimeExecutable": "${workspaceRoot}/src/app/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/src/app/node_modules/.bin/electron.cmd"
},
"runtimeArgs": [
"${workspaceRoot}/src/app",
"--remote-debugging-port=9222"
],
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/src/app/out/**/*.js",
],
"protocol": "inspector",
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Renderer",
"trace": true,
"webRoot": "${workspaceRoot}/src/app",
"sourceMaps": true,
"port": 9222,
"timeout": 60000
},
],
"compounds": [
{
"name": "App Main & Renderer",
"configurations": [
"Launch App Main",
"Attach to App Renderer"
]
}
]
}
Visual Studio Code.
Typescript files are compiled to JavaScript files with sourcemaps.
Generated launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
Chrome is started with parameter: --remote-debugging-port=9222
However I still get
Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222
error in VSCode, when trying to debug with "Attach to Chrome" option.
Using 'urlFIlter' with * as wildcard will fix your problem.
See my answer here for more details.