VS Code debugging for web developer

Skip to main content

Command Palette

Search for a command to run...

VS Code debugging for web developer

A comprehensive guide into debugging web applications inside VS Code

PublishedAugust 18, 2021

•2 min read•View as Markdown

VS Code debugging for web developer

👋 Hey, I am a designer, developer, writer and maker from India 🇮🇳. In short, I love creating and building stuff. ✨ Welcome to my little slice of the internet—I hope you find something useful!

On this page

Debugging in VS Code for web developers.What is VS Code.Intelligence and presets for web development Conclusion

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

How to Design an Iconset That Is Adaptive for All Projects

Icons are small graphical elements that can convey meaning, functionality, or identity in a user interface. They can also enhance the aesthetic appeal and usability of a website, app, or product. However, designing an iconset that is consistent, scal...

Mar 12, 2023·3 min read

How BingAI changed the way I create apps

As an app developer, I’m always looking for ways to improve my workflow and create better products. One tool that has had a significant impact on my work is Bing AI. In this blog post, I’ll share how Bing AI has changed the way I create apps and how ...

Mar 7, 2023·3 min read

Time-boxing model : A complete guide to time management

Time boxing is a simple yet powerful technique of time management,That helps you to have control over your time and improves your productivity.This helpful technique is for practising self explain and organising your schedule in a way that your most ...

Aug 30, 2021·9 min read

Time-boxing model : A complete guide to time management

1000$ in one month on partner program by telling story.

Learning is the key to reach a milestone of 1000$ by writing one article. Writing and telling a story is easy once you are in the shoe of your reader. When you fell the pain/happiness of your readers you will eventually earn rewards. For all stories...

Aug 28, 2021·1 min read

A

Achuth Hadnoor

13 posts

I build digital products for designers, developers, and productivity. Former Design Engineer at Opendoor, where I developed animations, design systems, websites, and a mobile app.

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

#javascript #web-development #debugging #codenewbies #developer

© 2026 Achuth Hadnoor

Archive
Privacy
Terms