Visualize your React components as you interact with your application.
Tell Me More

About

Our DevTool allows you to picture your components, state and props as a DOM tree visualization. It's also interactive. As you trigger state changes within your app (e.g., a click event), the visualization will update as well. The ability to visualize state changes and identify where props are being passed down can make debugging React applications easier.

Responsive image

Getting Started

  • 1

    Install

    Install React Scope from the Chrome web store. And, if you haven't already, install React Developer Tools.

  • 2

    Enable Settings

    Enable "Allow access to file URLs" in the extension settings for React Scope.

  • 3

    Open Your App

    Run your React application.

  • 4

    Open React Scope

    Open Chrome Developer Tools -> React Scope panel. Start visualizing your code!

Our Team

Hello, it's nice to meet you.

Kevin Gabinete

Software Engineer

Jonathan Lee

Software Engineer

Tiffany Lin

Software Engineer

Ringo Yip

Software Engineer