X PANEL - Chrome Web Store
Item media 2 screenshot
Item video thumbnail
Item media 2 screenshot
Item video thumbnail
Item video thumbnail
Item media 2 screenshot

Overview

Degub Tool For React Developers

💡It is a chrome extension that can improve and speed up the debugging process for react applications 📈It resolves the common problem that occours in every Big React Application, when there is something to change it's so hard to find the relative file component, maybe nested in another component, nested in another component and so on.. 🔎So basically this extension helps you to find that file is simple as hover on the element. ✅Yes, just by hovering on that element you can see the path of that element like "/src/component/navbar.jsx" In addition you can open directly that file in Visual Studio Code by clicking on it. 1. React x panel recognizes every component that follows this pattern RXP-<id>-RXP, where \<id> is unique identifier that you can choose, **so you have to add this id on every component that you want to track, otherwise it will be ignored 2. Then, in google chrome follow these steps in the dev tool (on the url of your application) 3. That's the result 4. Now you can prompt your react app src (without /src at the end) like this: 5. Now you can finally debug your react app ☀️ if you want to contribute source code: https://github.com/Giuseppe7887/x-panel

0 out of 5No ratings

Google doesn't verify reviews. Learn more about results and reviews.

Details

  • Version
    1.2
  • Updated
    July 14, 2024
  • Offered by
    Giuseppe7887
  • Size
    35.93KiB
  • Languages
    English
  • Developer
    Email
    giuseppegravante078@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

VisBug

4.8(244)

Open source browser design tools

HTML Validator

3.4(36)

Add HTML Validator in Developer Tools

Solid Devtools

5.0(7)

Chrome Developer Tools extension for debugging SolidJS applications.

Ember Inspector

4.8(343)

Tool for debugging Ember applications.

Anti Anti Debug

4.6(16)

Be able to use developer tools again

React Inspector

3.2(8)

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

RSC Devtools

4.9(9)

React Server Components network visualizer

GrowthBook DevTools

3.8(6)

GrowthBook's Visual Editor and SDK Debugger

BugHerd: Visual Feedback Tool for Websites

4.2(35)

BugHerd is a visual feedback tool for websites

Owl devtools

4.8(17)

Chrome devtools extension for Odoo Owl framework

React Developer Tools

4.0(1.5K)

Adds React debugging tools to the Chrome Developer Tools. Created from revision ccb20cb88b on 7/3/2024.

LocatorJS

4.2(57)

LocatorJS Chrome Extension - option-click to code (ReactJS)

VisBug

4.8(244)

Open source browser design tools

HTML Validator

3.4(36)

Add HTML Validator in Developer Tools

Solid Devtools

5.0(7)

Chrome Developer Tools extension for debugging SolidJS applications.

Ember Inspector

4.8(343)

Tool for debugging Ember applications.

Anti Anti Debug

4.6(16)

Be able to use developer tools again

React Inspector

3.2(8)

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

RSC Devtools

4.9(9)

React Server Components network visualizer

GrowthBook DevTools

3.8(6)

GrowthBook's Visual Editor and SDK Debugger

Google apps