Brug Fetch Breakpoints effektivt i Chrome Developer Tools

Fejlfinding-værktøjer er afgørende for at analysere kode og identificere fejl. Chrome Developer Tools tilbyder en række funktioner, der hjælper dig med at overvåge netværksanmodninger og forstå, hvordan din ansøgning kommunikerer med serveren. I denne vejledning fokuserer vi på Fetch-Breakpoints, der giver dig mulighed for at stoppe koden, så snart der foretages en netværksanmodning. Dette giver dig mulighed for at få dybere indblik i hvordan din app fungerer og hurtigt løse eventuelle problemer.

Vigtigste konklusioner

• Fetch-Breakpoints giver mulighed for at stoppe koden ved hver netværksanmodning.
• Du kan specificere specifikke URL'er for at styre adfærden målrettet.
• I netværksområdet i Developer Tools kan du følge, hvilke anmodninger der er foretaget, og hvem der udløste dem.

Trin-for-trin-guide

1. Adgang til Developer Tools

For at kunne arbejde med Fetch-Breakpoints skal du først åbne Chrome Developer Tools. Dette kan gøres ved at klikke på menuen med tre punkter i øverste højre hjørne af Chrome, derefter navigere til "Flere værktøjer" og endelig "Udviklerværktøjer". Alternativt kan du også bruge genvejstasten Ctrl + Shift + I på Windows eller Cmd + Option + I på Mac.

2. Naviger til kilderne

I Developer Tools finder du fanerne "Elementer", "Konsol", "Kilder", "Netværk" og mange flere. Du skal nu klikke på fanen "Sourcer" for at få adgang til dit projekts kildekode. Her kan du se din JavaScript-kode og sætte Breakpoints.

3. Sæt en Fetch-Breakpoint

Inden for "Sources"-fanen er der en sektion for "XHR" eller "Fetch-Breakpoints". For at sætte en Fetch-Breakpoint skal du klikke på den tilsvarende knap for at tilføje et nyt breakpoint. Du bliver bedt om at indtaste en URL eller en del af en URL for at specificere breakpointet. Hvis du ikke indtaster noget, vil breakpointet blive aktiveret for alle Fetch-anmodninger, der udføres.

4. Udløs breakpointet

For at teste om Fetch-Breakpointet er korrekt sat, udfør en handling, der udløser en Fetch-anmodning - f.eks. ved at klikke på en knap, der udfører en dataanmodning. Hvis breakpointet fungerede korrekt, vil koden stoppe på dette tidspunkt og vise dig koden i nuværende tilstand.

5. Kontroller netværksanmodningen

Når koden stoppes, har du mulighed for at kontrollere de aktuelle variablers tilstand og analysere netværksanmodningen. Her kan du sikre dig, at de forventede data bliver hentet. Hvis du f.eks. har en variabel i din kode, der udfører Fetch-anmodningen, kan du se, om den korrekte slutpunkt bliver ramt.

6. Konfigurer specifikke breakpoints

Hvis du kun er interesseret i specifikke Fetch-anmodninger, kan du tilføje et nyt breakpoint og angive en specifik URL. For eksempel kan du indstille URL'en til "main.js". Når du herefter udfører Fetch-anmodningen til denne URL, skal breakpointet udløses. Hvis du ikke angiver URL'en, vil breakpointet gælde for alle netværksanmodninger, hvilket er nyttigt til at undersøge generelle problemer.

7. Kontroller initiator

For at få mere at vide om årsagen til en Fetch-anmodning kan du skifte til fanen "Netværk" i Developer Tools. Her ser du en liste over alle udførte Fetch-anmodninger. Søjlen "Initiator" viser dig, hvilken del af din kode der udløste anmodningen. Hvis du klikker på en af disse elementer, kommer du til den relevante linje i "Sources"-fanen.

8. Foretag de sidste kontrolleringer

Når du foretager justeringer til din kode, f.eks. ændringer af URL'en, skal du sikre dig, at du genindlæser developer tools for at anvende ændringerne. Dette kan gøres let ved at opdatere siden. Kontroller derefter, om Fetch-anmodningen igen fungerer korrekt, og om breakpointet udløses som ønsket.

Oversigt

I denne vejledning har du lært, hvordan du bruger Fetch-breakpoints i Chrome Developer Tools til at stoppe koden under netværksanmodninger. Du har lært, hvordan du kan oprette specifikke breakpoints for kun at stoppe på visse steder i din kode, hvilke oplysninger du kan aflæse fra Developer Tools, og hvordan du kan finde ud af, hvem der udløste Fetch-anmodningen.