Easily detect React components source code from Chrome!

Overview

React Inspector

YOU CAN TRY 👉 https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh

Easily detect React components source code from Chrome!

CleanShot 2022-09-02 at 18 08 23

The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac).
You can detect and open the React component source code easily.

  1. Run the Dev server and Open your react app.
  2. Press Ctrl+Shift+X (Command+Shift+X on Mac) on Chrome.
  3. Inspect your react components and click it.

You can edit the open in editor URL on the options page. If you are not VSCode user, you can edit it to your favorite editor URL-schemes.

CleanShot 2022-09-12 at 13 11 18

CleanShot 2022-09-12 at 13 10 27

Requirements

  • Installed React Developer Tools
  • Works only with development builds.
  • Source code must be stored on local disk

How it works

The React Inspector accesses the __REACT_DEVTOOLS_GLOBAL_HOOK__ set globally by the React Devtools and finds the React Fiber in the HTML element that the inspector hovered over. The React Fiber contains information about the source code that will be added during development, so we use that information to open the VSCode.

Reference

You might also like...
🌟 JavaScript Style Guide, with linter & automatic code fixer
🌟 JavaScript Style Guide, with linter & automatic code fixer

JavaScript Standard Style Sponsored by English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Ko

CodeSwing is an interactive coding playground for VS Code
CodeSwing is an interactive coding playground for VS Code

🎢 CodeSwing is an interactive coding playground for VS Code, that allows you to build/explore/learn rich web applications ("swings"). It's

Use SWC with Rollup to transform ESNext and TypeScript code.
Use SWC with Rollup to transform ESNext and TypeScript code.

rollup-plugin-swc SWC is an extensible Rust-based platform for the next generation of fast developer tools. This plugin is designed to replace rollup-

A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code

Agora React Web UIKit Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.

Embed code samples from different frameworks with a live preview inside your existing Docusaurus pages.
Embed code samples from different frameworks with a live preview inside your existing Docusaurus pages.

docusaurus-plugin-code-preview Embed code samples from different frameworks with a live preview inside your existing Docusaurus pages. Quick Installat

Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

React Hot Loader Tweak React components in real time ⚛️ ⚡️ Watch Dan Abramov's talk on Hot Reloading with Time Travel. Moving towards next step React-

📓 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

📑  CLI tool for creating demos of React components
📑 CLI tool for creating demos of React components

React DemoTab CLI 📑 Easily create demos of React components Maintaining example code and demo separately makes it painful, it's easy to get them out

Chai.js assertions and convenience functions for testing React Components with enzyme
Chai.js assertions and convenience functions for testing React Components with enzyme

chai-enzyme Chai.js assertions for enzyme. Table of Contents Installation Setup Debug output in assertion exceptions Assertions 1. checked() 1. classN

Comments
  • Path does not exist エラー

    Path does not exist エラー

    以下のように、path/to/file:x:undefined にjumpしようとしてエラーが起きます。 このページがただのReactではなく、React on Railsで動いているのが原因かもしれません。

    スクリーンショット 2022-09-07 12 29 46

    Reactのみで動いているページでは正常に動きます。 素晴らしい拡張機能ありがとうございます。

    good first issue 
    opened by pseuxide 3
  • Does not work with UI libraries such as emotion

    Does not work with UI libraries such as emotion

    To get the source code from fiber._debugOwner._debugSource, since the source code cannot be identified when the selected HTML is a production built UI library.

    ref: https://twitter.com/dona_sunday/status/1569263586996011009

    opened by hand-dot 0
  • Not working in the docker environment

    Not working in the docker environment

    docker環境下でも使えるようになると嬉しいです。ご検討よろしくおねがいします!

    具体的には以下のような状態です。 dockerfileで、以下のような感じの設定をしています。

    FROM node
    WORKDIR /usr/src/app
    # .../usr/src/app以下にファイルをコピーする処理等
    

    docker内では各componentが/usr/src/app以下に存在するためか、拡張機能により生成されるファイルのパスがlocal環境と食い違ってしまうため、「パスが存在しません」と表示されてしまう状況です 🙏

    opened by kd21 4
Chrome extension for improving and optimizing performance in React applications (Gatsby and Next.js compatible).

React Performance Tool Nominated for React Open Source Awards 2020 Reactime is a performance and debugging tool for React developers (Beta version for

OSLabs 1.7k Sep 28, 2022
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

Dominic Ming 7 Aug 11, 2022
Reactivity Debugger & Devtools Chrome Extension for SolidJS

Library of developer tools for debugging and visualizing SolidJS reactivity.

Damian Tarnawski 87 Sep 28, 2022
🦋 Jump to local IDE source code while click the element of browser automatically

?? Why When developing a React app, you have a lot of components in your app. Sometimes you may forget where the code is located that you want to edit

Frozen FIsh 99 Sep 20, 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 Supercharge your React development process Explore the docs » View Demo · Report Bug · Request Feature Give a ⭐️ if our project helped or intere

OSLabs Beta 116 Sep 6, 2022
Let's learn React by building react within 100 lines of code

kReact Let's learn React by building react within 100 lines of code ???? Medium article: https://kamesh-dev.medium.com/kreact-building-your-own-react-

kamesh sethupathi 6 Aug 11, 2022
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

zthxxx 811 Sep 25, 2022
The recommended Code Splitting library for React ✂️✨

React code splitting made easy. Reduce your bundle size without stress ✂️ ✨ . npm install @loadable/component Docs See the documentation at loadable-c

Greg Bergé 6.8k Sep 30, 2022
Sapling - A convenient way to traverse your React app in VS Code

Sapling - A convenient way to traverse your React app in VS Code

OSLabs Beta 461 Sep 8, 2022
Code Kitchen - a React live-coding playground

Code Kitchen is a React live-coding playground which allows the developers to embed React component demos into a React UI library’s web documents.

FreeWheel, a Comcast Company 64 Aug 27, 2022