React-codezoeker in Chrome met OffiDocs

PRODUCTBESCHRIJVING

Chrome extension voor React-ontwikkelaar

Activeer de extension in uw ontwikkelomgeving en klik met de rechtermuisknop om de broncode van het onderdeel direct te vinden en te wijzigen!

*******************************

## Inleiding
React Code Finder is een krachtige ontwikkeltool extension ontworpen voor Chrome. Deze extension is bedoeld om React-ontwikkelaars te helpen code efficiënter en sneller te inspecteren, interpreteren en bewerken, rechtstreeks vanuit de webbrowser.
## Functies
- Codetracking: Met één muisklik kunt u elk React-component op uw webpagina volgen. Deze tool markeert de exacte locatie van het broncodebestand, tot op de specifieke regel en kolom van het component.
- Live codebewerking: een editor ingebouwd in het Dev Tools-paneel maakt directe codewijzigingen mogelijk. Je kunt de codewijzigingen direct in je browser toepassen, waardoor je geen aparte teksteditor of IDE nodig hebt.

## Wie profiteert ervan?
React Code Finder is ontzettend handig voor:
- Ontwikkelaars die met webontwikkeling werken met React
- Ontwikkelaars die snel delen van hun code willen vinden
- Ontwikkelaars die code in realtime willen bewerken en de wijzigingen in de webbrowser willen zien

## Install
React Code Finder toevoegen aan Chrome is eenvoudig. Ga gewoon naar de Chrome Webwinkel en klik op de knop 'Toevoegen aan Chrome'. De extension is dan klaar voor gebruik.

## Hoe te gebruiken
Om React Code Finder optimaal te benutten, heb je een command-line interface (CLI) nodig. Dit zijn de stappen:

1. Installeer de CLI: Voer de opdracht `npx react-code-finder-server` uit om de benodigde CLI voor React Code Finder uit te voeren. (Als u een specifieke poort wilt gebruiken, voeg dan de vlag -p toe, bijvoorbeeld `-p 8080`)
2. Start React Code Finder: Zodra de CLI actief is, kunt u React Code Finder starten via uw Chrome browser.
3. Begin met navigeren en bewerken: Navigeer naar de webpagina die u wilt inspecteren. Nu kunt u beginnen met het volgen en direct bewerken van de React-componenten met behulp van de editor van het Dev Tools-paneel.

Met React Code Finder streef ik naar een soepeler en efficiënter ontwikkelproces. Ervaar vandaag nog een productievere ontwikkelomgeving met React Code Finder!

## Beperkingen

Werkt niet met React-servercomponenten (RSC).
In deze extension werkt op basis van kruisverwijzingen tussen state node (HTMLElement) en ReactElement.

https://github.com/vercel/next.js/discussions/64591

# Release-opmerkingen

2.2.7 (2024.12.03)
- Voeg React-versiedekking toe

2.2.4 (2024.11.17)
- Vaste initiële logica

2.2.3 (2024.11.05)
- Vaste lay-out, netwerkfoutmelding
- Verbeterde automatische detectiefunctie

2.2.0 (2024.10.16)
- Nieuw: Automatische aan/uit-functie toegevoegd: react-code-finder wordt nu automatisch in-/uitgeschakeld wanneer u het opent of sluit in devtools.
- Mogelijkheid toegevoegd om de IDE te openen, zelfs als de react-code-finder-server niet actief is. De voorkeurs-IDE kan worden aangepast op de optiespagina (standaard: vscode).

2.1.3
- Vaste lay-out, functienaam

2.1.0
- Bug opgelost met 2 of meer React rootFIber-conflicten
- Viewer toegevoegd om de rekwisieten van de huidige bron te bekijken

React-codezoeker op het web extension geïntegreerd met de OffiDocs Chromium online.