CODEWITHSUNDEEP
debuggingvisual-studio-code
Bjarte Aune Olsen
Bjarte Aune Olsen

Reputation: 3310

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.

Upvotes: 64

Views: 72968

Answers (8)

Tsar Bomba
Tsar Bomba

Reputation: 1106

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

Upvotes: 1

Vlad Macovei
Vlad Macovei

Reputation: 884

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.

Upvotes: 27

Jan
Jan

Reputation: 2249

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

Upvotes: 1

Binary Galaxy
Binary Galaxy

Reputation: 59

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

Upvotes: 3

Hellonearthis
Hellonearthis

Reputation: 1762

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

}

Upvotes: 13

Iván Gómez
Iván Gómez

Reputation: 531

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

Upvotes: -2

Bjarte Aune Olsen
Bjarte Aune Olsen

Reputation: 3310

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.

Upvotes: 22

Isidor Nikolic
Isidor Nikolic

Reputation: 2759

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

Upvotes: 2

Related Questions