Sitemap

VS Code debugging for web developer

3 min readAug 18, 2021

A comprehensive guide into debugging web applications inside VS Code

Press enter or click to view image in full size

Debugging in VS Code for web developers.

Press enter or click to view image in full size

image-source: VS-Code website

What is VS Code.

Visual Studio Code is a light weight IDE for developing and debugging web applications or projects that run on javascript.Although by installing extensions you can extend the functionality to support different languages within the IDE. Vs Code is built on electronJs which is a JavaScript framework for building native desktop applications,Which means it comes with full support of running JavaScript applications for web developers.

Electron JS has main process and render process.Main process runs nodeJs in back-end whereas renderer process runs any web application using any web framework in JavaScript.

Intelligence and presets for web development

  • Suggests all the node commands to run directly from package.json file
Press enter or click to view image in full size
  • The Debug tab on the left toolbar helps you to switch to debug mode instantly
Press enter or click to view image in full size
  • Full support for GIT out of the box
Press enter or click to view image in full size
  • Extensions to give more features for the existing IDE which is fully Customisable
Press enter or click to view image in full size
  • Integrated terminal with multiple instances
Press enter or click to view image in full size
  • Debug console to enable browser level js execution during debugging
Press enter or click to view image in full size
  • Simple browser like view so you don’t have to learn again
  • put a debugger inline in the Editor.
Press enter or click to view image in full size
  • simple controls to navigate through the debugging process
Press enter or click to view image in full size
  • create your own environment by creating .vscode/launch.json file and maintaining the suggestion
Press enter or click to view image in full size
  • Below is a sample nodejs configuration
Press enter or click to view image in full size

Conclusion

Thanks, hope this helps you get basic idea for debugging web applications in VS Code . Read more here

--

--

Achuth hadnoor
Achuth hadnoor

Written by Achuth hadnoor

On my way to be an indie developer, creator creating a focus on better living.

No responses yet