Visual Studio Code debugger with Chrome refused to connect to localhost

Question

I've tried several suggestions on other posts to no avail.

I have a 9 month old project that no longer shows in the browser from F5 debugging in vs code.

I set up a brand new simple project with an index.html file to try to get Visual Studio code to launch it in a Chrome browser window.

I keep getting an error page in chrome that says:

This site can’t be reached localhost refused to connect. Did you mean http://localhost8000.com/? Search Google for localhost 8000 ERR_CONNECTION_REFUSED

launch.json:

    {
    // 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": "Launch Chrome against localhost",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

index.html:

hello world!!!!!

Any help would be greatly appreciated!

please look at my answer for the similar question here, https://stackoverflow.com/a/58249189/4387942 — Mohit, Oct 05 '19 at 14:30
There is already a question submitted which was posted earlier than yours. — RW77, Aug 17 '21 at 02:05

score 42 · Accepted Answer · answered Oct 06 '18 at 23:51

42

If anyone else is having this issue, I solved it by:

1)installing the ritwickdey/vscode-live-server available here: vscode-live-server link

2) restarting vscode

3) clicking the Go Live button at the bottom of the screen

4) getting the server address from the resulting Chrome window (ex: http://localhost:5500/)

5) changing the .vscode/launch.json file to include that server address:

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

6) creating(or editing) a settings.json file with the following json:

{
    "liveServer.settings.port": 5500,
    "liveServer.settings.CustomBrowser" : "chrome",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
    "liveServer.settings.NoBrowser" : false,
    "liveServer.settings.ignoreFiles" : [
            ".vscode/**",
            "**/*.scss",
            "**/*.sass"
    ]

}

7) switching to vscode's debug pane on the left and pushing the green arrow next to "Launch Chrome against localhost"

Hope this helps someone else out!

answered Oct 06 '18 at 23:51

James

913
1
9
14

In my case, step 6, creating settings.json was the missing step, after which I could finally debug. – Jay Borseth Apr 13 '19 at 11:23
1

It sure helped me, I do not understand why the out of the box configuration does not work. I would like to see it open with the web developer tools open. – Moojjoo May 01 '19 at 17:46
I'm currently developing a VueJs App. For the longest time I was using NPM run serve to debug and make changes in real-time. At the surface this limits your debug options to the browser. I stumbled on the [link](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) "Chrome debugger extension" It's a fantastic extension as it let's the developer debug in VSCode. For me it suddenly stopped working for me and realized the reason was that I wasn't running "NPM run serve". Hope that helps others out there. – BDarley Jul 22 '19 at 15:36
@James which settings.json we should modify, shall we crate it on project root foolder, could you please specify the location of the settings.json? Thanks. – Memin Sep 01 '19 at 18:11
After creating the seetings.json in the same directory with launch.json, it worked. Thanks, this post really helped! – Memin Sep 01 '19 at 18:15
1

It makes a new instance without any extensions like lastpass or react dev tools. So am i supposed to install it again ? – AmitJS94 Sep 06 '19 at 07:53
In my case and I am running Angular, I just had to do `ng s -o` in the terminal to start the app BEFORE I run debug. This allowed me to run debug mode and it works now. It seems to be that you have to run the app normally first and then start debug mode for it to work. – Compiler v2 Apr 13 '20 at 20:11
I've tried this on a create-react-app application and all I get is a file browser at the root of the application rather than actually running the app. Any clues? – Peter Nunn Oct 08 '20 at 04:32
My html page is dynamically loading in JS files but I get console errors saying that the loadPageInsecure function is not defined - does live server not support this? e.g. $.getScript('js/auth.js', function () { loadPageInsecure('35', '', '', '#apiContent', function () { LoadPageJS(); }); }); – Jason Mar 30 '22 at 13:58
This should work out of the box. – Kmb40 Aug 17 '23 at 08:43

score 18 · Answer 2 · answered Dec 31 '19 at 22:46

18

For others using VS code to debug Vue it could be as simple as this:

You must have your project running before you start debugging. Contrary to what a user would think, clicking the play button doesn't start your project. It just starts the debugger. The solution for me (using yarn) was running "yarn serve" before starting the debugger. Maybe this is obvious!

answered Dec 31 '19 at 22:46

AJRohrer

925
9
9

1

Actually thats the difference between "launch" and "attach". Launch should start your project – Bernardo Dal Corno Feb 02 '20 at 14:11
1

This solved it for me because I was sure I didn't do this the last time. Must have had a terminal open somewhere with yarn serve running. Thanks! So for all others: try this if you're unsure. – iknownothing Apr 26 '20 at 20:47
ohh man, what a silly thin I missed. Thanks for sharing – Pouya Ataei Mar 29 '22 at 22:38

score 14 · Answer 3 · answered Apr 07 '20 at 07:45

14

If you don't have a web server,You can just change the option "webroot" to "file", and remove the "url" option, like this:

{
"version": "0.2.0",
"configurations": [

    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",            
        "file": "${workspaceRoot}/index.html"
    }
]
}

answered Apr 07 '20 at 07:45

tuchunxiao

151
1
4

1

This helped me the most. What's weird is that with simple index.html files with javascript embedded, VS code launched Chrome just fine with no settings file at all. When I tried a project that had multiple files and .js external to the html file suddenly VS code seemed to require a config file. – shawn1874 Feb 25 '21 at 06:23
1

this shows file not found. If I set `${workspaceRoot}/public/index.html` then it's blank page. How is this supposed to work? – cikatomo Jan 15 '22 at 07:12
@cikatomo I also faces the same problem. – Sreekanth Karumanaghat Jun 06 '23 at 05:02

score 9 · Answer 4 · answered Apr 03 '19 at 04:24

9

For someone wants debug react-app like me. After config as question above. Pls note: Ensure that your development server is running ("npm start").. And then F5 to debugg.

It works with my case.

answered Apr 03 '19 at 04:24

PaPu

731
7
12

I get the debugger running like this, but every break point is disabled by the looks. – Peter Nunn Oct 08 '20 at 04:38

score 4 · Answer 5 · edited Aug 15 '21 at 17:05

4

For me I used the code below the installed a chrome extension for javascript and it worked out fine

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

edited Aug 15 '21 at 17:05

lejlun

4,140
2
15
31

answered Aug 03 '21 at 02:07

Ayonimous Taiwo

41
1

Thanks. I was able to solve the issue with the above fix. – user1613338 Aug 11 '22 at 03:02

score 1 · Answer 6 · answered May 08 '19 at 19:42

1

I use laragon for windows to host my websites locally. For myself I just needed to change the URL to the laragon url and it worked fine

answered May 08 '19 at 19:42

Chad Gregory

118
4
11

What do you mean with the laragon url? The url setup in largon is the same you start by calling localhost in the browser? – Hans Ratzinger Jun 18 '22 at 10:37

score 1 · Answer 7 · answered Oct 28 '20 at 06:52

1

For me, the problem was that the debugger configuration had been reset to launch with Chrome. I switched it to .NET Core Launch and then it worked.

answered Oct 28 '20 at 06:52

AN00

325
4
13

score 0 · Answer 8 · answered Jul 25 '20 at 19:21

I use chrome developer edition, this is the configuration that worked for me:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "${workspaceFolder}/index.html",
            "runtimeExecutable": "YOUR PATH TO THE EXE"
        }
    ]
}

I used the advice of @tuchunxiao, but using the file as url.

Note that this works for experimental JS, but for react, vue, or a production enviroment this is likely not to suit you.

score 0 · Answer 9 · answered Oct 27 '20 at 23:11

0

I opened the .htm file with the Live Server and it worked fine.

Right-click on the file (index.htm in my case)
Choose Open With Live Server

answered Oct 27 '20 at 23:11

Clay Nichols

11,848
30
109
170

score 0 · Answer 10 · answered Dec 08 '21 at 19:51

0

Delete launch.json visible on Explorer tab. Then F5.

answered Dec 08 '21 at 19:51

kamandi

3
2

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 09 '21 at 06:28

score 0 · Answer 11 · answered Jan 03 '22 at 07:53

I solved my problem just by copying and pasting my browser URL into the URL section in the config file which has the value "local host blah blah" and it worked.

I use the same live server as you.

I right clicked on my HTML page and clicked on "open with live server option", when the page loaded I copied the URL into the section I mentioned. Thanks

score 0 · Answer 12 · answered Feb 16 '22 at 16:32

I believe the error that I introduced was unmindfully creating a launch.json file under .vscode/launch.json, with the below default configurations (w/o making head or tail of it)

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Open index.html",
            "file": "c:\\path\\to\\index.html"
        }
    ]
}

Upon removing the file, I could Start Debugging (F5) index.html on my browser

score 0 · Answer 13 · answered Mar 23 '22 at 20:00

0

I change the webRoot and url like this and it works

{
   "type": "chrome",
   "request": "launch",
   "name": "Launch Chrome against localhost",
   "url": "http://localhost/svg/",
   "webRoot": "/"
}

answered Mar 23 '22 at 20:00

matasoy

659
1
6
7

score 0 · Answer 14 · answered Jun 19 '22 at 02:56

For me I just did a simple solution and It worked perefectly.

First, I installed a Live Server by Ritwick Dey.

Select your workspace folder and Go live from the button located at Bottom Right corner.

As you must tried running You must see a .vscode Folder in your workspace or in your rootfolder.

Just **Delete .vscode where you would see a .json file located ** and Restart your Visual Studio Code.

I hope, it works out for you as it did for me.

score 0 · Answer 15 · answered Aug 17 '23 at 08:49

0

Install Live Preview and open a split window inside of vscode. https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

answered Aug 17 '23 at 08:49

Kmb40

2,341
3
18
14

Visual Studio Code debugger with Chrome refused to connect to localhost

15 Answers15

Linked