Intro to React devtools standalone

Most people using React have probably heard of their corresponding debugging environment called react-devtools. React-devtools is actually developed alongside the main react project and even is part of the same Github repository. The best know version is probably the Google Chrome extension but there are defintly reasons to try the standalone version.

There are mainly two usecases where you want to use the standalone version, and not the browser extension:

  1. You are debugging a project inside an iFrame e.g. embedded Shopify app
  2. You are using a browser that does not have an react-devtools extension.
No react devtools here (usecase one). The react-devtools exentension will only show you the outside of the iFrame, which is not what we are interested in.

If you have answer yes to one or more of the above use cases, react-devtools standalone is the way to go:

Installation

Install the react-devtools package. Because this is a development tool, a global install is often the most convenient:

# Yarn
yarn global add react-devtools

# NPM
npm install -g react-devtools

Now find the index.html file of your react app (if you used create-react-app it will be in located in <projectfolder>/public/index.html) and add the marked line like this:

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://localhost:8097"></script>
<meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
...

Usage

Now since you modified and saved your index.html file, start react-devtools from your shell by simply invoking:

react-devtools

Now fire up your react-app in the browser and devtools should be ready to go:

Success! React-devtools works and connected to the browser.

I hope you found this article helpful. If you have any questions or suggestions please leave a comment.

--

--

--

Writing on SaaS entrepreneurship, building a SaaS business

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React, Threejs, and Mobx-state-tree

Hi written in green blocks on a black background

Flexible SVG components in React

Installing Cucumber with Cypress and cypress-cucumber-preprocessor

Nuxt with Supabase template recipe

Exercise with React, Recoil, Nodejs and Express: starting from scratch — part 4

Do’s and Don’ts to Keep in Mind for a Clean and Well Coded Angular App.

Custom Service Worker in any app with esbuild

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
Alexander Hupfer

Alexander Hupfer

Writing on SaaS entrepreneurship, building a SaaS business

More from Medium

REACT (PART-2)…

Putting Custom Images in your React App

Use Immerjs with useState hook in React to modify complex states and arrays.

onMouseEnter and onMouseLeave — A simple way to hover in React