React Dev Tools — Debug Like a Ninja

Dinesh Pandiyan
Sep 14, 2019 · 6 min read
React Dev Tools — Debug like a ninja
React Dev Tools — Debug like a ninja

Hands down console.log() was, is and will always be the greatest debugging tool of all time.

React team launched a new version of the React Dev Tools (v4) a few weeks ago and it’s fantabulous. It gives you debugging superpowers to navigate through your tree, trace data flow, spot weak links and optimise for perf.

There are two separate tabs (Components, Profiler) now as opposed to the old version which had only one React tab.

Dev Tools
Dev Tools

New Dev Tools has great many improvements over the old version. To highlight a few —

  • 🏎 Faster
  • 🎣 Hooks support
  • 🧐 Advanced tree filter
  • 🤠 Better search UX
  • 👮‍♀️ Badges for HOCs
  • 🎯 Remembers selection after page reload

Top 10 Features

Components Tab

  1. Search through tree
  2. Advanced tree filter
  3. Rendered by
  4. Owners tree
  5. Quick Navigation
  6. Utils

Profiler Tab

  1. Why did this render?
  2. Rendered at

1. Live Edit State/Props

Live edit state and props
Live edit state and props

2. Search Through Tree

Search through tree
Search through tree

3. Component Filter

Component filter
Component filter

4. Rendered By

Rendered by
Rendered by

5. Owners Tree

To enter into owners tree view, you have to double click a component in the tree.

Owners tree
Owners tree

6. Quick Navigation

To find the corresponding DOM node in the Elements tab, select the component and click the small eye icon on the right pane. It will take you to the Elements tab with the corresponding DOM node selected.

To find the corresponding React node from Elements tab, just select a node in Elements tab and click the Components tab. React Dev Tools will automatically select the corresponding component.

Quick navigation
Quick navigation

7. Utils

  1. Suspend component
  2. Inspect matching DOM element
  3. Log component data to console

Suspend Component

Suspend component
Suspend component

Inspect matching DOM element

Inspect matching DOM element
Inspect matching DOM element

Log component data to console

To log component data to console, select the component and click the small bug icon in the right pane.

Log data to console
Log data to console

Intro to Profiler

Every profiling session has two important colour graphs —

  1. Commit graph
  2. Component graph
Profiler intro
Profiler intro

Commit Graph

Component Graph

  1. Dark Grey — Component did not render but a part of its sub-tree rendered
  2. Transparent Grey Neither the component nor its subtree rendered

3. ColouredBoth the component and its entire subtree rendered


8. Profile Initial Mount

Profile initial mount
Profile initial mount

9. Why Did This Render?

  1. Props changed
  2. State changed
  3. Hooks changed
  4. Parent component rendered

You can profile an activity and see why a component rendered during the profiling session to spot weak links and prevent unnecessary renders in the tree.

Why did this render
Why did this render

Note: You have check this setting — “Record why each component rendered while profiling” to see this info in the right pane of the Profiler Tab.

10. Rendered At

  1. When exactly the component rendered during the profiling session
  2. How long it took for the component to render during the profiling session

Eg. 2.2s for 2.3ms

Here, 2.2s means the component rendered at 2.2s(2200ms) from the start of the profiling session which is 0s. And 2.3ms is the amount of time it took for the component to render.

Rendered at
Rendered at

That’s all folks.

If you’re interested in exploring all the features, the React team has built a site just for that — Interactive Dev Tools.

Play around with Dev Tools and drop a comment below or start a conversation with the author in Twitter on what you think.

Thinkmill

A collection of posts by the team at Thinkmill

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store