Using react-devtools with React Native

The “React Developer Tools” is a very handy browser extension which lets inspect and manipulate the React component hierarchy along with their props and state. There’s also a standalone version, to be used with React Native.

To use it, install it as a project dependency:

npm install --save-dev react-devtools

And then adjust the scripts section in your package.json by adding this:

"devtools": "react-devtools"

And then finally run it as follows:

npm run devtools

It’s also possible to install react-devtools globally.

npm install -g react-devtools

And then run it as follows:

react-devtools

Viewing your console.log()s and such is not part of the react-devtools. To view them, continue as you’d normally do (e.g. running react-native log-ios or by using the In-App Developer Menu, choosing the option Debug JS Remotely)

react-devtools

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Marky, a high-resolution JavaScript timer

Marky, by Nolan Lawson:

JavaScript timer based on performance.mark() and performance.measure(), providing high-resolution timings as well as nice Dev Tools visualizations.

For browsers that don’t support performance.mark(), it falls back to performance.now() or Date.now(). In Node, it uses process.hrtime().

The greatest win to me is the visualization in the Dev Tools timeline.

After installing it with npm install marky use its mark() and stop() methods to time your stuff:

var marky = require('marky');

marky.mark('expensive operation');
doExpensiveOperation();
marky.stop('expensive operation');

Marky, a high-resolution JavaScript timer based on performance.mark() and performance.measure()

Chrome DevTools Tip: Blackboxing Scripts

The Chrome DevTools have this neat feature where you can “blackbox” JavaScript source files. Upon blackboxing a script the debugger will jump over anything contained in that file when stepping in/out/over code, and not pause on any breakpoints also contained in that file.

A typical example would be to blackbox the script of the JS framework you are using: jQuery, React, etc.

devtools-blackbox-2

You can blacklist JavaScript source files via the DevTools Settings:

add-pattern

How to step through your code | Web Tools – Google Developers →

Note: the previous version of the docs are more clear than the current version (linked above) — Blackbox JavaScript Source Files – Google Chrome →

Redux DevTools Chrome Extension

A Chrome DevTools Extension, wrapping around Redux DevTools:

redux-devtools-extension

The Redux DevTools themselves are a live-editing time travel environment for Redux:

Redux DevTools

  • Lets you inspect every state and action payload
  • Lets you go back in time by “cancelling” actions
  • If you change the reducer code, each “staged” action will be re-evaluated
  • If the reducers throw, you will see during which action this happened, and what the error was
  • With persistState() store enhancer, you can persist debug sessions across page reloads

Redux DevTools →
Redux DevTools Chrome Extension (Source) →
Redux DevTools Chrome Extension (Chrome Web Store) →

Chrome DevTools Custom Object Formatters

Here’s a little Chrome DevTools gem: it supports the use of custom Object formatters. Object what?

Object formatters allow you to control how the value of a JavaScript object appears in Chrome’s console and debugger.

Say you’d like to visualize a 2D vector, instead of seeing “just” { x: 1, y: 2} appear when pushing it through console.log. Enter the custom VectorFormatter:

chrome-custom-formatters

Or say you’d like to visualize a color, instead of seeing its R, G, and B values:

OIA4kba

The possibilities are endless 🙂

Custom Object Formatters in Chrome DevTools (Article) →
Chrome DevTools VectorFormatter
Github search results for devtoolsFormatters