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?
Related
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.
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}"
}
]
}
I am just trying to add some basic configuration to my launch.json file in vscode, but I am getting an error as Property args is not allowed. Below is my configuration.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "index",
"args": [
"src/index.ts"
],
"cwd": "${workspaceFolder}"
}
],
"compounds": []
}
That was a silly mistake. According to this doc
VS Code debuggers typically support launching a program in debug mode
or attaching to an already running program in debug mode. Depending on
the request (attach or launch) different attributes are required and
VS Code's launch.json validation and suggestions should help with
that.
So when I changed my request to launch from attach, everything was perfect. Only the request type launch supports the configuration args.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "index",
"args": [
"src/index.ts"
],
"cwd": "${workspaceFolder}"
}
],
"compounds": []
}
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.