Book Image

Hands-On Visual Studio 2022

By : Miguel Angel Teheran Garcia, Hector Uriel Perez Rojas
Book Image

Hands-On Visual Studio 2022

By: Miguel Angel Teheran Garcia, Hector Uriel Perez Rojas

Overview of this book

Visual Studio 2022 is the complete and ideal integrated development environment (IDE) for creating large, complex, and scalable applications. It is one of the most complete tools available for development, especially with Microsoft technologies. This book will teach you how to take advantage of the tools available with this IDE to write clean code faster. You’ll begin by learning how to set up and start Visual Studio 2022 and how to use all the tools provided by this IDE. You will then explore key combinations, tips, and additional utilities that can help you to code faster and review your code constantly. Next, you will see how to compile, debug, and inspect your project to analyze its current behavior using Visual Studio. The book also shows you how to insert reusable blocks of code writing simple statements. Later, you will learn about visual aids and artificial intelligence that will help you improve productivity and understand what is going on in the project. By the end of this book, you will be able to set up your development environment using Visual Studio 2022, personalize the tools and layout, and use shortcuts and extensions to improve your productivity.
Table of Contents (20 chapters)
1
Part 1: Visual Studio Overview
7
Part 2: Tools and Productivity
13
Part 3: GitHub Integration and Extensions

Debugging in JavaScript

We must debug a project when there is strange behavior, an issue, or a blocker in our application. Visual Studio supports debugging for many programming languages, including JavaScript. This is a great feature, given that we can debug the frontend side (for example, with JavaScript) and the backend side (for example, with C#) using the same IDE.

To debug JavaScript and TypeScript code using Visual Studio, we need to check the Script Debugging (Enabled) option. This option is on the execution menu of the project:

Figure 8.13 – The Script Debugging (Enabled) option in the project execution menu

Then, we can run the project in debug mode, but before that, we need to add a break to inspect the code. Navigate to ClientApp | src | components | Counter.js and create a new breakpoint in line number 13 (see Figure 8.14):

Figure 8.14 – A breakpoint in the incrementCounter method inside Counter.js

Now...