Mastering TypeScript 3 - Third Edition

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 ...