Debugging React

Articles & Tutorials

How to Debug Faster and Better with Flipper (callstack.com)
May 11, 2020
Establish a better feedback loop by implementing Flipper and have more fun while working on your apps.
  • Mike Grabowski
Debugging performance problems in React (blog.logrocket.com)
Feb 18, 2020
Ensuring a high level of performance is key when developing any application, whether it be an API, a frontend app, or a backend app.
  • Diogo Souza
Make your own DevTools (kentcdodds.com)
Feb 17, 2020
How creating DevTools specific for your own app can improve your productivity.
Common bugs in React Native (blog.logrocket.com)
Jan 31, 2020
Some of the errors you may encounter could be misleading or very hard to find. Recently, the React Native team asked developers to help them determine which of these annoying errors lead to the most frustration. While they did address some of the worst errors, there is still a handful remaining that could go under the radar.
  • Daniel Idaszak
How to debug a React application (flaviocopes.com)
Nov 30, 2019
Some tools you can use to debug your React app when you run into problems.
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

Diagnose and fix React performance issues (youtube.com)
Jun 24, 2020
Performance issues like this can be a huge pain to diagnose and fix,” they admitted. Yet they were ultimately able to solve it — how did they know where to start?
  • Emmi Russo
  • Anders Wood
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.