Issue encountered while attempting to execute HTML files using Visual Studio Code

While working on the CSS for my website, I accidentally triggered a JSON file to open instead of running any of my HTML files. As a result, every time I attempt to run an HTML file, a new tab opens with a message stating "unable to connect to local host." Even when trying to run previous projects, I encounter the same issue of opening a JSON file instead. Is there a solution to this problem?

I attempted to fix the issue by reinstalling VS Code, but unfortunately, that did not resolve the issue.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: http
    //go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
    
        
        {
            "command": "npm start",
            "name": "Run npm start",
            "request": "launch",
            "type": "node-terminal"
        },
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },
    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "chrome",
        "webRoot": "${workspaceFolder}"
    },
    ]
}

Answer №1

If you want to properly execute an HTML file, simply modify the JSON section below:

{
    "name": "Launch Chrome",
    "request": "launch",
    "type": "chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
}

to:

{
    "name": "Launch Chrome",
    "request": "launch",
    "type": "chrome",
    "file": "${workspaceFolder}/index.html"
}

Alternatively, you can utilize a local server such as XAMPP to run an HTML file with the URL http://localhost/index.html

Answer №2

The configuration for Launch Chrome specifies port 8080, while the debugger is set to attach to port 9222 in Attach to Chrome. This difference could be causing the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering difficulties with the mobile display of a Wordpress theme

I am currently working with the megashop theme on WordPress and I have a few queries that need addressing: Is there a way to modify a specific setting exclusively for views smaller than desktop size, without impacting the desktop view? For example, the m ...

Markdown automatically converts Jekyll YAML front-matter into an <hr> tag

My Jekyll YAML header information is not being parsed correctly by the GitHub Pages server. The Markdown file for my blog located under _posts is titled 2014-08-28-just-build-my-blog-site.md, and it looks like this: --- layout: post title: just build my b ...

Can you style a radio button input using only CSS without a label?

<input id="customize1" class="customize1" name="test" type="radio" checked="checked"> <input id="customize2" class="customize2" name="test2" type="radio"> Can these two elements be styled without directly targeting their labels, using only CSS ...

Utilizing BeautifulSoup for Web Scraping (handling missing values during the scrape)

I have been facing two challenges while trying to scrape data from a realtor website using BeautifulSoup. These issues have proven to be quite tricky: Challenges: After running my code snippet, I noticed that some date values are missing in the dataframe ...

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

Is Internet Explorer freezing when appending the jQuery Library with document.write?

Similar question: Why is splitting the <script> tag necessary when using document.write()? I have this snippet of code on my webpage : var print_popup = window.open("", "Booking", "width=950,height=680, scrollbars=1") ...

Changing class in jQuery ignores CSS style

I have a id="header" div that initially has css rule: padding: 25px 0;. I want to decrease the padding of this div when scrolling down the page. $(document).ready(function() { var headerID = $("#header"); $(this).scroll(function() { if (!$(this).s ...

"Step-by-step guide on creating a web app with a transparent background while simultaneously running other processes

Would love to create a web application for real-time debugging similar to "android->developer options->show touch data" or "android->developer options->show CPU usage". Unfortunately, I have not been able to find a suitable method using HTML5 ( ...

Element imitating the edge of the screen extending to the edge of the container

Looking to customize a website design (utilizing bootstrap 4) with a gradient line that starts from the title and stretches all the way to the left edge of the container. While I have managed to set this up, the full gradient effect is not visible. To addr ...

Using html data attributes to encode JSON data with strings

Looking for a way to pass data to JavaScript, I decided to create a template tag as shown below: from django.utils.safestring import mark_safe from django import template import json register = template.Library() @register.simple_tag def mydata(): r ...

The form fails to transmit information when using enctype=multipart/formdata

I am facing an issue with my PHP form that has 2 upload inputs on localhost. Whenever I set the enctype of the form to multipart/form-data, it fails to send any information. Upon checking, both $_FILES and $_POST were showing as Array() and empty. Here is ...

Hiding a div upon loading and then revealing it with radio buttons: A step-by-step guide

I am currently working on improving my web development skills by creating a mock-ice cream shop website that does not exist in reality. I am facing a challenge with the form to order ice cream, where I need the deliveryDiv and pickupDiv divs within the for ...

Temporary redirection of external links page

There is a specific feature I am trying to implement on my website, but I am having trouble figuring out how to make it work seamlessly. When a user connects to my website and starts navigating through the menus, I want them to be redirected to a specific ...

HTML View of JSON Object Hierarchy

Hello, I have been trying various methods but am struggling to figure out how to display the following JSON object as a tree HTML view with ul li items using JavaScript. Can anyone help me with this? [ { "CategoriesModelId": 7, "Name": "Parent ...

What is the best way to extract information from a JSON.stringify output?

I am having trouble decoding JSON data and need assistance. I am using the following function in .NET to encode JSON: function(response){ var jsonString = JSON.stringify(response.newhtml); //stringify the JSON created //Send the JSON data to the ...

"Enhance your HTML table by selecting and copying cell values with a simple click and CTRL +

I stumbled upon a fantastic script for highlighting HTML table rows and it's working perfectly: I decided to modify the onclick event to onmouseover and included additional code to select a cell by clicking on it. Now I can select, check which one is ...

Retrieve all HTML dependencies, such as JavaScript and CSS files, using the same method as a web browser

I am currently working on a Single Page Application (SPA). My main objective is to evaluate the performance of the application using . Given that the application is an SPA, I want to simulate a scenario where all static content is loaded when a user firs ...

Tips on centering text within child elements of a flexbox using the align property

.cnt { display: flex; } .one { background: #ff0000; width: 300px; } .two { background: #00ff00; flex: 1; } <div class="cnt"> <div class="one"> Center me </div> <div class="two"> And me </div> </d ...

Using gradient colors for the background on the ::selection pseudo-element

Can you apply a gradient color to CSS ::selection? I tried using the following code: ::selection { background-image: -webkit-linear-gradient(left, #ee4037 0%, #eb297b 100%); } However, it did not have the desired effect. ...

Utilizing external loops in varying scenarios within one website (WordPress)

I am currently facing a dilemma with my theme where I have a blog page and a homepage without a blog loop. I am interested in adding some blog posts to my homepage, specifically the most recent ones. Currently, I have used the blog page as a template for ...