VS Code debugging for web developer

A comprehensive guide into debugging web applications inside VS Code

Debugging in VS Code for web developers.

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
  • The Debug tab on the left toolbar helps you to switch to debug mode instantly
  • Full support for GIT out of the box
  • Extensions to give more features for the existing IDE which is fully Customisable
  • Integrated terminal with multiple instances
  • Debug console to enable browser level js execution during debugging
  • Simple browser like view so you don’t have to learn again
  • put a debugger inline in the Editor.
  • simple controls to navigate through the debugging process
  • create your own environment by creating .vscode/launch.json file and maintaining the suggestion
  • Below is a sample nodejs configuration

Conclusion

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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to use magic.link login system

Get started making desktop apps using Rust and React

Open Call: p5.js Editor Lead Fellowship

A screenshot of the p5 Editor console that shows the default seven lines of code that include functions of setup and draw along with createCanvas and background.

Zustand in React: DOs and DON’Ts

The Hitchhiker’s Guide to Modern JavaScript

Understanding JavaScript Promises Part Two: Chaining Promises

Learning to destructure without falling apart.

TypeScript: Anonymous Types, Type Aliases, and Interface Declarations

Different colored paints

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Achuth hadnoor

Achuth hadnoor

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

More from Medium

Fundamentals of Software Development: Essential Technologies

Deleting Git branches in bulk

Developer Blog: Nuzlocke Tracker — Part 5 — README

Simple steps to make a full-stack application.