- Google Chrome
- Visual Studio Code (VS Code)
- Live Server Extension for VS Code
Note: The following is a screenshot of the Live Server Extension.
Once installed click on the Go Live button at the bottom right.
You should see a message similar to the following.
Note: The port number can be changed in the settings.json file, in the .vscode directory.
Click on the Run and Debug button in the side bar.
Click on the create a launch.json file link.
Click on the Web App (Chrome) debugger option.
A launch.json file will be generated and stored in the .vscode directory.
The value for the name property can be changed to whatever you like. It will be displayed here.
The value for the file property should be the correct path to your project's index.html file. Please ignore the path in the screenshot, these screenshots were taken from a windows machine
Open the js file and place a breakpoint somewhere by clicking just to the left of a number.
Click, once again, on the Run and Debug button in the sidebar and then click on the Play button.
A new browser window should open and the debugger should pause on the breakpoint.
Note: Notice the variable information on the left in the screenshot above.
The following are the controls for the debugger. From left to right you have the following buttons: Continue, Step Over, Step Into, Step Out, Restart and Stop.
If the line the debugger is paused on is calling a function and you click the Step Into button, the debugger will step into the function code. If instead you click the Step Over button, the debugger will step over the function call and continue onto the next line.
To add a variable to the Watch pane highlight it, right click it and click on Add to Watch.
To remove a variable from the Watch pane click on the x button to the right.
Note: You can also add objects to the Watch pane.