![]() ![]() In some scenarios, the debugger automatically hits breakpoints in JavaScript and TypeScript codes and embedded scripts on HTML files. ![]() Visual Studio provides client-side debugging support only for Chrome and Microsoft Edge (Chromium). Using these tools, you can examine the DOM or interact with the app using the JavaScript Console. If you want to use the Chrome Developer Tools, press F12 in the Chrome browser. Now, you can inspect your app state by hovering over variables currently in scope, using debugger windows like the Locals and Watch windows. The debugger pauses at the breakpoint you set (IDE highlights the statement in the yellow background). To run your app, press F5 ( Debug > Start Debugging). A breakpoint indicates where Visual Studio should suspend your running code, so you can look at the values of variables or the behavior of memory, or whether or not a branch of code is getting run. With your project open in Visual Studio, open a server-side JavaScript file (such as server.js), click in the gutter to set a breakpoint:īreakpoints are the most basic and essential feature of reliable debugging. Depending on the type of app development you're doing, you may need to install the Node.js development workload with Visual Studio. Now that we now our problem, let’s stop the debugger and fix it.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free. Our body has a users attribute, but we try to destructure a user variable from it in line 15, which leads to an error when we try to write to user.id in line 16. ![]() ![]() When we look into the side-bar in the VARIABLES/Block category, we can see that our user object is in fact undefined! If we open the VARIABLES/Local category, we can also see why. Then re-send the request with cURL to see what happened before we tried to set user.id. Let’s open our index.js again, move the break-point to line 16 and let the debugger run to the end of the event loop by pressing F5. It seems like we created an error by setting the id of our user object, how did this happen? Somehow we ended up in a whole different place of the codebase? Let’s step to the next line with F10 to see what happens. Let’s open Local and see what’s inside.Īs we can see, we have two local variables, body which is of type Object and response which is of type ServerResponse. If we look at the sidebar on the left of our code, we can see a VARIABLES category with various sub-categories like Block and Local. This request will run the function linked to POST /users and halt at the breakpoint in its first line. API Setupįirst, we create a new Node js project and install our dependencies.Ĭonst express = require ( " express " ) const bodyParser = require ( " body-parser " ) const users = [' localhost:9999/users You can then go on to easily add API endpoints and make an API call. We will create a simple API with the Express framework and then try to debug it with the help of VS Code’s debugging features instead of the console. We will also use cURL to send requests to our API. Visual Studio Code is a “streamlined code editor with support for development operations like debugging, task running and version control.” It allows us to link functions directly to API endpoints, which is a quick and simple way to build an API. WhatĮxpress is a “minimalist web framework for Nodejs”. There are many guides out there for finding the best node js bootcamp, but in this tutorial we’ll learn how to debug an Express-based API with the help of Visual Studio Code, or VS Code for short. Node js is a cross platform and open source JavaScript runtime environment that allows the JavaScript to be run on the server-side. In JavaScript, the first stop for a debugging task is often logging to the console, but using a debugger can give us a more integrated experience. API creation isn’t exempt from this fact, so sooner or later we’ll need to debug it. When we create software, we rarely do it without errors. ![]()
0 Comments
Leave a Reply. |