google chrome debugger in visual studio "site cannot be reached localhost refused to connect"

Question

I am currently trying to open a html file written in visual studio in google chrome browser and run Google Chromes debugging extension in visual studio

the following is the .json file and i am using the first configuration

 {
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }
]

but when it open in google chrome i recieve the error

This site can’t be reached

localhost refused to connect.

Is chrome started as `chrome.exe --remote-debugging-port=9222`? — wOxxOm, Aug 03 '16 at 10:46

score 15 · Answer 1 · edited Sep 25 '17 at 16:36

I had the same issue.

There is a temporary solution that is to add "file": "${workspaceRoot}/index.html" to the launch.json config.

This change will allow you to open your webapp in the Chrome browser, and you will be able to do debugging, break points...however, take into account that the browser will render your project as if it was opeining a local file, and NOT using a webserver environment.

Here is the launch.json config file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}",
            "file": "${workspaceRoot}/index.html"
        }
    ]
}

Alberto S. · Answer 2 · 2017-09-28T09:32:37.883

After spending sometime with VScode debugging, I realized about the following facts:

VScode can debug natively any .js file.
VScode can debug .html & .js files with the help of extensions like "Debugger for Chrome" (you need to apply @Machavity changes for rendering it without live-sever.
If you want to render your .html & .js files as it was a webserver ( similar to as if was being served from Apache ), you will need some node extension like "live-server".

How to debug with "Debugger for Chrome" & "live-server" extension:

Change the configuration options for "Chrome debugger" in the launch.json file, and make the parameter "url" to match the host that the "live-server" will use for rendering: for example, localhost.
Open your index.html file and open the terminal, run "live-server". You can customize the port, host and other settings of the live-server from the command line.
Start the debugger and apply your breakpoints where necessary.

More info: - Debugger for Chrome - Node live-server

I tried this but I keep getting "unverified breakpoint". Any idea what could be wrong? — Mikaal Anwar, Apr 27 '19 at 14:24
I would need more information for helping you on that. Is that a console error? — Alberto S., Apr 29 '19 at 10:48

score 6 · Answer 3 · answered Jun 17 '19 at 14:09

6

Finded out one more option:

run ng serve in terminal
press F5 in vscode to start chrome debugger

answered Jun 17 '19 at 14:09

Kirill Bezmaternykh

133
2
6

score 1 · Answer 4 · edited May 23 '17 at 12:33

Found this related issue which recommends that the port is forwarded to the proper local IP address for your server (it may have changed) and make sure the firewall rules are setup properly on the server.

Another suggested solution based from this link is changing the port number in your project.

Project Properties -> Web -> Servers -> Project Url

You can also follow this workaround from this SO question:

Go to the LAN settings (in Chrome : Tools-> Options-> Under the hood -> Change Proxy setting -> LAN Setting)

There will be a checkbox for "Bypass proxy server for local address"

Tick the checkbox.

On Mac/Apple: Chrome uses system preferences for localhost exclusion:

Go to System Preferences -> Network -> advanced -> Proxy settings

add 'localhost' at the bottom where it says: 'ignore proxy settings for these hosts and domains' (exceptions are separated by a comma)

Hope this helps!

Vincent Tang · Answer 5 · 2017-06-21T19:07:20.213

None of the other solutions worked (related to SO link in question), I didn't try the change hosts file solution. This solution below worked

https://www.webucator.com/blog/2016/06/launch-files-browser-visual-studio-code/

CTRL+SHIFT+P
CTR
"other" → tasks.json
Paste the following code:

{ "version": "0.1.0", "command": "Chrome", "windows": { "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" }, "args": ["${file}"] }

On the index.html file or whatever file your working on, press CTRL+SHIFT+B.

EDIT

This solution is not the best since it requires you to refresh / rebuild all assets everytime you make a change, making it rather slow, especially when you use jquery

EDIT EDIT

For anyone reading this I run windows 10 and tested almost every solution I possibly could on stackoverflow but just ended up using atom + atom-live-server which pretty much took me 5 minutes to install and setup. Setup on how to do it here: https://www.youtube.com/watch?v=xg-W86U6_Ng

score 0 · Answer 6 · answered Apr 10 '19 at 08:13

0

I had the same issue, solved it by starting the server first, and then launch the chrome debugger.

You can't run the chrome debugger on a server that doesn't exist, or has been started.

answered Apr 10 '19 at 08:13

Dler Hasan

133
1
5

Fameless · Answer 7 · 2023-02-11T18:34:55.497

0

Just modify launch chrome configuration and add this one line at the end

{
"name": "no change",
"request": "no change",
"type": "no change",
"url": "no change",
"webroot": "no change",
"file": "${file}"
}

edited Feb 11 '23 at 18:34

answered Feb 11 '23 at 18:32

Fameless

11
5

google chrome debugger in visual studio "site cannot be reached localhost refused to connect"

7 Answers7