{"id":1616,"date":"2024-04-08T17:10:27","date_gmt":"2024-04-08T23:10:27","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1616"},"modified":"2024-04-08T17:10:28","modified_gmt":"2024-04-08T23:10:28","slug":"node-js-debugging-in-chrome-devtools","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/node-js-debugging-in-chrome-devtools\/","title":{"rendered":"Node.js Debugging in Chrome DevTools"},"content":{"rendered":"\n

I was pairing with my co-worker last week. They had a super different debugging style than I do. I’m aware<\/em> that I can do fancy things in DevTools, like set breakpoints and whatnot right from within DevTools and use well-placed debugger;<\/code> statements to halt JavaScript execution and inspect things at that point. <\/p>\n\n\n\n

But I hardly ever do any of that. <\/p>\n\n\n\n

I’m quite sure I don’t even know<\/em> all the cool tricks. I’m a console.log()<\/code> type. I just absolutely litter the code in them until I learn what I need to learn. It’s a little amateur-ish, I admit. I’ve made it this far, but there’s no time like now to level up. <\/p>\n\n\n\n

I especially<\/em> don’t know any tricks with Node.js debugging. To begin with, I didn’t even know you could use Chrome DevTools with Node.js. It sort of makes sense since Node.js uses v8<\/a> just like Chrome does, but it never clicked with me to use a browser tool for server code. It’s not a new thing! Paul Irish was telling people how to do this<\/a> in 2016. <\/p>\n\n\n\n

The kind of debugging my co-worker and I were doing was complex enough that having DevTools to help us really worked. I think I’m a believer. For this article though, I’m going to show you how to do it with a simple example. You probably wouldn’t need DevTools for this, but the point is learning how to do it. <\/p>\n\n\n\n

1) Have Chrome Open<\/h2>\n\n\n\n

Then go to chrome:\/\/inspect\/<\/code>. The first tab, Devices, has the link you’re looking for. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

These settings work for me, but if you run Node at some specific port or local URL, you should add it here. <\/p>\n\n\n\n

2) Have Node Code<\/h2>\n\n\n\n

Kinda goes without saying, but you’re going to need to execute some Node code, likely from your terminal, in order for there to be anything to expect. Might be an npm script or something. Let’s just assume we have a file called app.js<\/code> and we’re going to run it directly like node app.js<\/code>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3) Have a Problem<\/h2>\n\n\n\n

My goal with this code was to have…<\/p>\n\n\n\n

Hello World<\/code><\/p>\n\n\n\n

… turn into: <\/p>\n\n\n\n

Hello \ud83d\udc4b World!!!<\/code><\/p>\n\n\n\n

That is, put a wave emoji between each word. But the output I was getting was:<\/p>\n\n\n\n

undefinedHello \ud83d\udc4f World \ud83d\udc4f !!!<\/code>.<\/p>\n\n\n\n

That’s a problem because:<\/p>\n\n\n\n

    \n
  1. I don’t want undefined<\/code> there<\/li>\n\n\n\n
  2. It put a wave at the end too<\/li>\n\n\n\n
  3. There is a space before the “!!!”.<\/li>\n<\/ol>\n\n\n\n

    We must fix this super contrived example!<\/p>\n\n\n\n

    4) Execute the Node Code with an Inspection Flag<\/h2>\n\n\n\n

    Like this:<\/p>\n\n\n

    node --inspect-brk app.js<\/code><\/span>Code language:<\/span> Bash<\/span> (<\/span>bash<\/span>)<\/span><\/small><\/pre>\n\n\n
    That --inspect-brk<\/code> flag is the real magic here. <\/p>\n\n\n\n
    When I do that, the terminal output will tell me where Node is running and that the Debugger is attached:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    It will automatically pause before it starts executing.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    5) Go through the Code<\/h2>\n\n\n\n
    These buttons are of particular interest:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    If you press “Play” here (that first blue one), the code will just run and be done without much a chance to inspect anything. <\/p>\n\n\n\n
    You could use the next button, the dot with a little curved arrow up and over it, to start “stepping” through the code. But Node is complicated, and you’ll soon find yourself in the bowels of Node doing god-knows-what. <\/p>\n\n\n\n
    The trick is to put a debugger;<\/code> statement in the code where you start caring about stuff. So…<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Now when I run again, I can hit the blue Play button and hop to this exact point the first time it gets there. Now<\/em><\/strong> I can start “stepping” through the code to see values. As I step through, I can see the values of relevant variables as I go. <\/p>\n\n\n\n
    \"\"
    I can also hover over variables to see values as well as see locally-scoped variables in the sidebar on the right.<\/figcaption><\/figure>\n\n\n\n
    Here I learned that when I declared the variable and then appended a string to it, I got that undesirable result. Lemme start with a blank string instead.<\/p>\n\n\n\n
    We also essentially want to skip the last iteration of the loop. So instead we’ll use an old school for<\/code> loop and run it over the length of all the words minus one. Then plop the last word (and !!!) at the end separately.<\/p>\n\n\n\n
    5) Restart Things Anytime<\/h2>\n\n\n\n
    As I change my code, I can always Control-C<\/code> out of the Node process and run it again, and DevTools (thank god) will automatically re-attach. <\/p>\n\n\n\n
    Here I can start over and step through the code, seeing my changes yield the correct output.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    The other debugger buttons (like the down arrow and up arrow) allow you to step through code quicker by fast forwarding to the next function call or finishing the function you’re currently in.<\/p>\n\n\n\n
    \n\n\n\n
    This just feels like a more grown-up way to debug code when things get complicated. Especially for apps where you are jumping between lots of files, you can see all that happening in the DevTools file explorer on the left. <\/p>\n\n\n\n
    Good luck out there! <\/p>\n","protected":false},"excerpt":{"rendered":"
    I was pairing with my co-worker last week. They had a super different debugging style than I do. I’m aware that I can do fancy things in DevTools, like set breakpoints and whatnot right from within DevTools and use well-placed debugger; statements to halt JavaScript execution and inspect things at that point. But I hardly […]<\/p>\n","protected":false},"author":1,"featured_media":1635,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[65,147],"class_list":["post-1616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-devtools","tag-node"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/04\/mag-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=1616"}],"version-history":[{"count":4,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1616\/revisions"}],"predecessor-version":[{"id":1637,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1616\/revisions\/1637"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/1635"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=1616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=1616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=1616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}