Felsökning Reagera Infödda och Redux med att Reagera Native Debugger

Felsökning Reagera Infödda och Redux med att Reagera Native Debugger

Alla utvecklare som kommer att komma till en punkt när de jobbar där de ska ha för att felsöka koden. Ibland räkna ut hur man gör som kan vara en stor utmaning, med detta i åtanke gjorde jag en enkel Reagera Native projekt som använder Reagera Infödda och Redux, så att du kan se hur du konfigurerar Reagera Native Debugger.

Denna repo är här för att förklara hur man ställer Reagera Native Debugger och Redux. Efter att från och med den grundläggande felsökning alternativet, Chrome Developer Tools, det slutade med att jag söker runt efter ett bättre alternativ och jag slutade upp med att Reagera Native Debugger. Detta debugger har full uppsättning av utvecklare och felsökning funktioner som jag var ute efter, som ingår i Redux Developer Tools. Specifikt har du tillgång till följande:

  • Din JavaScript-kod
  • Chrome DevTools
  • Reagera DevTools
  • Redux DevTools

namn=bda0>Som din att utveckla ett projekt för var och en av dessa är värd sin vikt i guld och vill ha dem inslagna i en nätt liten paket är nästan för bra för att vara sant!

Installera Reagera Developer Tools och installera Repo

för Att få exempel igång med att Reagera Developer Tools, här är de grundläggande stegen för att komma igång:

  1. Kör garn installera från roten av projekt
  2. Öppna Reagera Native Debugger (stäng alla andra Reagerar Native Chrome DevTools felsökning fönster du har öppna)
  3. Kör garn ios för att starta iOS simulator

Efter att du bör se någonting som liknar det här med att Reagera Native Debugger och iOS-simulator att köra.

Reagera Native Debugger och iOS simulator

Nu att du har exempel kör kan du utföra alla dina standard felsökning och kontroll åtgärder. Till exempel om du vill se vilka uppgifter som kom in PressReducer, kan du gå till “Källor”, öppna fliken PressReducer.js – fil, lägga till en brytpunkt för linje 8, och uppdatera sedan simulator genom att trycka på CMD + r – på en Mac. Voila du ska slå din brytpunkt, för att sedan kunna logga ut saker i konsolen och dra muspekaren över vissa variabler!

Reagera Native Debugger och iOS simulator med brytpunkt

Redux DevTools Konfiguration

urvalet projektet är setup med grundläggande store konfiguration på grund av att man inte använder någon middleware. Om du vill använda en bit av middleware som redux-thunk, skulle du behöva ändra src/config/store.js – så här:


räkna>

följande delar av redux-devtools-förlängning API-globalt:

  • fönstret.__REDUX_DEVTOOLS_FÖRLÄNGNING__
  • fönstret.__REDUX_DEVTOOLS_FÖRLÄNGNING_KOMPONERA__
  • fönstret.__REDUX_DEVTOOLS_FÖRLÄNGNING__.connect

namn=65c9>Detta är varför denna version använder global __REDUX_DEVTOOLS_FÖRLÄNGNING_KOMPONERA__ och bara faller tillbaka till redux skriva – om att inte tillgängligt.

Använda Debugger Uttalanden

Med denna inställning om du har Snyggare fixa din kod på spara, måste du lägga till debugger – satser med en extra kommentar för att inaktivera ESLint, så att de inte rensas ut. Du kan åstadkomma detta genom att lägga till följande kod där du vill lägga till en debugger – ett uttalande.

// eslint-disable-nästa-nr-debugger
debugger;

det Här kommer att förhindra ESLint från rapporteringen debugger – uttryck som ett fel och sedan ha Snyggare städa upp det under spara om du har konfigurerat.

avsluta

Efter att ha läst detta och att spela runt med arkiv, bör du:

  • Veta hur man använder Reagera Native Debugger i ditt projekt
  • kunna konfigurera project för att använda Redux DevTools i att Reagera Native Debugger

namn=4429>Som utvecklare, ha en kvalitet felsökning miljö kan leda dig till att bli mer produktiva, samtidigt som det hjälper dig att spåra irriterande buggar och att skapa nya och fantastiska funktioner!

We will be happy to hear your thoughts

Leave a reply