An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

Last update: May 17, 2022

This project has migrated to github.com/facebook/react

The source code for the v3 of the extension can be found in the v3 branch.

To build the v3 browser extension from source:

git checkout v3

# Install dependencies and build the unpacked extension
yarn install
yarn build:extension

# Follow the on-screen instructions to complete installation

GitHub

https://github.com/facebook/react-devtools
Comments
  • 1. [React Native] Devtools can't find React within the Web Worker (help wanted)

    Update from Maintainers: DevTools works with React Native again! Follow these instructions: http://facebook.github.io/react-native/docs/debugging.html#react-developer-tools

    React Native now runs within a Web Worker on Chrome so that it gets a more pure and isolated JS environment that more closely mimics JSC on the device but this breaks the React devtools. @skevy pointed this out and I didn't see a task open yet. The fix might need to happen on the RN side but I figured that people thinking about the devtools are more likely to have a solution come to mind.

    Repro: Run an app with RN master, run it in the Chrome debugger, try to use React devtools but "React" option doesn't show in the Web Inspector.

    Reviewed by ide at 2015-09-26 04:02
  • 2. react-devtools for Safari

    Maybe this is the wrong repo to request this, but it's becoming more and more common for people to build React apps embedded in ios webviews. The only way to currently debug those is using the Safari developer tools. It would be great if there was a port of the react-devtools for Safari.

    Reviewed by oveddan at 2015-02-04 13:48
  • 3. Better filter UI

    Builds on top of PR #640 and...

    • Adds inline search highlights so it's obvious at a glance that you're viewing a filtered set of the data and not the full tree.
    • Tidies up alignment of toolbar
    • Makes focused state of search input look more like Chrome search and less aqua
    • Make the cancel button a little more subtle and improve its vertical alignment
    • Adds search icon to search input
    • Removes regex checkbox in favor of auto-detection based on search text (eg "foo" vs "/foo")
    • Added error handling for invalid RegExps

    Input states

    Default | Focused | Invalid regex --- | --- | --- screen shot 2017-04-27 at 7 22 42 pm | screen shot 2017-04-27 at 7 22 59 pm | screen shot 2017-04-27 at 7 23 35 pm

    Plaintext search

    plaintext search demo

    RegExp search

    RegExp search demo

    Resizing

    resize demo

    Browsers / Styles

    Chrome

    Chrome screenshot

    Safari

    Safari screenshot

    Firefox

    Firefox screenshot

    Electron

    Electron screenshot
    Reviewed by bvaughn at 2017-04-27 18:46
  • 4. ☂️ Hooks umbrella task

    Support hooks! (to be filled in later)

    Features

    • [ ] Support inspecting complex values (like objects and arrays) in useState. (https://github.com/bvaughn/react-devtools-experimental/commit/0008bb00)
    • [x] For the selected component, show hooks name, location, and value (when applicable) in props panel. (Related to facebook/react/pull/14085)
    • [ ] Make sure to include support for memo and forwardRef components.

    Bugs

    • [ ] #1216: Highlight Updates incorrectly reports an updates in a tree component.
    Reviewed by bvaughn at 2018-11-02 22:11
  • 5. Support Firefox

    Due to Chrome’s bugginess I prefer developing in Firefox and creating workarounds for Chrome later.

    Creating a version of this for Firefox’ dev tools would help me maintaining this workflow.

    Reviewed by flying-sheep at 2014-11-29 19:51
  • 6. Update code to latest Flow version and fix violations

    We are an a very old version of Flow. I’d appreciate if somebody could update the version and then go through all violations, either fixing the code or adding suppressions where reasonable.

    Reviewed by gaearon at 2017-03-08 22:17
  • 7. Support Iterators/Iterables, Immutable, other inspector improvements

    Features / Improvements:

    • Improve inspection/rendering of nested Arrays
    • Improve inspection of TypedArrays (rendered similarly to Arrays)
    • Improve display of ArrayBuffers and DataViews (Shows size, no deep inspection)
    • Iterables are rendered as <constructor name>(…)
    • Iterables are read only
    • Iterables entries are rendered as lists/arrays
    • Inspecting Iterables/Immutable values is greatly improved (but keyed collections need improving. See below)
    • ES6 Map/Set objects no longer throw an error

    Addresses much of Issue #52 and was inspired by PR #149, particularly @gaearon's comment

    Code Change Summary:

    • Moved duplicated getIn(base, path) to separate file /agent/getIn.js
    • Refactored /agent/dehydrated.js to improve readability (in addition to enhancements)
    • Added readOnly and uninspectable propteries to meta for dehydrated values where appropriate
    • /fronted/DataView/DataView.js DataItem Component check for uninspectable when rendering
    • Added typed_array, array_buffer, data_view, iterator cases to Propval.js and previewCoplex.js in addition to some refactoring for readbility
    • Added several props to empty elements to test/example to demonstrate changes.

    Caveats / For future Improvement

    Typed Arrays are set read only in the inspector with these changes - Editing them (in the current released version) would cause them to be converted to objects, but it should be possible to handle this.

    Iterators/Iterators are read only for fairly obvious reasons, however it might be reasonable to implement a live-edit feature for built-in iterables (i.e. Map, Set, TypedArray).

    Improvement of Keyed iterables/iterators

    With these changes the inspector / DataView renders entries of iterators as Arrays of [key, value] arrays i.e. 0: Array[2], 1: Array[2], ... rather than keyA: <value>, keyB: <value>, .... Determining if an iterable is a keyed iterable is tricky because an iterator entry can be of any value. Simply checking that entries are arrays of length 2 is insufficient because a Set of arrays (see tuplesSet in example/test/target.js) would 'break' this approach. In addition ES6 Map and Immutable.Map allow complex keys and use Same-value-zero equality to determine uniqueness. This means the keys/attribute strings in the inspectors path cannot easily be converted to strings through either toString or JSON.stringify without breaking correctness in some cases.

    Requesting Feedback & Help for:

    • Code style, improvements, etc
    • UI/UX/Styling/Color tweaks for Iterables, Typed Arrays, etc?
    • Ideas for handling keyed iterable case
    • Community assistance in testing with other collection libraries e.g. seamless-immutable, etc

    Finally Substantial unit test coverage is on it's way, I just wanted to get some eyeballs on this first!

    Reviewed by cmmcleod at 2016-12-01 07:39
  • 8. Add a checkbox to hide HOC wrappers in tree-view

    A pain point I've shared with many others is the congestion of the devtools tree when composing a large app with many HOCs. This PR introduces a "Hide Wrappers" checkbox that will hide all component wrappers from the tree view, instead showing only the tree of components that render at least some DOM content.

    An HOC is determined to be any node that only returns a single child that is a non-DOM component.

    Happy to talk about better ways of doing this, but I'd love to have something like available!

    devtools

    Reviewed by zackargyle at 2017-02-10 01:02
  • 9. Base16 themes

    Resolves #636

    This PR includes:

    • Extract colors from static styles into new base16 theme.
    • Add several base16 themes, including a default that looks like the current Chrome-like devtools colors.
    • Add settings icon (gear) to devtools to allow users to select a theme.
    • Use-selected theme is saved using localStorage. This works in the Chrome extension, Firefox add-on, and Electron stand-alone app without requiring any new permissions.
    • Refactors styles to avoid assign(style1, style2, style3) in render method. Instead new style-factory-functions were added (eg tagStyle(theme)). This cleans up the render method in many places and works better with themes.
    • Added a theme property to most components contextTypes as a way of propagating theme. When theme changes, the top-level application is deep-re-rendered by changing a key on the root node (that equals the selected theme's name).

    Demos

    Theme toggling

    Theme toggling

    Selection and hovering

    Selection and hovering

    Search results highlighting

    Search results highlighting

    ReactNative style editor

    (The green strip to the right came from my screen recorder. It's not actually in the UI.) ReactNative style editor

    Tabs UI

    Tabs UI

    Relay UI

    Relay UI
    Reviewed by bvaughn at 2017-05-08 05:40
  • 10. Generic support for third-party data objects inspection (ImmutableJS, BackboneJS, etc)

    General problem is that sometimes developers are using data objects which are more sophisticated than raw JS objects and arrays. Typically, these objects are represented as some facade class at the top level holding an actual state inside. Navigating through such an objects in props as well as in state is clumsy and the property inspector is almost unusable.

    There is a number of issues on this topic (https://github.com/facebook/react-devtools/issues/83, https://github.com/facebook/react-devtools/issues/52). And there was an attempt to solve it in the PR specifically for ImmutableJS: https://github.com/facebook/react-devtools/pull/149

    In this PR I attempt to solve the problem in the way that it would be easy for data framework developers to customize the appearance of data objects in the inspector. I'm doing it to make NestedReact models and collections look good in the inspector, but it's trivial to do it for any other data library including ImmutableJS (which I can do as well to resolve that pool of duplicate issues as soon as this PR will be accepted).

    Idea is to attach state inspector functions to the object's prototype, which will take an object instance and return plain JS object or array (whatever is appropriate for the particular case). Whenever an object has state inspector it will be used to transform its state. Using BackboneJS as an example, something like this needs to be done to make models and collections look good:

    if (__REACT_DEVTOOLS_GLOBAL_HOOK__) {
      const { addInnerStateInspector } = __REACT_DEVTOOLS_GLOBAL_HOOK__;
      if (typeof addInnerStateInspector === 'function') {
        addInnerStateInspector( Backbone.Model, x => x.attributes );
        addInnerStateInspector( Backbone.Collection, x => x.models );
      }
    }
    

    Another example - Date instances currently appears as an empty object (https://github.com/facebook/react-devtools/issues/388). Which is fixed by this PR in the following way:

    addInnerStateInspector( Date, ( x : Date ) => ({
       local : `${ x.toDateString() } ${ x.toTimeString() }`,
       iso : x.toISOString(),
       timestamp : x.getTime(),
    });
    

    This API can be used internally to improve the appearance of built-in JS classes, by data framework developers to make their custom classes appear well, and by regular developers as well.

    In the case of the more sophisticated data structure, the corresponding raw JS representation can be calculated inside of the inspector functions and memorized in the data object's instance (which will work perfectly in case of ImmutableJS).

    P.S.: One more issue this PR resolves (https://github.com/facebook/react-devtools/issues/390) is an exception being thrown when you're trying to inspect an object with get prop(){...} calculated properties defined on the prototype.

    Reviewed by gaperton at 2017-01-05 02:48
  • 11. Uncaught TypeError: Invalid value used as weak map key @backend.js 525

    This happens on chrome latest with devtools 0.14.1 when I interact with my app. I did a console.log(element) on line 524 in backend.js and when this error appears, one of the elements there is null.

    Uncaught TypeError: Invalid value used as weak map keygetId @ backend.js:525
    (anonymous function) @ backend.js:569
    onUpdated @ backend.js:568
    (anonymous function) @ backend.js:1015
    (anonymous function) @ VM55:42
    emit @ VM55:41
    performUpdateIfNecessary @ backend.js:2290
    obj.(anonymous function) @ backend.js:2363
    runBatchedUpdates @ ReactUpdates.js?ce09:151
    Mixin.perform @ Transaction.js?6dff:134
    Mixin.perform @ Transaction.js?6dff:134
    assign.perform @ ReactUpdates.js?ce09:95
    flushBatchedUpdates @ ReactUpdates.js?ce09:175
    wrapper @ ReactPerf.js?ef93:70
    Mixin.closeAll @ Transaction.js?6dff:207
    Mixin.perform @ Transaction.js?6dff:148
    ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70:66
    batchedUpdates @ ReactUpdates.js?ce09:110
    ReactEventListener.dispatchEvent @ ReactEventListener.js?2365:174
    
    Reviewed by terebentina at 2015-09-09 09:08
A devtool for @antv/g in chrome
A devtool for @antv/g in chrome

G Devtool A devtool for @antv/g in chrome, it's still WIP, you can load it in unpack way; Quick Start Import unpacked plugin Open the Extension Manage

May 6, 2022
fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI
fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI

fflow Supercharge your React development process Explore the docs » View Demo · Report Bug · Request Feature Give a ⭐️ if our project helped or intere

May 5, 2022
This is a simple VSCODE extension that shows the symbols and outlines for a React file.
This is a simple VSCODE extension that shows the symbols and outlines for a React file.

React Outline This is a simple extension that shows the symbols and outlines for a React file. It can detect custom components and also html tags. Her

Jan 16, 2022
A browser extension for using kbar in HackMD
A browser extension for using kbar in HackMD

hackbar A browser extension for using kbar in HackMD Report Bug · Request Featur

Mar 10, 2022
A set of tools to facilitate react-redux development and decouple logic from compontents
A set of tools to facilitate react-redux development and decouple logic from compontents

react-redux-api-tools This project provides a middleware and a request helper to streamline react-redux data fetching. Installing Just run npm install

Mar 14, 2022
Raycast lets you control your tools with a few keystrokes.
Raycast lets you control your tools with a few keystrokes.

Raycast Extensions (Beta) Raycast lets you control your tools with a few keystrokes. This repository contains all extensions that are available in the

May 18, 2022
Questions-app - A React app allows users to generate as many random questions as they want
Questions-app - A React app allows users to generate as many random questions as they want

Questions App Projeto A aplicação permite aos usuários gerar quantas perguntas a

Mar 4, 2022
Interview Scheduler: a single-page application (SPA) that allows users to book
Interview Scheduler: a single-page application (SPA) that allows users to book

Interview Scheduler Description Interview Scheduler is a single-page application

Dec 30, 2021
transform react class component to function component
transform react class component to function component

react-class-to-fc ⭐ 特性 将react class组件转化为react 函数组件 ?? 安装 npm i react-class-to-fc -g ?? 使用 ctfc -i react-demo.js -o fc.js 就会将 react-demo.js文件中的class组

Nov 22, 2021
A flexible, responsive, and easy-to-use crossword component for React apps.
A flexible, responsive, and easy-to-use crossword component for React apps.

Install npm install --save @jaredreisinger/react-crossword # or # yarn add @jaredreisinger/react-crossword Usage See also the styleguidist docs for

May 13, 2022
React Fiber renderer and component container for Regl

React Regl React fiber renderer and custom container for regl Install Recommended: (react|react-dom) @ 17.x and regl @ 2.1.x. npm install @psychobolt/

Apr 8, 2022
A simple and fully customizable React Native component that implements an Image Slider UI.
A simple and fully customizable React Native component that implements an Image Slider UI.

react-native-image-slider-box Announce: All Pull-Requests have been applied. CI/CD has been integrated to update the package automatically. How to sen

May 12, 2022
Component to build simple, flexible, and accessible toggle components
Component to build simple, flexible, and accessible toggle components

react-toggled ⚛️ Component to build simple, flexible, and accessible toggle components The problem You want a toggle component that's simple and gives

Mar 15, 2022
A mobile-first React prototyping tool with React-Bootstrap component integration
A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

Apr 17, 2022
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click

React Dev Inspector Introduction This package allows users to jump to local IDE code directly from browser React component by just a simple click, whi

May 12, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

May 19, 2022
Isolated React component development environment with a living style guide
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

May 16, 2022
React JSON inspector component
React JSON inspector component

React JSON Inspector Component React-based JSON inspector that features tree expansion and fast search. Live demo Installation npm install react-json-

May 7, 2022
Isolated React component development environment with a living style guide
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

May 17, 2022