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

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.

Solution

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.