Degub Tool For React Developers

Latest Version

Version
1.2
Update
July 13, 2024
Size
35.93KiB
Developer
Category
Users
4
Rating
0 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
See more

X PANEL Extension

💡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--RXP, where \\ 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
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "X PANEL", "description": "Degub Tool For React Developers", "version": "1.2", "manifest_version": 3, "devtools_page": "devtools.html", "icons": { "16": "icon16.png" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "icon16.png" } }, "background": { "service_worker": "background.js" }, "host_permissions": [ "http://*/*", "https://*/*" ], "content_scripts": [ { "js": [ "content.js" ], "matches": [ "http://127.0.0.1/*", "https://127.0.0.1/*", "http://localhost/*", "https://localhost/*" ] } ]}
Read more

Similar Extensions

icon

Atomic CSS Devtools Extension · Developer Tools 4 15 ★ 196KiB

icon

Anti Anti Debug Extension · Developer Tools 4 24 ★ 15.35KiB

icon

React code finder Extension · Developer Tools 4 5 ★ 2.95MiB

icon

React Inspector Extension · Developer Tools 4 8 ★ 26.91KiB

icon

PixiJS DevTools Extension · Developer Tools 4 7 ★ 318KiB

icon

React Scan Toggle Extension · Developer Tools 4 3 ★ 48.71KiB

icon

GrowthBook DevTools Extension · Developer Tools 4 5 ★ 694KiB

icon

BugHerd: Visual Feedback Tool for Websites Extension · Developer Tools 4 34 ★ 3.88MiB

icon

React Developer Tools Extension · Developer Tools 4 1576 ★ 1.56MiB

icon

LocatorJS Extension · Developer Tools 4 64 ★ 190KiB

icon

Solid Devtools Extension · Developer Tools 4 7 ★ 123KiB

icon

Ember Inspector Extension · Developer Tools 4 345 ★ 3.49MiB

icon

React Context DevTool Extension · Developer Tools 4 21 ★ 2.35MiB

icon

Web Component DevTools Extension · Developer Tools 4 9 ★ 1.74MiB

icon

HTML Validator Extension · Developer Tools 4 37 ★ 2.5MiB

icon

React Query Rewind Extension · Developer Tools 4 4 ★ 538KiB

icon

React Hook Form Developer Tools Extension · Developer Tools 4 7 ★ 117KiB

icon

Siemens Web Framework DevTools Extension · Developer Tools 4 1 ★ 634KiB

icon

Deeper Dive Extension · Developer Tools 4 4 ★ 32.31KiB

icon

RSC Devtools Extension · Developer Tools 4 9 ★ 175KiB

icon

ProseMirror Developer Tools Extension · Developer Tools 4 5 ★ 164KiB

icon

HTML to React Extension · Developer Tools 4 4 ★ 342KiB

icon

Snowplow Debugger Extension · Developer Tools 4 9 ★ 448KiB

icon

Web Developer Tool for Chrome Extension · Developer Tools 4 21 ★ 30.89KiB