If you've done everything correctly, your code execution should pause at the first breakpoint and you should see all of the variables and their values in the Debug Tool Window:Īnd that's it! Use F7 (Step Into), F8 (Step Over), and F9 (Run to next breakpoint) keys to quickly navigate over your code and find what you're looking for faster. Now, try to issue an HTTP request to your Express app. You do that by clicking right by the line number, after which you should see a red dot, indicating that a breakpoint has been set. Don't forget to do that because this is what actually makes the Webstorm IDE's debugging client / Node.js connection.Īlright, now it's just a matter of placing breakpoints in the code and that's it! Try It Out Make sure that, when filling in the Port field, you use the one on which the Node.js process is listening for the debugger client, in our case 9001.Īlso, note that once you've created the Run/Debug configuration, you click on the green "bug" icon. More specifically, a new Attach to Node.js/Chrome configuration. Now, on the WebStorm side, we need to add a new Run/Debug configuration. (□ Quick tip: for easier local Node.js backend application development, make sure you utilize the nodemon library. If you see this, then we're ready for the next step! Notice the message Debugger listening on ws://127.0.0.1:9001/. Now, if you were to run the above command, you should receive the following output: The following is the code that makes this possible: const express = require("express") Ĭonsole.log(chalk.cyan(`□ App running on port $.`)) Note that the -port=9000 argument is handled in my application code, and it's here because you usually want to give developers the ability to change the port on which the application will be running on their local machine. The port 9000 will be used by my Express app. So, 9001 is the port on which the Node.js process will listen for the debugging client (in my case - Webstorm IDE's client). In the following command, I'm using port 9001: nodemon scripts/app.js -port=9000 -inspect=9001 Note that you don't have to use the default 9229 port. Each process is also assigned a unique UUID". By default, it will listen at host and port 127.0.0.1:9229. If you were wondering what exactly it does, there is a good and short explanation over at the official docs: "When started with the -inspect switch, a Node.js process listens for a debugging client. The first step is to start your Node.js server, but with the special -inspect switch. So, in this short article, we'll see how to set this up in just two simple steps. And although the process to set it up ultimately wasn't too complicated, at the time of writing this article, I still couldn't find an easy step-by-step guide on how to do it. The other day, I wanted to debug a locally running Node.js / Express powered API endpoint, using my favorite IDE - WebStorm. (To learn more about the Node.js's debugger, check out the official documentation). A much better alternative is to use the Node.js debugger, which is a tool I basically can't live without these days. And while in certain cases this can still be a quick way to perform code inspection, in general, it is a very slow and painful approach to determine what's wrong with our code. CLDD) methodology in order to debug our app □. That's why it is important that we have our development environment and tools ready for the task.Īt one point in time, as developers who also live in the JavaScript / Node.js world, I'm sure we've all used the famous " console.log driven development" (a.k.a. I was able to get a breakpoint in WebStorm to hit, but it’s in the dashboard_loaders.ts file, here: console.log($routeParams.type, $routeParams.slug) ĭashboardLoaderSrv.loadDashboard($routeParams.type, $routeParams.slug).As developers, finding and resolving bugs within our applications is something we do every day. If there’s a way you (or anyone) could give me just a quick “here’s how to setup vscode/webstorm/chrome for debugging” that be super helpful. js file instead of pulling one? Maybe that’s the issue?) No breakpoints hit (I’m not sure how to force Chrome to use my local.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |