Referentie voor foutopsporing in JavaScript

Sofia Emelianova
Sofia Emelianova

Ontdek nieuwe foutopsporingsworkflows met dit uitgebreide naslagwerk van 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.

Inline evaluaties weergegeven naast declaraties.

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

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

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.

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

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 Overstappen om de functie uit te voeren zonder erin te stappen.

Door 'Overstap' te selecteren.

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 Stap binnen om die functie verder te onderzoeken.

Selecteer 'Stap binnen'.

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 Uitstappen om de rest van de functiecode uit te voeren.

Selecteer 'Stap uit'.

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 Hervat de uitvoering van het script , 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.

Selecteer 'Doorgaan naar hier'.

Hervat de uitvoering van het script

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

Selecteer 'Scriptuitvoering hervatten'.

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 Hervat de uitvoering van het script en selecteer vervolgens Uitvoering van script afdwingen Forceer uitvoering van script .

Selecteer 'Scriptuitvoering 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.

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

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.

Door een door komma's gescheiden uitdrukking stappen.

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.

Het bereikvenster op de bovenstaande schermafbeelding is blauw omlijnd.

Bekijk de huidige oproepstapel

Terwijl u op een regel code bent gepauzeerd, gebruikt u het paneel 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 deelvenster Oproepstapel.

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

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.

    Selecteer Frame opnieuw starten in het vervolgkeuzemenu.

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 .
  2. Merk op dat de debugger u de huidige waarde toont naast de functiedeclaratie: value = 1 . De huidige waarde naast de functiedeclaratie.
  3. Start het bar() -frame opnieuw. Het bar()-frame opnieuw starten.
  4. Doorloop de instructie voor waardeverhoging door op F9 te drukken. De huidige waarde verhogen. 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. De waarde bewerken in het deelvenster Scopes.
  6. Probeer het bar() -frame opnieuw te starten en de instructie increment nog een paar keer te doorlopen. De waarde blijft stijgen. Het bar()-frame opnieuw starten.

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 . Het foo()-frame opnieuw starten. Merk op dat de waarde weer 0 is. ALT_TEXT_HIER

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 Call Stack- paneel alleen de frames die relevant zijn voor uw code en worden eventuele toegevoegde scripts weggelaten Instellingen. Instellingen > Negeerlijst .

Bel stapel.

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

Toon negeerframes.

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.

Asynchrone oproepframes.

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.

Selecteer 'Stacktracering 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

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:

  • Codepictogram. 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.
  • Geïmplementeerd icoon. Ingezet . De daadwerkelijke bestanden die de browser leest. Meestal zijn deze bestanden verkleind.

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

Bestanden groeperen op auteur/geïmplementeerd.

Verberg bronnen op de negeerlijst uit de bestandsboom

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. Instellingen > Negeerlijst standaard.

Als u dergelijke scripts helemaal wilt verbergen, selecteert u Bronnen > Pagina > Menu met drie stippen. > Verberg bronnen op de negeerlijst Experimenteel. .

Voor en na het verbergen van 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 .

Negeer opties voor een map of scriptbestand.

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

Een geselecteerd genegeerd bestand toont de knoppen Verwijderen en Configureren.

Anders kunt u verborgen en genegeerde mappen en scripts uit de lijst verwijderen Instellingen. 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 .

Een script uit het Editor-venster negeren.

U kunt een script verwijderen uit de lijst met genegeerde scripts Instellingen. 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 .

Een script uit het deelvenster Aanroepstapel negeren.

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

Negeer een script via Instellingen

Zien Instellingen. 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.

Het weergavevenster.

  • Klik op Expressie toevoegen Expressie toevoegen om een ​​nieuwe horloge-uitdrukking te creëren.
  • Klik op Vernieuwen 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 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.

Een mooi gedrukte lange coderegel, weergegeven in meerdere regels, met '-' om de voortzetting van de regel aan te geven.

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. Instorten .

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

Om dit gedrag te configureren, zie Instellingen. 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.

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

Bewerk een gepauzeerde functie live

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.

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.

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. Zoekopdracht. Optioneel kunt u:
    • Klik Match geval. Match Case om uw zoekopdracht hoofdlettergevoelig te maken.
    • Klik RegEx-knop. 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 Vervangen. Knop vervangen . 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 .