Debuggningsverktyg är avgörande för att analysera kod och identifiera fel. Chrome Developer Tools erbjuder en mängd olika funktioner som hjälper dig att övervaka nätverksförfrågningar och förstå hur din applikation kommunicerar med servern. I denna handledning fokuserar vi på Fetch-Breakpoints, som gör det möjligt att pausa koden så fort en nätverksförfrågan sker. Detta ger dig djupare insikter i din apps funktionalitet och hjälper dig att lösa eventuella problem snabbt.
Viktigaste insikter
- Fetch-Breakpoints möjliggör paus av koden vid varje nätverksförfrågan.
- Du kan ange specifika URL:er för att styra beteendet målinriktat.
- I avsnittet "Network" i Developer Tools kan du följa vilka förfrågningar som gjorts och av vem de initierades.
Steg-för-steg guide
1. Åtkomst till Developer Tools
För att kunna arbeta med Fetch-Breakpoints måste du först öppna Chrome Developer Tools. Detta kan du göra genom att klicka på de tre punkterna i övre högra hörnet av Chrome, sedan gå till "More Tools" och slutligen "Developer Tools". Alternativt kan du också använda tangentkombinationen Ctrl + Shift + I på Windows eller Cmd + Option + I på Mac.
2. Navigera till Källkod
I Developer Tools hittar du flikarna "Elements", "Console", "Sources", "Network" och många fler. Du måste nu klicka på fliken "Sources" för att komma åt källan till ditt projekt. Här kan du se din JavaScript-kod och sätta Breakpoints.
3. Skapa en Fetch-Breakpoint
Inom avsnittet "Sources" finns en sektion för "XHR" eller "Fetch-Breakpoints". För att sätta en Fetch-Breakpoint, klicka på den motsvarande knappen för att lägga till en ny breakpoint. Du ombeds ange en URL eller en del av en URL för att specificera Breakpoint. Om du inte anger något kommer Breakpoint att aktiveras för alla Fetch-förfrågningar som genomförs.
4. Utlösa Breakpoint
För att testa om Fetch-Breakpoint är korrekt inställd, utför en åtgärd som utlöser en Fetch-förfrågan - till exempel genom att klicka på en knapp som utför en dataförfrågan. Om Breakpoint fungerar korrekt, pausar koden vid den punkten och visar dig aktuell kodstatus.
5. Kontrollera nätverksförfrågan
När koden har pausats har du möjlighet att kontrollera variabelns aktuella status och analysera nätverksförfrågan. Här kan du säkerställa att de förväntade datan hämtas. Om du till exempel observerar en variabel i din kod som utför Fetch-förfrågan, kan du se om rätt ändpunkt adresseras.
6. Konfigurera specifika Breakpoints
Om du endast är intresserad av vissa Fetch-förfrågningar, kan du lägga till en ny Breakpoint och ange en specifik URL. Till exempel kan du ställa in URL:en på "main.js". Om du sedan utför Fetch-förfrågan för denna URL ska Breakpoint utlösas. Om du inte anger URL:en kommer Breakpoint att gälla för alla nätverksförfrågningar, vilket är användbart för att undersöka generella problem.
7. Kontrollera Initiatoren
För att få mer information om orsaken till en Fetch-förfrågan, växla till fliken "Network" i Developer Tools. Där ser du en lista över alla utförda Fetch-förfrågningar. Kolumnen "Initiator" visar dig vilken del av din kod som initierade förfrågan. Genom att klicka på en av dessa poster kommer du till motsvarande rad i "Sources"-fliken.
8. Slutliga Kontroller
När du gör justeringar i din kod, till exempel ändringar i URL, se till att uppdatera utvecklarverktygen för att förändringarna ska gälla. Du kan enkelt göra detta genom att uppdatera sidan. Kontrollera sedan om Fetch-förfrågan fungerar korrekt igen och om Breakpoint utlöses som önskat.
Summering
I denna handledning har du lärt dig hur du använder Fetch-breakpoints i Chrome Developer Tools för att avbryta koden vid nätverksförfrågningar. Du har lärt dig hur du kan ställa in specifika breakpoints för att stoppa koden endast på vissa ställen, vilken information du kan läsa av från Developer Tools och hur du kan spåra vem som utlöste Fetch-förfrågan.
Vanliga frågor
Vad är Fetch-breakpoints?Fetch-breakpoints tillåter dig att avbryta koden på en specifik plats när en Fetch-förfrågan skickas till servern.
Hur ställer jag in en Fetch-breakpoint?Du kan sätta en Fetch-breakpoint i fliken "Källor" i Chrome Developer Tools genom att ange en URL eller en allmän inställning för alla Fetch-förfrågningar.
Hur kan jag kontrollera om min Fetch-breakpoint fungerar?Du kan testa detta genom att utföra en åtgärd som utlöser en Fetch-förfrågan. Felsökaren bör avbryta om brytpunkten är aktiv.
Vad gör jag om inga brytpunkter aktiveras?Se till att URL:en är korrekt inmatad och att koden som utför Fetch-förfrågan verkligen nås. En omstart av sidan kan också hjälpa.
Hur kan jag se initiativtagaren till en Fetch-förfrågan?Du kan se initiativtagaren i fliken "Nätverk" i Developer Tools. Där visas vilken del av din kod som utlöste förfrågan.
