React Dev Tools — Debug Like a Ninja
Tags: react, javascript, tutorial, webdev
Published: 2019-09-20 06:26:04

 ![React Dev Tools — Debug Like a Ninja](https://miro.medium.com/max/1706/1*vwNrlUSs4Q2JCsWc9JJsBw.png)

> 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](https://miro.medium.com/max/2556/1*w1hePByhgMPI32PXJxnTgw.png)

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

Dev Tools can do a lot of things. We’re are not going to dive into the nitty gritty details of each and every feature. Instead we’ll take a look at the **top 10 helpful features** that help us save time and write better React code.

## Components Tab

1. Live edit state/props
2. Search through tree
3. Advanced tree filter
4. Rendered by
5. Owners tree
6. Quick Navigation
7. Utils

## Profiler Tab

8. Profile initial mount
9. Why did this render?
10. Rendered at

# 1. Live Edit State/Props

You can live edit the state and props of a component and instantly see the results in the page.

![live edit state/props](https://miro.medium.com/max/1280/1*3RLDGKkZngCzfuxi61kA5Q.gif)

Since the gif is broken, you can view it [here](https://miro.medium.com/max/1280/1*3RLDGKkZngCzfuxi61kA5Q.gif).

# 2. Search Through Tree

The search bar comes handy when you want to quickly find and jump to a component in the tree. Now that the **Dev Tools can remember stuff** the **selected node is saved between reloads** and you don’t have to repeat the action every time you reload the page.

![search through tree](https://miro.medium.com/max/1280/1*0c1JIHJRs1N9RX2JBa4BKA.gif)

# 3. Component Filter

Filter is a powerful feature to reduce visual noise and focus on what matters at the moment in a huge tree. You can filter with a variety of options like context, HOCs, host(DOM) nodes, component name, etc.

![component filter](https://miro.medium.com/max/1280/1*ChPXzBXxRTPXkElTgVSZ9Q.gif)

# 4. Rendered By

Rendered By is a list of **owner/parent components** that rendered the selected component. You can quickly jump to a parent component by selecting an entry from the list.

![rendered by](https://miro.medium.com/max/1280/1*ekuimJhLzc1JxDLNLY0jlQ.gif)

# 5. Owners Tree

Owners Tree gives you an **eagle eye view** of a particular component and its sub-tree and hides the rest of the component tree.

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

![owners tree](https://miro.medium.com/max/1280/1*8-rJTh6j0StDr959kAzOkA.gif)

# 6. Quick Navigation

Switching between Elements tab (browser dev tools) and Components tab (react dev tools) is pretty easy and the corresponding node is auto selected in these tabs.

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](https://miro.medium.com/max/1280/1*yrboX0DNGA5hzPbwkvyuGA.gif)

# 7. Utils

Components tab offers three small handy utils.

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

## Suspend Component

You can easily switch between the waiting(loading) and resolved states of [Suspense](https://reactjs.org/docs/code-splitting.html#reactlazy) components.

![suspend component](https://miro.medium.com/max/1280/1*fsayD-RnFvWKAN2WTiJvog.gif)

## Inspect matching DOM element

We already saw this in **Quick Navigation**. You can select a component and click the **eye icon** on the right pane to jump to its corresponding node in Elements tab to inspect it.

![inspect element](https://miro.medium.com/max/1280/1*4vA7mDDmbOdBPyugPfGCBw.gif)

## Log component data to console

This is a handy utility that logs the entire component meta data to the console. The log gives details like props, hooks, corresponding DOM nodes and the component file location in the file system.

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

![log component data](https://miro.medium.com/max/1280/1*7oO2We69Q6vjUUiprakBMA.gif)

---

# Intro to Profiler

The next three features are going to be about the Profiler. Before diving into them, we’ll take a look at how profiler works and the key metrics that are used during profiling.

Every profiling session has two important colour graphs —

1. Commit graph
2. Component graph

![intro to profiler](https://miro.medium.com/max/2878/1*s8gkGYrZfDHDyyiep6-_0w.png)

## Commit Graph

Commit graph gives you a list of commits (whole tree) during the session. **Each commit denotes a user activity or side-effect that triggered a render in the tree**.You will see it coloured from orange to green with **orange** denoting the **costliest** (took most time) commit and **green** denoting the **cheapest** (took least time) commit.

## Component Graph

Component graph gives you info on which component rendered **during a single commit**. You can select each commit from the commit graph to see its component graph. It is also colour coded with cost information —

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. **Coloured** — **Both** the component and its entire subtree rendered

# 8. Profile Initial Mount

Initial mount and first render is usually a perf heavy op in most React applications. In older versions of Dev Tools, it was impossible to profile and audit the initial mount phase. But the latest version provides an option to profile and audit the initial mount.

![profile initial mount](https://miro.medium.com/max/1280/1*lPsmgceapwprlUyIyHPArg.gif)

# 9. Why Did This Render?

This is the most powerful feature of the Dev Tools yet and it tells you why a component rendered during a profiling session. A component might have rendered for one or many of these reasons —

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](https://miro.medium.com/max/1280/1*oTZB8QDpdg65pRVSvKMgyA.gif)

_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

Rendered At info on the right pane gives you two time metrics —

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](https://miro.medium.com/max/1280/1*YzgMYR2S7lSRsAZLgESoWA.gif)

Since the gif is broken, you can view it [here](https://miro.medium.com/max/1280/1*YzgMYR2S7lSRsAZLgESoWA.gif).

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](https://react-devtools-tutorial.now.sh).

Play around with Dev Tools and drop a comment below or [start a conversation](https://twitter.com/intent/tweet/?text=Hey%20@flexdinesh%20I%20read%20your%20post%20about%20@reactjs%20Dev%20Tools%20) with the author in [Twitter](https://twitter.com/intent/tweet/?text=Hey%20@flexdinesh%20I%20read%20your%20post%20about%20@reactjs%20Dev%20Tools%20) on what you think.

_This post is a cross post of the original post from [The Thinkmill Blog](https://medium.com/the-thinkmill/react-dev-tools-debug-like-a-ninja-c3a5d09895c6)._