Degub Tool For React Developers
X PANEL Extension
📈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-
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
Source Manifest.json
Similar Extensions
Atomic CSS Devtools 4 15 ★ 196KiB
Anti Anti Debug 4 24 ★ 15.35KiB
React code finder 4 5 ★ 2.95MiB
React Inspector 4 8 ★ 26.91KiB
PixiJS DevTools 4 7 ★ 318KiB
React Scan Toggle 4 3 ★ 48.71KiB
GrowthBook DevTools 4 5 ★ 694KiB
BugHerd: Visual Feedback Tool for Websites 4 34 ★ 3.88MiB
React Developer Tools 4 1576 ★ 1.56MiB
LocatorJS 4 64 ★ 190KiB
Solid Devtools 4 7 ★ 123KiB
Ember Inspector 4 345 ★ 3.49MiB
React Context DevTool 4 21 ★ 2.35MiB
Web Component DevTools 4 9 ★ 1.74MiB
HTML Validator 4 37 ★ 2.5MiB
React Query Rewind 4 4 ★ 538KiB
React Hook Form Developer Tools 4 7 ★ 117KiB
Siemens Web Framework DevTools 4 1 ★ 634KiB
Deeper Dive 4 4 ★ 32.31KiB
RSC Devtools 4 9 ★ 175KiB
ProseMirror Developer Tools 4 5 ★ 164KiB
HTML to React 4 4 ★ 342KiB
Snowplow Debugger 4 9 ★ 448KiB
Web Developer Tool for Chrome 4 21 ★ 30.89KiB