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

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.

Answer 1

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.

Answer 2

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.

Answer 3

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"
}
]
}

Answer 4

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

Answer 5

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}"
}
]
}

Answer 6

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}"
}
]
}

Answer 7

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}"
}
]
}