Debugging React

Articles & Tutorials

6 Tools for Debugging React Native (sitepoint.com)
Oct 28, 2019
In the React Native world, debugging may be done in different ways and with different tools, since React Native is composed of different environments (iOS and Android), which means there’s an assortment of problems and a variety of tools needed for debugging.
  • Said Hayani
Debug React applications with the new React DevTools (blog.logrocket.com)
Oct 01, 2019
In this tutorial, I’ll highlight the notable additions to the latest React DevTools release, Version 4 and demonstrate a few ways you can leverage its features to better debug your React apps with it.
  • Peter Ekene Eze
React Dev Tools — Debug Like a Ninja (dev.to)
Sep 20, 2019
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.
  • Dinesh Pandiyan
Supercharge your logging and debugging (react.christmas)
Dec 13, 2018
How to use Reactrotron to really improve your React and React Native development
  • Hannes Waller
Hunting JS memory leaks in React Native apps (blog.swmansion.com)
Jul 26, 2018
In this article, we gathered the typical approaches to debug and solve memory problems in a React Native app.
  • Krzysztof Magiera
Debugging a Create React App with VS Code (elijahmanor.com)
Feb 05, 2018
In this post we’ll look at how to configure Visual Studio Code to debug React Components and Jest Unit Tests inside a web application that was created by create-react-app.
  • Elijah Manor
Debugging React Native and Redux with React Native Debugger (blog.reactnativecoach.com)
Nov 24, 2017
Every developer will get to a point when they’re working where they’re going to have to debug their code.
  • Gunnari Auvinen
React-Native: Debugging like a God (medium.com)
Sep 06, 2017
Let’s talk about debugging and performance measurement.
  • Shahen Hovhannisyan

Video Guides & Talks

Sneak peek at the DevTools Profiler with "interactions" (youtube.com)
Jul 28, 2018
Prototype UI built on top of the new React "Profiler" component.
Sneak peek at new React DevTools "profiler" feature (youtube.com)
Jun 21, 2018
Prototype UI built on top of the new React "Profiler" component.
Use React DevTools (youtube.com)
May 14, 2018
This is a quick intro to react devtools.
Debugging a Create React App with VS Code (youtube.com)
Feb 05, 2018
In this post we’ll look at how to configure Visual Studio Code to debug React Components and Jest Unit Tests inside a web application that was created by create-react-app.
React Devtools theme editor GUI (youtube.com)
May 30, 2017
Walkthrough video of the new built-in themes editor.
React devtools theme editor preview panel (youtube.com)
May 29, 2017
Another demo of the work-in-progress theme editor for React devtools.
Creating a custom React dev tools theme (youtube.com)
May 25, 2017
This video walks through the process of creating a custom theme for React dev tools- from GitHub fork to PR submission.

Courses & Video Series

React: Testing and Debugging (lynda.com)
Jul 05, 2017
Learn how to test, debug, and optimize your React code with tools like Jest, Chrome, ESLint, and flow.

Podcast Episodes

React Perf Devtool with Nitin Tulswani (reactpodcast.com)
May 08, 2018
Nitin Tulswani is a prolific developer and the creator of react-perf-devtool, a library that helps with profiling the performance of your React components since react-addons-perf was deprecated in React 16. In this episode we discuss Nitin's approach to writing code and the motivation behind several of his open source projects.

Libraries

react-hot-loader (gaearon.github.io)10246
v4.12.11
Aug 12, 2019
Tweak React components in real time
redux-devtools (github.com)10618
v3.5.0
Dec 22, 2018
DevTools for Redux with hot reloading, action replay, and customizable UI.