I am trying to build a website on VS Code however when I go to run a prototype VS Code creates the launch.json file and localhost refuses to connect for port 8080, my firewall is disabled, I have no active proxies, I've tried everything. Then I switched from port 8080 to 5000 which is an open port according to my Mac but then it's just access denied you don't have authorisation stuff. The only open ports I can find on my network are 5000 and 7000.
I have tried opening a port, switching ports, disabling firewalls, deactivating proxies, deleting VS Code, resetting my MacBook, and deleting the launch.json file.
Below is what is in my launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: /?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5000",
"webRoot": "${workspaceFolder}"
}
]
}
This is my index.html file:
<!DOCTYPE html>
<html>
<title>
</title>
<head>
<link rel="stylesheet" href="styling.css">
</head>
<body>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</ul>
</body>
</html>
and my stylesheet:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.a{
text-decoration: none;
padding: 15px;
}
.li{
display: inline;
}
.ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Here's one error message from VS Code's terminal:
Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/neterror.rollup.js.map: Unsupported protocol "chrome-error:"
Right now Chrome says error 503.
I am trying to build a website on VS Code however when I go to run a prototype VS Code creates the launch.json file and localhost refuses to connect for port 8080, my firewall is disabled, I have no active proxies, I've tried everything. Then I switched from port 8080 to 5000 which is an open port according to my Mac but then it's just access denied you don't have authorisation stuff. The only open ports I can find on my network are 5000 and 7000.
I have tried opening a port, switching ports, disabling firewalls, deactivating proxies, deleting VS Code, resetting my MacBook, and deleting the launch.json file.
Below is what is in my launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5000",
"webRoot": "${workspaceFolder}"
}
]
}
This is my index.html file:
<!DOCTYPE html>
<html>
<title>
</title>
<head>
<link rel="stylesheet" href="styling.css">
</head>
<body>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</ul>
</body>
</html>
and my stylesheet:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.a{
text-decoration: none;
padding: 15px;
}
.li{
display: inline;
}
.ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Here's one error message from VS Code's terminal:
Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/neterror.rollup.js.map: Unsupported protocol "chrome-error:"
Right now Chrome says error 503.
Share Improve this question edited 6 hours ago jonrsharpe 122k30 gold badges267 silver badges474 bronze badges asked 6 hours ago brydiebrydie 1 New contributor brydie is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.1 Answer
Reset to default 0Your launch.json configuration tells VS Code to launch Chrome with the URL http://localhost:5000 (along with some stuff to link to the browser's debugger and map URLs onto the source code in the project — things that don't matter until you get the basics up and running).
It doesn't tell VS Code to run a web server. You need to take care of that yourself (e.g. by setting up Apache HTTPD, Nginx, VS Code Live Server, or php -S ...).
Since you are (now) getting "Access denied" rather than "This site can’t be reached" it sounds like you already have a web server running on that port, but it needs authentication.
Either it is a web server that is hosting the files you want to test (in which case you need to figure out how to log in or how to disable the AuthN/AuthZ in its configuration) or its a completely different web server and you likely should be setting up a different server on a different port for your testing.