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.
U kunt 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.
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
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 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 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:
- Pauzeer de uitvoering van de functie op een breekpunt . In het deelvenster Aanroepstapel wordt de volgorde van functieaanroepen vastgelegd.
Klik in het deelvenster Aanroepstapel met de rechtermuisknop op een functie en 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:
- Kopieer de bovenstaande code naar een nieuw fragment en voer het uit . De uitvoering stopt bij het
debugger-coderegelbreekpunt . - Merk op dat de debugger u de huidige waarde toont naast de functiedeclaratie:
value = 1.
- Start het
bar()-frame opnieuw.
- Doorloop de instructie voor waardeverhoging door op
F9te drukken.
Merk op dat de huidige waarde toeneemt: value = 2. - Dubbelklik desgewenst in het deelvenster Bereik op de waarde om deze te bewerken en de gewenste waarde in te stellen.
Probeer het
bar()frame opnieuw te starten en de instructie increment nog een paar keer te doorlopen. De waarde blijft stijgen.
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.
- Start nu het
foo()frame opnieuw op in de Call Stack .
Merk op dat de waarde weer 0is.
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 > 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 :
- Open in het paneel Bronnen het bestand
src>app>app.component.ts. - Stel een breekpunt in bij de functie
increment(). - 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.
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
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
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 het negeert, wordt een script verborgen in het venster Aanroepstapel en stapt u nooit in de functies van het script wanneer u door uw 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:
- Klik in Bronnen > Pagina met de rechtermuisknop op een map of een scriptbestand.
- 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:
- Open het bestand.
- Klik met de rechtermuisknop ergens.
- 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 :
- Klik met de rechtermuisknop op een functie uit het script.
- 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:
- Open het bestand in het Editor- paneel van het Bronnenpaneel .
- Breng uw wijzigingen aan in het Editor- venster.
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
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:
- Pauzeer de uitvoering met een breekpunt .
- Bewerk de gepauzeerde functie.
- Druk op Command / Control + S om wijzigingen toe te passen. De debugger start de functie automatisch opnieuw.
- 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:
- Open het bestand in het Editor- paneel van het Bronnenpaneel .
- Om een ingebouwde zoekbalk te openen, drukt u op Command + F (Mac) of Ctrl + F (Windows, Linux).
- 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.
- Klik
- 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:
- Klik in de zoekbalk op de
Knop vervangen . 
- Typ de tekst die u wilt vervangen en klik vervolgens op Vervangen of Alles vervangen .