Jul 7, 2017
5 Debugging Tools Every JavaScript Programmer Should Know and Use
before resorting to Stack Overflow and existential crisis
You’re staring at code and can’t figure out why! WHY is it doing this unexpected, potentially interesting — if you didn’t have a deadline — thing?
Before you abandon your approach and resort to cobbling together somewhat-related found code that might get the job done, I have three questions for you:
1. What do you expect that first expression to do?
2. Why do you expect it to do that?
3. Does it actually do it?
If you can’t answer the first two questions, I wish you luck with your copy-paste hack, BUT if you know what you expect and why, there are tools to help you figure out IF it is doing the thing.
After you confirm that your expectation is spot on—or fix a bug—move to the next logical expression or line to check. Here are a few helpful tools to aide you in bug sleuthing.
When you need to verify a value
Console.log may be your go-to to check a var, const, let, argument or this value, which is adequate at times, but be aware that sometimes Chrome’s console displays a value updated after its runtime evaluation. Be leery of the accuracy if you see a little light-blue box with an ‘i’ next to the logged value.
1. Chrome Dev Tools — Debugger
A more dependable alternative to console.log-ing is Chrome’s debugger tool. To use it, add a debugger statement in your code at the line where you would like to inspect values. Save the file, then open the Dev Tools panel in your Chrome browser with:
iOS: Cmd + Opt + I
Windows: Ctrl + Shift + INavigate to the page where you are testing your code, likely localhost:PORT_NUMBER or the deployed dev site, and reload the page. Execution will pause at the debugger allowing you to inspect values.
The debugger is similar to adding a breakpoint in your code from the sources tab in the browser, but a key difference to note is that breakpoints are line based. For example, if you add a breakpoint to line 20 and then refactor and remove line 8. What was on line 20 is now on line 19 and your breakpoint will need to be updated. For more details and debugging jewels, take a look at Chrome’s documentation, https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints.
NOTE: Firefox, Safari and Edge also have Dev debugging tools.
2. React Developer Tools
If your application is built with React and you need to check props or state values, the React Developer Tools Chrome extension becomes your best friend, momentarily.
Once you add the extension, if you visit a webpage build with React, a React tab will be added to the dev console that displays props and state values for any element you click on.
When you need to check if a request was sent
1b. Chrome Dev Tools — Network Tab
If you are not sure if your request made it to the server, head to the Chrome Dev Tools network tab. Look in the call list for the request you are not sure about. You can check the status code and click on the request to view headers and other info.
When you need to debug server-side code
You are confident that you are sending data to the server, but you are not sure how Node or Express is routing and processing the request. If you are using a application you can’t peer into, like an API, read its documentation. If you built or maintain the server in question, meet Node Inspect.
4. Node Inspect
Node Inspect is like Chrome Dev Tools for server code. Before using inspect, make sure that you have node 6.6+ installed and are surfing on Chrome 55+. If you can check off those two prereqs, open a bash and run:
node --inspect PATH_TO_YOUR_SERVER_FILEYou should see something like the image below with a connection URL.
Open that link in your browser for a pleasantly familiar interface to explore the inner workings of your server.
If you like living on the debugging edge, check out this post by Serg Hospodarets that walks through how to set up your debugging environment so you can debug your client and server JavaScript files in the same DevTools window in parallel. https://blog.hospodarets.com/nodejs-debugging-in-chrome-devtools
When you need to check a server response
If you know that your request made it to the server, but you aren’t sure what the data coming back looks like—or if there is data coming back at all, Postman is your man. Though he doesn’t quite have Marvel status, he has saved several devs.
3. Postman
Postman is an app that you download and install. The app gives you the option to pick a request method (GET, POST, PUT, PATCH, DELETE…), paste an endpoint, add any auth credentials required by the endpoint, and send the request. The response is displayed in the app’s body tab.
This tool is a great to make sure you are getting back the info you expect so you know the function in your client that handles the server response can process the data. More helpful Postman tips can be found in the docs, https://www.getpostman.com/docs.
When you have a syntax error
A text editor linter like ESLint is quite helpful. The often bright-red logged errors in browser and bash consoles also provide great clues to pay attention to and use as search queries. Another helpful but less referenced syntax debugger is Webpack. Yes, the same Webpack that you use to compile modules, https://webpack.js.org/guides/getting-started/
5. Webpack
If Webpack can’t build, it will throw an error that shows a lot of helpful details. So if something doesn’t update in the browser when you refresh the page, check the Webpack bash to make sure it is compiling.
If the bug persists
If you still have a bug, formulate a concise, well factored question to ask a mentor or coworker, or to post in a dev forum—OR travel to a city showcasing the work of Dutch artist, Florentijn Hofman (pictured below in Ahmad Nassri’s tweet).
