Use the Chrome DevTools to debug a Node.js app (2024)


When we're programming it's common to have the need to quickly test and do some experiments with a piece of code.

Published

⭐️ 👀 2023 WEB DEVELOPMENT BOOTCAMP starting in days! Join the waiting list to reserve your spot in my 10-weeks cohort course and learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much much more! 👀 ⭐️

With client-side code it’s easy to start debugging some piece of code - just open the Chrome DevTools on any page, and start writing client-side JavaScript.

How can we do the same with Node.js code, and debug Node modules with access to the filesystem and other Node.js capabilities? It’s very simple, actually.

Open your terminal and run

node --inspect

Use the Chrome DevTools to debug a Node.js app (1)

Then in Chrome type this URL: about://inspect.

Use the Chrome DevTools to debug a Node.js app (2)

Click the Open dedicated DevTools for Node link next to the Node target, and you’ll have access to Node.js in the browser DevTools:

Use the Chrome DevTools to debug a Node.js app (3)

Make sure you click that, and not the inspect link down below, as it tool auto-reconnects to the Node.js instance when we restart it - pretty handy!

If the question is why we want to do that, it’s pretty simple: there’s no better way to debug any JavaScript code than using the DevTools and their tools. We have access to the profiler, all the stack visualization information, the code navigation facilities, a very cool debugger and much more!

One more thing! ⚠️ ✋

At the end of January I will organize the Web Development Bootcamp.

It's a 10-weeks long cohort online course where I will guide you to becominga Web Developer.

It's not "just a course". It's a bigevent I organize once a year.

We'll start from zero, learn the fundamentals of Web Development, HTML CSS, JavaScript, Tailwind, Git, using the command line, VS Code, GitHub, Node.js, we'll then learn React, JSX, how to use PostgreSQL, Astro, Next.js, Prisma, deploying on Netlify/DigitalOcean/Fly/Vercel and much more!

At the end of the first 10 weeksyou'll know how to create web sites and web applications and I'll unlock you the 2nd phase of the Bootcamp: you will get access to a large number of projects exclusive to the Bootcamp graduates, so you can follow my instructions to build things like private areas with authentication, clones of popular sites like Twitter YouTube Reddit, create e-commerce sites, and much much more.

Because once you got the fundamentals, you only learn by working on real, exciting projects.

To find out more, visit bootcamp.dev

Use the Chrome DevTools to debug a Node.js app (2024)

FAQs

How to debug nodejs using Chrome? ›

Option 1: Open chrome://inspect in a Chromium-based browser or edge://inspect in Edge. Click the Configure button and ensure your target host and port are listed. Option 2: Copy the devtoolsFrontendUrl from the output of /json/list (see above) or the --inspect hint text and paste into Chrome.

How can you debug a Node.js application? ›

Quick Recap
  1. Add a debugger statement inside the code that you want to debug.
  2. Run the node inspect index. ...
  3. Click on the inspect link under the Remote Target section.
  4. Click on the blue triangle icon to skip debugging if you don't want to start debugging your application from the first line of the index.
Apr 22, 2024

Which panel in Chrome DevTools allows you to debug JavaScript? ›

The Sources panel is where you debug JavaScript. Open DevTools and navigate to the Sources panel.

How do I debug next js in Chrome dev tools? ›

Debugging with Chrome DevTools

Next, open Chrome's Developer Tools ( Ctrl+Shift+J on Windows/Linux, ⌥+⌘+I on macOS), then go to the Sources tab. Now, any time your client-side code reaches a debugger statement, code execution will pause and that file will appear in the debug area.

What commands are used to enable debugging in the Express app? ›

Advanced options
NamePurpose
DEBUGEnables/disables specific debugging namespaces.
DEBUG_COLORSWhether or not to use colors in the debug output.
DEBUG_DEPTHObject inspection depth.
DEBUG_FDFile descriptor to write debug output to.
1 more row

How do I use DevTools in Chrome? ›

Access Developer Tools
  1. Right-click a page and select "Inspect Element". This displays the HTML code for the element you clicked.
  2. Select View > Developer > Developer tools.

What is the shortcut for DevTools debugger in Chrome? ›

Instantly open the DevTools

You can quickly open the DevTools by simply hitting the F12 key. In most cases though, you also want to inspect an element on a page. There's a special shortcut that gets you there even faster: hitting Ctrl+Shift+C will open the DevTools and invoke the inspector tool.

What is the command for DevTools in Chrome? ›

Open panels with shortcuts: Elements, Console, or your last panel
OSElementsConsole
Windows or LinuxCtrl + Shift + CCtrl + Shift + J
MacCmd + Option + CCmd + Option + J

What is the best debug tool for JavaScript? ›

Postman is one of the best JavaScript debugging tools for troubleshooting the requests and responses in your application. Postman offers software for Windows, macOS, and Linux. With Postman, you can tweak requests, analyze responses, debug problems.

What are the advantages of Chrome DevTools? ›

1 Pros of Chrome DevTools

This gives you immediate access to the Elements, Console, Sources, Network, Performance, Memory, and Application tabs, each with its own functionality and tools. You can also customize the layout, theme, and settings of Chrome DevTools to suit your preferences.

How do I enable JavaScript in Chrome DevTools? ›

Activate JavaScript in your browser
  1. Open Chrome on your computer.
  2. Click. then Settings.
  3. Click Privacy and Security.
  4. Click Site settings.
  5. Click JavaScript.
  6. Select Sites can use Javascript.

How do I remotely debug Chrome? ›

Select the session you would like to debug by clicking its Remote Debugging link. If the Chrome Remote Debugger does not populate, select the icon to the left of the address bar and select site settings . Scroll to the bottom of the settings and change the setting for Insecure content to Allow .

How to debug JavaScript vscode Chrome? ›

JavaScript Debugging Now Built-In to VS Code
  1. Pressing F5 (Start Debugging)
  2. Activating the debug icon in the menu bar and selecting "Run and debug"
  3. Opening the Visual Studio Code command palette and running the "Debug: Open Link command"
Aug 2, 2021

How do I debug a web worker in Chrome? ›

Web Workers

Chrome developer tools provide a convenient way for debugging these background workers (threads). Each separate worker has its own dedicated inspector listed as a link. Clicking on one of the worker inspectors will boot a new instance of the chrome dev tools specific for that background thread.

Top Articles
Over 75 Paintballing Locations Nationwide
You may lose access to your Netflix account if you’re paying through Apple
Pikes Suwanee
Fbsm St Louis
Christine Paduch Howell Nj
Christine Paduch Howell Nj
Woman who fled Saudi Arabia reaches her new home in Canada
Pjstar Obits Legacy
Frivlegends.com Unblocked
Indianapolis Star Obituary
Loss Payee And Lienholder Addresses And Contact Information Updated Daily Free List Bank Of America
Die eID-Karte für Bürgerinnen und Bürger der EU und des EWR
Best Pizza In Westlake
Shadow Under The Mountain Skyrim
Oviedo Anonib
Sprinter Tyrone's Unblocked Games
Craigs List Rochester
Southern Food Buffet Near Me
2068032104
Sevierville, Tennessee: Idyllisches Reiseziel in den Great Smoky Mountains
Will Certifier Crossword Clue
Pge Outage Map Beaverton
Reahub 1 Twitter
Berklee College Of Music Academic Calendar
Forza Horizon 5: 8 Best Cars For Rally Racing
Dynasty League Forum
Understanding The Payment Structure Behind Online Slot Machines
Panty Note 33
Brake Masters 228
Craigslist Pets Seattle Tacoma Washington
Craigslist Ct Apartments For Rent
Quiktrip Maple And West
Restaurants Near 275 Tremont St Boston
R/Sandiego
Gabrielle Abbate Obituary
Sparkle Nails Phillipsburg
Gas Station Near Santa Barbara Airport
Lily Starfire White Christmas
Weekly Math Review Q4 4 Answer Key | airSlate SignNow
Wv Mugshots 2023
Burlington Antioch Ca
Sarah Colman-Livengood Park Raytown Photos
Sierra At Tahoe Season Pass Costco
Norwegian Luna | Cruise Ship
Gun Show Deridder La
Watch Wrestling.up
Nuefliks.com
MERRY AND MARRIED MERRY & MARRIED MERRY + MARRIED MERRY E MARRIED MERRY ; MARRIED MERRY, MARRIED MERRY - MARRIED Trademark Application of Nexus Integrity Group - Serial Number 98485054 :: Justia Trademarks
1V1 Google Classroom
Bourbon Moth Magnolia
Craigslist Org St George
What Is Opm1 Treas 310 Deposit
Latest Posts
Article information

Author: Trent Wehner

Last Updated:

Views: 5417

Rating: 4.6 / 5 (56 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Trent Wehner

Birthday: 1993-03-14

Address: 872 Kevin Squares, New Codyville, AK 01785-0416

Phone: +18698800304764

Job: Senior Farming Developer

Hobby: Paintball, Calligraphy, Hunting, Flying disc, Lapidary, Rafting, Inline skating

Introduction: My name is Trent Wehner, I am a talented, brainy, zealous, light, funny, gleaming, attractive person who loves writing and wants to share my knowledge and understanding with you.