Debugging web pages

Debugging TypeScript, which is running within a web page in VSCode, requires a little more setup. VSCode uses the Chrome debugger to attach to a running web page. To enable debugging web pages, we will firstly need to add a Debug configuration to our launch.json file. Luckily, VSCode has a toolbar command for this, and will generate a launch configuration for us. Select the Debug | Add Configuration menu option, and then select the Chrome Attach option. This will modify our launch.json file as follows:

"configurations": [ 
    { 
        "type": "chrome", 
        "request": "attach", 
        "name": "Attach to Chrome", 
        "port": 9222, 
        "webRoot": "${workspaceFolder}" 
    }, 
    { 
        "type": "node", 
        ... 
    } 
]

This launch option is named Attach to Chrome, and will attach to a running instance of Chrome using the debug port 9222. Save the launch.json file, and create an HTML page named index.html at the root directory of the project, as follows:

<html> 
    <head> 
    <script src="helloweb.js"></script> 
    </head> 
    <body> 
        hello vscode 
        <div id="content"></div> 
    </body> 
</html>

This is a very simple page that loads the helloweb.js file, and displays the text, hello vscode. Our helloweb.ts file is as follows:

window.onload = () => { 
    console.log("hello vscode"); 
};

This TypeScript code simply waits for the web page to load, and then logs hello vscode to the console.

The next step is to fire up Chrome using the debug port option. On Linux systems, this is done from the command prompt, as follows:

google-chrome --remote-debugging-port=9222

Note that you will need to ensure that there are no other instances of Chrome running in order to use it as a debugger with VSCode.

Next, load the index.html file in the browser by using Ctrl+O, and selecting the file to load. You should see the HTML file rendering the hello vscode text.

Now, we can go back to VSCode, click on the debugging icon, and select the Attach Chrome option in the launcher dropdown. Hit F5, and the VSCode debugger should now be attached to the running instance of Chrome. We will then need to refresh the page in Chrome in order to start debugging:

With a slight tweak to our launch.json, we can combine these manual steps into a single launcher, as follows:

{ 
    "name": "Launch chrome", 
    "type": "chrome", 
    "request" : "launch", 
    "url" : "file:/// ... insert full path here ... /index.html", 
    "runtimeArgs": [ 
        "--new-window", 
        "--remote-debugging-port=9222" 
    ], 
    "sourceMaps": true 
}

In this launch configuration, we have changed the request property from attach to launch, which will launch a new instance of Chrome, and automatically navigate to the file path specified in the url property. The runtimeArgs property also now specifies the remote debugging port of 9222. With this launcher in place, we can simply hit F5 to launch Chrome, with the correct URL and debugging options for the debugging of HTML applications.

上一章目录下一章