How do I debug HTML and JavaScript together in VSCode (Visual Studio Code)?

Question

I want to run and debug an html page with a javascript file in a mini website when I hit F5.

How do I configure VSCode to open the html page in the browser and then allow me to set breakpoints in the javescript file which will be triggered by my interaction with the app in the browser?

In Visual Studio this would "just work", because it fires up its own web server, IIS Express. In VSCode I'm not sure how I set up launch.json and/or tasks.json to create a simple node.js web server and serve index.html.

I have seen some examples of debugging javascript apps, for example this launch.json:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch Bjarte's app",
            "type": "node",
            "program": "app.js",
            "stopOnEntry": true,
            "args": [],
            "cwd": ".",
            "runtimeExecutable": null,
            "runtimeArguments": [],
            "env": {},
            "sourceMaps": false
        },
        {
            "name": "Attach",
            "type": "node",
            "address": "localhost",
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

This will run the js file, but I don't understand how I can interact with the app.

Vlad Macovei · Accepted Answer · 2024-05-09 22:33:51Z

28

Update 2024: The suggested extension is deprecated as m5c states in the comments. There is a vscode plugin called "Microsoft Edge Tools for VS Code" that offers the possibility to open a web page as a vscode tab with dev tools integrated. Or one could try the way m5c suggested.

It is now possible to debug Chrome web pages in vscode via Chrome remote debugging with a extension released by Microsoft. Debugger for Chrome

As you can see from that page there are two modes of debugging, Launch and Attach. I only managed to use the Attach mode, probably because i don't have a server running. This extension has all important debug tools functional: local variables, breakpoints, console, call stack.

Another reason to revisit vscode is that it now has IntelliSense support for ECMAScript 6, which displays methods not visible in other "IntelliSense like" solutions I've tried, like SublimeCodeIntel or the latest version of WebStorm.

edited May 9, 2024 at 22:33

answered Dec 20, 2015 at 20:23

Vlad Macovei

8941 gold badge11 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

m5c Over a year ago

It seems as of 2024 this plugin is deprecated, and VS Code provides a bundled solution. The official documentation suggests the command: debug: open link code.visualstudio.com/docs/nodejs/browser-debugging

Bjarte Aune Olsen · Accepted Answer · 2015-06-28 20:56:24Z

22

It seems what I want to do is not possible in VSCode (yet?). My solution at the moment, is to use the node package live-server. Install with

> npm install -g live-server

Then open VSCode, right-click any file in the root folder of your project and select "Open in Console". Then type

> live-server

to start a server with your project as root folder. Live-server will open your default browser and also monitors your project folder for any file changes, and reloads the html page every time you do any changes.

I should mention that my solution using live-server doesn't allow me to debug my app in VSCode, only run it in the browser. I am debugging in Chrome.

edited Jun 28, 2015 at 20:56

answered Jun 28, 2015 at 10:29

Bjarte Aune Olsen

3,3704 gold badges27 silver badges39 bronze badges

Comments

Hellonearthis · Accepted Answer · 2019-03-16 00:04:18Z

13

Like others have said you install this:

You can use https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

And if you are not running a localhost but some HTML and JavaScript you can use this launch.json code.

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

}

answered Mar 16, 2019 at 0:04

Hellonearthis

1,7621 gold badge18 silver badges29 bronze badges

1 Comment

aamarks Over a year ago

Note that there is a similar solution using the Debugger for Firefox if you prefer.

Binary Galaxy · Accepted Answer · 2019-06-05 00:45:38Z

3

I didn't want to run a server just for some HTML and JavaScript (unlike a similar example) this VS Code launch configuration along with the 'Debugger for Chrome' extension did the trick on my Windows 10 machine:

  {
     "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch HTML file",
                "type": "chrome",
                "request": "launch",
                "file": "${file}"
            }
        ]
    }

answered Jun 5, 2019 at 0:45

Binary Galaxy

594 bronze badges

1 Comment

razimbres Over a year ago

Thanks for the hint, That's what I was looking for.

Brian Tompsett - 汤莱恩 · Accepted Answer · 2015-06-26 17:28:39Z

2

VSCode will use node to launch your app, which means your app is running on some PORT. You can interact with your app by visiting http://localhost:PORT/ If you set a breakpoint in app.js it should be hit once you visit your site that is running local via node. Here is a nice demo https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

edited Jun 26, 2015 at 17:28

Brian Tompsett - 汤莱恩

5,92772 gold badges63 silver badges135 bronze badges

answered Jun 26, 2015 at 15:48

Isidor Nikolic

2,7772 gold badges15 silver badges11 bronze badges

1 Comment

Bjarte Aune Olsen Over a year ago

Thanks for your reply, but I didn't understand how to use the information in the video to run a node.js server displaying a HTML file. The problem I have with this and other guides I have seen, is that they create the whole site using only JavaScript, but I want to create a simple HTML page with just a little JavaScript added.

Jan · Accepted Answer · 2019-07-03 11:47:55Z

1

In case you have # in path like C:\C#\mypage.htm, you may use FF & ex. fileBasename or Similar variable - does not work in Chrome:

.vscode\launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch HTML file",
            "type": "firefox",
            "request": "launch",
            "file": "C:/C%23/${fileBasename}"
         }
    ]
}

Or simple full path tested with node.js:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/${fileBasename}"
        }
    ]
}

answered Jul 3, 2019 at 11:47

Jan

2,2463 gold badges19 silver badges30 bronze badges

Comments

Tsar Bomba · Accepted Answer · 2024-11-21 14:01:08Z

1

It's pretty simple as of 2024. Add this to your launch.json, open the file you want to debug, and hit F5.

    {
        "name": "HTML Current File",
        "type": "chrome",
        "request": "launch",
        "file": "${relativeFile}",
    }

answered Nov 21, 2024 at 14:01

Tsar Bomba

1,1266 gold badges31 silver badges65 bronze badges

Comments

Carlos Alberto · Accepted Answer · 2025-05-02 13:07:38Z

0

This extension Debugger for Chrome (https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) has been deprecated as Visual Studio Code now has a bundled JavaScript Debugger (js-debug) that covers the same functionality, and more (debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, Blazor, React Native) !

To use with node.js read these: https://code.visualstudio.com/docs/nodejs/nodejs-debugging.

answered May 2 at 13:07

Carlos Alberto

11 bronze badge

Comments

Iván Gómez · Accepted Answer · 2017-12-31 16:55:44Z

-2

You can use https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

In the launch.json you just have to pu the url value of the server that you are using and then you can debug your html + js with your editor visual studio code

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:8081",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

answered Dec 31, 2017 at 16:55

Iván Gómez

5411 gold badge4 silver badges9 bronze badges

Collectives™ on Stack Overflow

How do I debug HTML and JavaScript together in VSCode (Visual Studio Code)?

9 Answers 9

1 Comment

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related