Referentie voor foutopsporing in JavaScript

Kayce Basques

Sofia Emelianova

Ontdek nieuwe foutopsporingsworkflows met dit uitgebreide naslagwerk over de foutopsporingsfuncties van Chrome DevTools.

Zie Aan de slag met foutopsporing in JavaScript in Chrome DevTools voor meer informatie over de basisprincipes van foutopsporing.

Pauzeer code met breekpunten

Stel een breekpunt in, zodat u uw code midden in de uitvoering kunt pauzeren. Zie Uw code pauzeren met breekpunten voor meer informatie over het instellen van breekpunten.

Controleer waarden wanneer gepauzeerd

Terwijl de uitvoering wordt gepauzeerd, evalueert de debugger alle variabelen, constanten en objecten binnen de huidige functie tot aan een breekpunt. De debugger toont de huidige waarden inline naast de bijbehorende declaraties.

U kunt de console gebruiken om de geëvalueerde variabelen, constanten en objecten op te vragen.

Belangrijk punt: Terwijl de uitvoering is gepauzeerd, kunt u de huidige functie ook opnieuw starten en deze zelfs live bewerken .

Bekijk een voorbeeld van klasse-/functie-eigenschappen bij het aanwijzen van de muis

Terwijl de uitvoering is gepauzeerd, beweegt u de muis over een klasse- of functienaam om een ​​voorbeeld van de eigenschappen ervan te bekijken.

Stap door de code

Zodra uw code is gepauzeerd, loopt u er één expressie tegelijk doorheen, waarbij u gaandeweg de controlestroom en eigenschapswaarden onderzoekt.

Stap over de coderegel heen

Wanneer u bent gepauzeerd op een regel code die een functie bevat die niet relevant is voor het probleem dat u oplost, klikt u op Stap over om de functie uit te voeren zonder erin te stappen.

Stel dat u fouten oplost in de volgende code:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

Je bent gepauzeerd op A Door op Step over te drukken, voert DevTools alle code uit in de functie waar u overheen stapt, namelijk B en C . DevTools pauzeert vervolgens op D .

Stap in de coderegel

Wanneer u bent gepauzeerd op een regel code die een functieaanroep bevat die verband houdt met het probleem dat u oplost, klikt u op Stap in om die functie verder te onderzoeken.

Stel dat u fouten oplost in de volgende code:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

Je bent gepauzeerd op A Door op Step into te drukken, voert DevTools deze coderegel uit en pauzeert vervolgens op B .

Stap buiten de coderegel

Wanneer u bent gepauzeerd binnen een functie die geen verband houdt met het probleem dat u oplost, klikt u op Uitstappen om de rest van de functiecode uit te voeren.

Stel dat u fouten oplost in de volgende code:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

Je bent gepauzeerd op A Door op Step out te drukken, voert DevTools de rest van de code uit in getName() , wat in dit voorbeeld alleen maar B is, en pauzeert vervolgens op C .

Voer alle code uit tot een bepaalde regel

Bij het debuggen van een lange functie kan er veel code zijn die geen verband houdt met het probleem dat u debugt.

Je zou door alle lijnen heen kunnen stappen, maar dat kan vervelend zijn. U kunt een coderegelbreekpunt instellen op de regel waarin u geïnteresseerd bent en vervolgens op Scriptuitvoering hervatten klikken , maar er is een snellere manier.

Klik met de rechtermuisknop op de coderegel waarin u geïnteresseerd bent en selecteer Doorgaan naar hier . DevTools voert alle code tot dat punt uit en pauzeert vervolgens op die regel.

Hervat de uitvoering van het script

Als u de uitvoering van uw script na een pauze wilt voortzetten, klikt u op Scriptuitvoering hervatten . DevTools voert het script uit tot het volgende breekpunt, indien aanwezig.

Forceer uitvoering van script

Om alle onderbrekingspunten te negeren en de uitvoering van uw script te forceren, klikt u op Scriptuitvoering hervatten en houdt u deze ingedrukt en selecteer vervolgens Uitvoering van script afdwingen .

Wijzig de threadcontext

Wanneer u met webwerkers of servicemedewerkers werkt, klikt u op een context in het deelvenster Discussies om naar die context te schakelen. Het blauwe pijlpictogram geeft aan welke context momenteel is geselecteerd.

Het deelvenster Discussies op de bovenstaande schermafbeelding is blauw omlijnd.

Stel bijvoorbeeld dat u bent gepauzeerd op een onderbrekingspunt in zowel uw hoofdscript als uw servicewerkerscript. U wilt de lokale en globale eigenschappen voor de servicemedewerkercontext bekijken, maar het paneel Bronnen toont de hoofdscriptcontext. Door op de vermelding van de servicemedewerker in het deelvenster Discussies te klikken, kunt u naar die context overschakelen.

Door komma's gescheiden uitdrukkingen doorlopen

Belangrijk punt: Vanaf Chrome-versie 108 kan de Debugger zowel door puntkomma's gescheiden ( ; ) als door komma's gescheiden ( , ) expressies doorlopen.

Door door komma's gescheiden expressies te stappen, kunt u fouten in verkleinde code opsporen. Neem bijvoorbeeld de volgende code:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

Wanneer het is verkleind, bevat het een door komma's gescheiden foo(),foo(),42 expressie:

function foo(){}function bar(){return foo(),foo(),42}bar();

De Debugger doorloopt dergelijke expressies op dezelfde manier.

Daarom is het stapgedrag identiek:

• Tussen verkleinde en geschreven code.
• Bij het gebruik van bronkaarten om de verkleinde code te debuggen in termen van de originele code. Met andere woorden: als u puntkomma's ziet, kunt u altijd verwachten dat u er doorheen stapt, zelfs als de feitelijke bron die u aan het debuggen bent, verkleind is.

Bekijk en bewerk lokale, afsluitende en globale eigenschappen

Terwijl u bent gepauzeerd op een regel code, gebruikt u het deelvenster Bereik om de waarden van eigenschappen en variabelen in het lokale bereik, het afsluitende bereik en het globale bereik te bekijken en te bewerken.

• Dubbelklik op een eigenschapswaarde om deze te wijzigen.
• Niet-opsombare eigenschappen zijn grijs weergegeven.

Het bereikvenster op de bovenstaande schermafbeelding is blauw omlijnd.

Bekijk de huidige oproepstapel

Terwijl u op een regel code bent gepauzeerd, gebruikt u het deelvenster Aanroepstapel om de aanroepstapel te bekijken die u op dit punt heeft gebracht.

Klik op een item om naar de coderegel te gaan waar die functie werd aangeroepen. Het blauwe pijlpictogram geeft aan welke functie DevTools momenteel markeert.

Het Call Stack- paneel op de bovenstaande schermafbeelding is blauw omlijnd.

Opmerking: Als er niet wordt gepauzeerd op een regel code, is het deelvenster Aanroepstapel leeg.

Start een functie (frame) opnieuw in een call-stack

Als u het gedrag van een functie wilt observeren en deze opnieuw wilt uitvoeren zonder dat u de hele foutopsporingsstroom opnieuw hoeft te starten, kunt u de uitvoering van een enkele functie opnieuw starten wanneer deze functie is gepauzeerd. Met andere woorden, u kunt het frame van de functie opnieuw starten in de call-stack.

Een frame opnieuw starten:

1. Pauzeer de uitvoering van de functie op een breekpunt . In het deelvenster Aanroepstapel wordt de volgorde van functieaanroepen vastgelegd.

2. Klik in het deelvenster Aanroepstapel met de rechtermuisknop op een functie en selecteer Frame opnieuw starten in het vervolgkeuzemenu.

   

   Opmerking: u kunt elk functieframe in de Call Stack opnieuw starten, behalve WebAssembly-, asynchrone- en generatorfuncties.

Om te begrijpen hoe Restart frame werkt, overweeg de volgende code:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

De functie foo() neemt 0 als argument, registreert dit en roept de functie bar() aan. De functie bar() verhoogt op zijn beurt het argument.

Probeer de frames van beide functies op de volgende manier opnieuw op te starten:

1. Kopieer de bovenstaande code naar een nieuw fragment en voer het uit . De uitvoering stopt bij het debugger -coderegelbreekpunt .
   Let op: Wanneer de uitvoering is gepauzeerd, mag u de volgorde van de call stack-frames niet programmatisch wijzigen. Dit kan onverwachte fouten veroorzaken.
2. Merk op dat de debugger u de huidige waarde toont naast de functiedeclaratie: value = 1 .
3. Start het bar() -frame opnieuw.
4. Doorloop de instructie voor waardeverhoging door op F9 te drukken. Merk op dat de huidige waarde toeneemt: value = 2 .
5. Dubbelklik desgewenst in het deelvenster Bereik op de waarde om deze te bewerken en de gewenste waarde in te stellen.

6. Probeer het bar() frame opnieuw te starten en de instructie increment nog een paar keer te doorlopen. De waarde blijft stijgen.

   Belangrijk punt: Waarom wordt de waarde niet teruggezet op 0 ?

Het opnieuw opstarten van het frame reset de argumenten niet. Met andere woorden: het opnieuw opstarten herstelt de initiële status bij het aanroepen van de functie niet. In plaats daarvan verplaatst het eenvoudigweg de uitvoeringsaanwijzer naar het begin van de functie.

Daarom blijft de huidige argumentwaarde in het geheugen behouden tijdens het opnieuw opstarten van dezelfde functie.

1. Start nu het foo() frame opnieuw op in de Call Stack . Merk op dat de waarde weer 0 is.
   Belangrijk punt: Waarom wordt de waarde teruggezet op 0 ?

In JavaScript zijn wijzigingen in argumenten niet zichtbaar (weerspiegeld) buiten de functie. Geneste functies ontvangen waarden, niet hun locaties in het geheugen. 1. Hervat de scriptuitvoering ( F8 ) om deze tutorial te voltooien.

Toon negeerframes

Standaard toont het venster Aanroepstapel alleen de frames die relevant zijn voor uw code en worden eventuele toegevoegde scripts weggelaten Instellingen > Negeerlijst .

Als u de volledige oproepstapel wilt bekijken, inclusief frames van derden, schakelt u Negeer-gelijste frames weergeven in onder de sectie Aanroepstapel .

Probeer het op deze demopagina :

1. Open in het paneel Bronnen het bestand src > app > app.component.ts .
2. Stel een breekpunt in bij de functie increment() .
3. In de sectie Aanroepstapel schakelt u het selectievakje Negeer-gelijste frames weergeven in of uit en bekijkt u de relevante of volledige lijst met frames in de aanroepstapel.

Bekijk asynchrone frames

Indien ondersteund door het raamwerk dat u gebruikt, kan DevTools asynchrone bewerkingen traceren door beide delen van de asynchrone code aan elkaar te koppelen.

In dit geval toont de oproepstapel de volledige oproepgeschiedenis, inclusief asynchrone oproepframes.

Belangrijk punt: DevTools implementeert deze "Async Stack Tagging" -functie op basis van de console.createTask() API-methode. Het is aan de frameworks om de API te implementeren. Angular ondersteunt deze functie bijvoorbeeld.

Kopieer stacktrace

Klik met de rechtermuisknop ergens in het deelvenster Aanroepstapel en selecteer Stapeltracering kopiëren om de huidige aanroepstapel naar het klembord te kopiëren.

Hieronder ziet u een voorbeeld van de uitvoer:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

Navigeer door de bestandsboom

Gebruik het paginavenster om door de bestandsstructuur te navigeren.

Groepeer geschreven en geïmplementeerde bestanden in de bestandsboom

Let op: Dit is een preview-functie beschikbaar vanaf Chrome-versie 104.

Bij het ontwikkelen van webapplicaties met behulp van frameworks (bijvoorbeeld React of Angular ), kan het moeilijk zijn om door bronnen te navigeren vanwege de verkleinde bestanden die worden gegenereerd door de buildtools (bijvoorbeeld webpack of Vite ).

Om u te helpen bij het navigeren door bronnen, kan het deelvenster Bronnen > Pagina de bestanden in twee categorieën groeperen:

• Geschreven . Vergelijkbaar met de bronbestanden die u in uw IDE bekijkt. DevTools genereert deze bestanden op basis van bronkaarten die door uw buildtools worden geleverd.
• Ingezet . De daadwerkelijke bestanden die de browser leest. Meestal zijn deze bestanden verkleind.

Als u groeperen wilt inschakelen, schakelt u de optie in > Groepeer bestanden op auteur/geïmplementeerd optie onder het menu met drie stippen bovenaan de bestandsboom.

Verberg bronnen op de negeerlijst uit de bestandsboom

Let op: Dit is een preview-functie beschikbaar vanaf Chrome-versie 106.

Om u te helpen zich alleen te concentreren op de code die u maakt, worden in het deelvenster Bronnen > Pagina alle scripts of mappen grijs weergegeven die zijn toegevoegd aan Instellingen > Negeerlijst standaard.

Als u dergelijke scripts helemaal wilt verbergen, selecteert u Bronnen > Pagina > > Verberg bronnen op de negeerlijst .

Negeer een script of patroon van scripts

Negeer een script om het over te slaan tijdens het debuggen. Wanneer u dit negeert, wordt een script verborgen in het venster Aanroepstapel en stapt u nooit in de functies van het script wanneer u door de code bladert.

Stel dat u bijvoorbeeld deze code doorloopt:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A is een bibliotheek van derden die u vertrouwt. Als u er zeker van bent dat het probleem dat u oplost, geen verband houdt met de bibliotheek van derden, is het verstandig het script te negeren.

Negeer een script of map uit de bestandsboom

Een afzonderlijk script of een hele map negeren:

1. Klik in Bronnen > Pagina met de rechtermuisknop op een map of een scriptbestand.
2. Selecteer Map/script toevoegen om lijst te negeren .

Als u bronnen op de negeerlijst niet hebt verborgen , kunt u een dergelijke bron selecteren in de bestandsboom en op de waarschuwingsbanner klikt u op Verwijderen uit genegeerde lijst of op Configureren .

Anders kunt u verborgen en genegeerde mappen en scripts uit de lijst verwijderen Instellingen > Negeerlijst .

Negeer een script uit het Editor-venster

Een script negeren vanuit het Editor- venster:

1. Open het bestand.
2. Klik met de rechtermuisknop ergens.
3. Selecteer Script toevoegen aan negeerlijst .

U kunt een script verwijderen uit de lijst met genegeerde scripts Instellingen > Negeerlijst .

Negeer een script uit het deelvenster Aanroepstapel

Een script negeren vanuit het venster Aanroepstapel :

1. Klik met de rechtermuisknop op een functie uit het script.
2. Selecteer Script toevoegen aan negeerlijst .

U kunt een script verwijderen uit de lijst met genegeerde scripts Instellingen > Negeerlijst .

Negeer een script via Instellingen

Zien Instellingen > Negeerlijst .

Voer fragmenten van foutopsporingscode uit vanaf elke pagina

Als u merkt dat u steeds dezelfde foutopsporingscode in de console uitvoert, overweeg dan Snippets. Fragmenten zijn uitvoerbare scripts die u in DevTools schrijft, opslaat en uitvoert.

Zie Codefragmenten vanaf elke pagina uitvoeren voor meer informatie.

Bekijk de waarden van aangepaste JavaScript-expressies

Gebruik het controlevenster om de waarden van aangepaste expressies te bekijken. U kunt elke geldige JavaScript-expressie bekijken.

• Klik op Expressie toevoegen om een ​​nieuwe horloge-uitdrukking te creëren.
• Klik op Vernieuwen om de waarden van alle bestaande expressies te vernieuwen. Waarden worden automatisch vernieuwd tijdens het doorlopen van de code.
• Beweeg de muis over een expressie en klik op Expressie verwijderen om het te verwijderen.

Scripts inspecteren en bewerken

Wanneer u een script opent in het paginavenster , toont DevTools u de inhoud ervan in het editorvenster . In het Editor- venster kunt u door uw code bladeren en deze bewerken.

Bovendien kunt u de inhoud lokaal overschrijven of een werkruimte maken en de wijzigingen die u in DevTools aanbrengt rechtstreeks in uw lokale bronnen opslaan.

Maak een verkleind bestand leesbaar

Standaard worden in het Bronnenpaneel verkleinde bestanden mooi afgedrukt. Als het mooi is afgedrukt, kan de Editor een enkele lange coderegel in meerdere regels weergeven, met - om aan te geven dat dit de voortzetting van de regel is.

Als u het verkleinde bestand wilt zien zoals het is geladen, klikt u op { } in de linkerbenedenhoek van de Editor .

Vouw codeblokken

Om een ​​codeblok te vouwen, beweegt u de muis over het regelnummer in de linkerkolom en klikt u Instorten .

Om het codeblok uit te vouwen, klikt u ernaast op {...} .

Om dit gedrag te configureren, zie Instellingen > Voorkeuren > Bronnen .

Bewerk een script

Wanneer u een bug oplost, wilt u vaak enkele wijzigingen in uw JavaScript-code testen. U hoeft de wijzigingen niet in een externe browser aan te brengen en vervolgens de pagina opnieuw te laden. U kunt uw script bewerken in DevTools.

Een script bewerken:

1. Open het bestand in het Editor- paneel van het Bronnenpaneel .
2. Breng uw wijzigingen aan in het editorvenster .

3. Druk op Command + S (Mac) of Ctrl + S (Windows, Linux) om op te slaan. DevTools patcht het volledige JS-bestand in de JavaScript-engine van Chrome.

   

   Het Editor- venster op de bovenstaande schermafbeelding is blauw omlijnd.

Bewerk een gepauzeerde functie live

Opmerking: deze functie is beschikbaar vanaf Chrome-versie 105.

Terwijl de uitvoering is gepauzeerd, kunt u de huidige functie bewerken en wijzigingen live toepassen, met de volgende beperkingen:

• U kunt alleen de bovenste functie in de Aanroepstapel bewerken.
• Er mogen geen recursieve aanroepen zijn naar dezelfde functie verderop in de stapel.

Belangrijk punt: wanneer u wijzigingen toepast, start de debugger de functie automatisch opnieuw. De beperkingen van een functieherstart zijn dus ook van toepassing. U kunt de WebAssembly-, async- en generatorfuncties niet opnieuw starten.

Een functie live bewerken:

1. Pauzeer de uitvoering met een breekpunt .
2. Bewerk de gepauzeerde functie.
3. Druk op Command / Control + S om wijzigingen toe te passen. De debugger start de functie automatisch opnieuw.
4. Ga door met de uitvoering.

Bekijk de onderstaande video om deze workflow te leren kennen.

In dit voorbeeld hebben de variabelen addend1 en addend2 aanvankelijk een onjuist string . Dus in plaats van getallen toe te voegen, worden de tekenreeksen aaneengeschakeld. Om dit probleem op te lossen, worden de parseInt() functies toegevoegd tijdens live bewerken.

Zoek en vervang tekst in een script

Zoeken naar tekst in een script:

1. Open het bestand in het Editor- paneel van het Bronnenpaneel .
2. Om een ​​ingebouwde zoekbalk te openen, drukt u op Command + F (Mac) of Ctrl + F (Windows, Linux).
3. Voer uw vraag in de balk in. Optioneel kunt u:
   • Klik Match Case om uw zoekopdracht hoofdlettergevoelig te maken.
   • Klik Gebruik reguliere expressie om te zoeken met behulp van een RegEx-expressie.
4. Druk op Enter . Om naar het vorige of volgende zoekresultaat te gaan, drukt u op de knop omhoog of omlaag.

Om de gevonden tekst te vervangen:

1. Klik in de zoekbalk op de Knop vervangen .
2. Typ de tekst die u wilt vervangen en klik vervolgens op Vervangen of Alles vervangen .

Schakel JavaScript uit

Zie JavaScript uitschakelen met Chrome DevTools .