When attempting to debug JavaScript in Edge with Visual Studio Code, an error message stating 'Failed to load source map for chrome-error...' was encountered

Attempting to troubleshoot JavaScript code in Visual Studio Code is resulting in an error:

Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/edge-elixir-neterror.rollup.js.map: Unsupported protocol "chrome-error:"

The launch.json file contains the following configurations:

{
    // Utilize IntelliSense to explore potential attributes.
    // Hover to see descriptions of existing attributes.
    // For further details, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
       
        {
            "name": "Launch Edge",
            "request": "launch",
            "type": "msedge",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },
        
    ]
}

After attempting to resolve the issue by deleting the .vscode folder and the launch.json file, subsequent attempts to add Microsoft Edge for debugging proved unsuccessful. Upon restarting, a message "Localhost refused to connect" appears, leading to confusion as to why a Chrome error is being encountered when trying to debug using Edge.

Software versions in use are: Visual Studio Code: 1.90.2 Edge: Version 126.0.2592.68

javascriptvisual-studio-codedebuggingmicrosoft-edge

Answer №1

Big shoutout to @Kendrick for pointing me in the right direction. Following his advice, I tested out the launch.json file configuration below and voila! The debugger is now ready to go for any subfolder javascript file.

{
    // 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": "msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:5500/${relativeFileDirname}",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

The keyword to focus on here is relativeFileDirname, which is vital for configuring any browser settings.

Answer №2

Before proceeding, please ensure that the URL http://localhost:8080 contains content and is accessible to you. You have two options to verify:

  1. Try using a different valid URL in the "url" section to determine if the issue lies with VS Code.
  2. Attempt to visit http://localhost:8080 directly in your browser. If it is not reachable, it indicates an invalid URL was used in the "url" section.

In my experience, I only encounter this problem when there is no content present at http://localhost:8080. Substituting it with a valid URL resolves the issue successfully.

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

Can I use npm's jQuery in an old-school HTML format?

I am looking to incorporate jQuery into a project without having to rely on the website or CDN for downloading the library. As someone new to npm, I am curious to know if following these steps would be advisable or potentially problematic down the line. Wh ...

javascriptjqueryhtmlnpm

Conceal the object, while revealing a void in its place

Is there a way to hide an image but keep the containing div blank with the same dimensions? I want it to appear as if no content was there, maintaining the original width and height. For example: http://jsfiddle.net/rJuWL/1/ After hiding, "Second!" appea ...

javascriptjquerycsshtml

Having trouble with the password strength indicator in React-redux?

Hey there, I'm currently working on implementing a progress strength bar for password validation in React. While I've made progress with the code to check the password regex, I'm struggling to understand how to incorporate the password stren ...

javascriptreactjsreduxpasswords

Is it possible for Jaydata relationships to function seamlessly without the need to be

I am attempting to set up a basic model with Parent -> Child relationships (correctly declared and functioning, I believe). This is my approach: var parent = new $data.Types.Parent(); $data.context.Parents.add(parent); parent.Code = 123; var child = ...

javascriptjaydata

Is there a specific plugin that enables dynamic calculations within a django formset?

Looking for a solution: Is there a jQuery plugin available that can perform calculations for a Django formset? The form is dynamic, changing the ID of each field per row whenever the add button is clicked. ...

javascriptjquerydjango

Issues with Angular ngroute: controllers are not functioning properly

In order to route my application with different themes on the same page, I plan to utilize the ngroute module. Here's an example of how I intend to achieve this: <html> <head> <title>Angular JS Views</title> ...

javascripthtmlangularjsngrouteroute-provider

An effective way to determine the size of a browser through javascript

In an effort to enhance the responsiveness of a website, I have included the following code snippet on one of my pages: document.write(screen.width+'x'+screen.height); However, I am encountering an issue where the code displays my screen resolu ...

javascriptjquerybrowser

Tips for clearing out text in a <p> tag with javascript when it exceeds a specific length of 100 characters

Is there a way to automatically truncate text to (...) when it exceeds 100 characters inside a paragraph with the class .class? For instance, if I have a long paragraph like this: <div class='classname'> <p>Lorem ipsum dolor sit ame ...

javascripthtmlcsstypescript

Iterating through children of the target element using the .each() method in jQuery

Currently, I am looping through the elements and extracting the src attribute from the child element. This is the snippet of HTML code that I am working with: <noscript data-alt="super awesome"> <img src="http://farm9.staticflickr.com/8235/85 ...

javascriptjqueryhtml

Creating Class Names Dynamically in Angular 2 Using ngFor Index

Encountering an issue while trying to generate a dynamic class name based on the ngFor loop index in Angular 2. Due to restrictions, I had to use a specific syntax as Angular 2 does not support ngFor and ngIf together on the same element. Given this setup ...

javascripttypescriptangular

Guide to navigating to a different webpage with Node.js

I am a beginner user of NodeJS and I have a specific request. I need assistance with setting up a page redirect from one page to another upon clicking on a link. Any guidance provided will be greatly appreciated. Here is the code snippet: app.js var expr ...

htmlcssnode.jsnpmvisual-studio-code

Get user input from a textbox and use that input to conduct a search on Google

Hi there, I'm currently working on solving this particular problem. I'm attempting to create a HTML page using a form where the user can input a keyword and click on the "Search" button to search for that keyword on Google. I haven't had a ...

javascripthtml

Refresh the Angular view only when there are changes to the object's properties

I have a situation where I am fetching data every 15 seconds from my web API in my Angular application. This continuous polling is causing the Angular Material expansion panel to reset to its default position, resulting in a slow website performance and in ...

javascriptangulartypescriptasp.net-web-apingrx

Check to see if the moment function has been executed and if the resulting output is accurate

I have a function called moment that formats a date received from the server in milliseconds. I am attempting to write tests using Enzyme and Jest to check if the moment function has been called (1), and whether the output of the function matches the expec ...

javascriptreactjsunit-testingjestjsenzyme

Interface key error caused by the TypeScript template literal

Version 4.4.3 of Typescript Demo Playground Example -- interface IDocument { [added_: `added_${string}`]: number[] | undefined; } const id = 'id'; const document: IDocument = { [`added_${id}`]: [1970] } My Attempts: I made sure that id in ...

javascriptnode.jstypescript

Using ng-bind-html does not offer protection against cross-site scripting vulnerabilities

I utilized ng-bind-html to safeguard against cross site scripting vulnerabilities. I came across information about sanitization and engaged in a discussion at one forum as well as another informative discussion. However, I encountered an issue where it di ...

javascriptangularjsxss

How can you convert an epoch datetime value from a textbox into a human-readable 24-hour date format

I have an initial textbox that displays an epoch datetime stamp. Since this format is not easily readable by humans, I made it hidden and readonly. Now, I want to take the epoch value from the first textbox and convert it into a 24-hour human-readable da ...

javascripthtmldatetimemomentjsepoch

the click event fails to trigger when the id or class is modified

Hey there, I'm new to working with jquery and I've encountered a problem. Here's the code snippet: http://jsfiddle.net/8guzD/ $('#test.off').click(function(){ $(this).removeClass('off').addClass('on'); }) ...

javascriptjqueryeventsdom

Implement auto partial page refreshing in ASP.NET without using the UpdatePanel feature

Looking to implement auto partial page refresh in asp.net without sending excessive data through UpdatePanel. Considering using a webservice called by JavaScript instead, but unsure how to trigger it automatically rather than by button click event. Many e ...

javascriptasp.netajax

Error in React Typescript Order Form when recalculating on change

When creating an order form with React TypeScript, users can input the quantity, unit price, and select whether the item is taxable. In this simplified example, only 1 or 2 items can be added, but in the final version, users will be able to add 10-15 item ...

javascriptreactjstypescriptasync-awaitreact-redux