13

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.

Community
  • 1
  • 1
BigL
  • 165
  • 1
  • 2
  • 15

7 Answers7

15

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.
  • 1,805
  • 23
  • 39
John VanZwieten
  • 427
  • 4
  • 12
6

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

Alberto S.
  • 1,805
  • 23
  • 39
6

Finded out one more option:

  1. run ng serve in terminal
  2. press F5 in vscode to start chrome debugger
Kirill Bezmaternykh
  • 133
  • 2
  • 6
1

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:

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

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

  3. Tick the checkbox.

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

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

  2. 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!

Community
  • 1
  • 1
abielita
  • 13,147
  • 2
  • 17
  • 59
0

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

Vincent Tang
  • 3,758
  • 6
  • 45
  • 63
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.

Dler Hasan
  • 133
  • 1
  • 5
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}"
}
Fameless
  • 11
  • 5