Pauzeer uw code met breekpunten

Kayce Basken
Sofia Emelianova
Sofia Emelianova
GitHub

Gebruik breekpunten om uw JavaScript-code te onderbreken. In deze handleiding wordt elk type breekpunt uitgelegd dat beschikbaar is in DevTools, evenals wanneer u het moet gebruiken en hoe u elk type kunt instellen. Zie Aan de slag met het debuggen van JavaScript in Chrome DevTools voor een interactieve tutorial over het foutopsporingsproces.

Overzicht van wanneer elk breekpunttype moet worden gebruikt

Het bekendste type breekpunt is line-of-code. Maar breekpunten voor coderegels kunnen inefficiënt zijn om in te stellen, vooral als u niet precies weet waar u moet zoeken, of als u met een grote codebase werkt. U kunt tijd besparen bij het opsporen van fouten door te weten hoe en wanneer u de andere typen breekpunten moet gebruiken.

Breekpunttype Gebruik dit wanneer u wilt...
Coderegel Pauzeer op een exact codegebied.
Voorwaardelijke coderegel Pauzeer op een exact codegebied, maar alleen als een andere voorwaarde waar is.
Logpunt Registreer een bericht in de console zonder de uitvoering te onderbreken.
DOM Pauzeer bij de code die een specifiek DOM-knooppunt of de onderliggende knooppunten ervan wijzigt of verwijdert.
XHR Pauzeer wanneer een XHR-URL een tekenreekspatroon bevat.
Gebeurtenisluisteraar Pauzeer de code die wordt uitgevoerd nadat een gebeurtenis, zoals click , is geactiveerd.
Uitzondering Pauzeer op de coderegel die een gevangen of niet-afgevangen uitzondering genereert.
Functie Pauzeer wanneer een specifieke functie wordt aangeroepen.
Vertrouwd type Pauzeer bij schendingen van het vertrouwde type .

Breekpunten voor coderegels

Gebruik een coderegelbreekpunt als u precies weet welk codegebied u moet onderzoeken. DevTools pauzeert altijd voordat deze coderegel wordt uitgevoerd.

Een coderegelbreekpunt instellen in DevTools:

  1. Klik op het tabblad Bronnen .
  2. Open het bestand met de coderegel die u wilt afbreken.
  3. Ga naar de coderegel.
  4. Links van de coderegel bevindt zich de regelnummerkolom. Klik Het. Er verschijnt een blauw pictogram bovenaan de regelnummerkolom.

Een breekpunt voor een coderegel.

Dit voorbeeld toont een breekpunt voor een coderegel dat is ingesteld op regel 29 .

Coderegelbreekpunten in uw code

Roep debugger vanuit uw code om op die regel te pauzeren. Dit is gelijk aan een coderegelbreekpunt , behalve dat het breekpunt in uw code wordt ingesteld en niet in de DevTools-gebruikersinterface.

console.log('a');
console.log('b');
debugger;
console.log('c');

Voorwaardelijke coderegelbreekpunten

Gebruik een voorwaardelijk coderegelbreekpunt als u de uitvoering wilt stoppen, maar alleen als een bepaalde voorwaarde waar is.

Dergelijke breekpunten zijn handig als u pauzes wilt overslaan die voor uw geval niet relevant zijn, vooral in een lus.

Een voorwaardelijk coderegelbreekpunt instellen:

  1. Open het tabblad Bronnen .
  2. Open het bestand met de coderegel die u wilt afbreken.
  3. Ga naar de coderegel.
  4. Links van de coderegel bevindt zich de regelnummerkolom. Klik er met de rechtermuisknop op.
  5. Selecteer Voorwaardelijk breekpunt toevoegen . Er wordt een dialoogvenster weergegeven onder de coderegel.
  6. Voer uw voorwaarde in het dialoogvenster in.
  7. Druk op Enter om het breekpunt te activeren. Boven de regelnummerkolom verschijnt een oranje pictogram met een vraagteken.

Een voorwaardelijk coderegelbreekpunt.

In dit voorbeeld ziet u een voorwaardelijk coderegelbreekpunt dat alleen wordt geactiveerd wanneer de x 10 overschrijdt in een lus bij iteratie i=6 .

Log coderegelbreekpunten in

Gebruik log-codebreekpunten (logpoints) om berichten in de console te loggen zonder de uitvoering te onderbreken en zonder uw code te vervuilen met console.log() -aanroepen.

Een logpunt instellen:

  1. Open het tabblad Bronnen .
  2. Open het bestand met de coderegel die u wilt afbreken.
  3. Ga naar de coderegel.
  4. Links van de coderegel bevindt zich de regelnummerkolom. Klik er met de rechtermuisknop op.
  5. Selecteer Logpunt toevoegen . Er wordt een dialoogvenster weergegeven onder de coderegel.

  6. Voer uw logbericht in het dialoogvenster in. U kunt dezelfde syntaxis gebruiken als bij een console.log(message) -aanroep.

    U kunt bijvoorbeeld het volgende loggen:

    "A string " + num, str.length > 1, str.toUpperCase(), obj

    In dit geval is het vastgelegde bericht:

    // str = "test"
// num = 3
// obj = {attr: "x"}
A string 42 true TEST {attr: 'x'}

  7. Druk op Enter om het breekpunt te activeren. Er verschijnt een roze pictogram met twee stippen bovenaan de regelnummerkolom.

Een logpunt dat een tekenreeks en een variabelewaarde in de console registreert.

Dit voorbeeld toont een logpunt op regel 30 dat een string en een variabele waarde naar de Console logt.

Bewerk coderegelbreekpunten

Gebruik het deelvenster Breekpunten om breekpunten van coderegels uit te schakelen, te bewerken of te verwijderen.

Groepen breekpunten bewerken

In het deelvenster Breekpunten worden de breekpunten gegroepeerd op bestand en gerangschikt op regel- en kolomnummers. Met groepen kunt u het volgende doen:

  • Om een ​​groep samen te vouwen of uit te vouwen, klikt u op de naam ervan.
  • Om een ​​groep of breekpunt afzonderlijk in of uit te schakelen, klikt u op Selectievakje. naast de groep of het breekpunt.
  • Om een ​​groep te verwijderen, beweegt u de muis eroverheen en klikt u erop Dichtbij. .

In deze video ziet u hoe u groepen samenvouwt en breekpunten één voor één of per groep in- of uitschakelt. Wanneer u een breekpunt uitschakelt, maakt het deelvenster Bronnen de markering naast het regelnummer transparant.

Groepen hebben contextmenu's. Klik in het deelvenster Breekpunten met de rechtermuisknop op een groep en kies:

Het contextmenu van een groep.

  • Verwijder alle breekpunten in bestand (groep).
  • Schakel alle breekpunten in het bestand uit.
  • Schakel alle breekpunten in het bestand in.
  • Verwijder alle breekpunten (in alle bestanden).
  • Verwijder andere breekpunten (in andere groepen).

Breekpunten bewerken

Een onderbrekingspunt bewerken:

  • Klik Selectievakje. naast een onderbrekingspunt om het in of uit te schakelen. Wanneer u een breekpunt uitschakelt, maakt het deelvenster Bronnen de markering naast het regelnummer transparant.
  • Beweeg over een breekpunt en klik Bewerking. bewerken en Dichtbij. om het te verwijderen.

  • Wanneer u een breekpunt bewerkt, wijzigt u het type in de vervolgkeuzelijst in de inline-editor.

    Het type van een breekpunt wijzigen.

  • Klik met de rechtermuisknop op een breekpunt om het contextmenu ervan te zien en kies een van de opties:

    Het contextmenu van een breekpunt.

    • Locatie onthullen.
    • Voorwaarde of logpunt bewerken.
    • Schakel alle breekpunten in.
    • Schakel alle breekpunten uit.
    • Breekpunt verwijderen.
    • Verwijder andere breekpunten (in alle bestanden).
    • Verwijder alle breekpunten (in alle bestanden).

Bekijk de video om verschillende breekpuntbewerkingen in actie te zien: uitschakelen, verwijderen, voorwaarde bewerken, locatie weergeven via het menu en het type wijzigen.

DOM-wijzigingsbreekpunten

Gebruik een DOM-wijzigingsbreekpunt wanneer u wilt pauzeren bij de code die een DOM-knooppunt of de onderliggende knooppunten ervan wijzigt.

Een DOM-wijzigingsbreekpunt instellen:

  1. Klik op het tabblad Elementen .
  2. Ga naar het element waarvoor u het breekpunt wilt instellen.
  3. Klik met de rechtermuisknop op het element.
  4. Beweeg de muis over Onderbreken aan en selecteer Substructuurwijzigingen , Attribuutwijzigingen of Knooppuntverwijdering .

Het contextmenu voor het maken van een DOM-wijzigingsbreekpunt.

Dit voorbeeld toont het contextmenu voor het maken van een DOM-wijzigingsbreekpunt.

U kunt een lijst met DOM-wijzigingsbreekpunten vinden in:

  • Elementen > deelvenster DOM-breekpunten .
  • Bronnen > DOM-onderbrekingspunten zijvenster.

Lijsten met DOM-breekpunten in de panelen Elementen en Bronnen.

Daar kunt u:

  • Schakel ze in of uit met Selectievakje. .
  • Klik met de rechtermuisknop > Verwijder of onthul ze in de DOM.

Typen DOM-wijzigingsbreekpunten

  • Wijzigingen in de subboom . Wordt geactiveerd wanneer een onderliggend onderdeel van het momenteel geselecteerde knooppunt wordt verwijderd of toegevoegd, of als de inhoud van een onderliggend knooppunt wordt gewijzigd. Wordt niet geactiveerd bij wijzigingen in het attribuut van een onderliggend knooppunt, of bij wijzigingen in het momenteel geselecteerde knooppunt.
  • Attributenwijzigingen : Geactiveerd wanneer een attribuut wordt toegevoegd of verwijderd op het momenteel geselecteerde knooppunt, of wanneer een attribuutwaarde verandert.
  • Knooppuntverwijdering : wordt geactiveerd wanneer het momenteel geselecteerde knooppunt wordt verwijderd.

XHR/ophaal-breekpunten

Gebruik een XHR/fetch-breekpunt als u wilt breken wanneer de aanvraag-URL van een XHR een opgegeven tekenreeks bevat. DevTools pauzeert op de coderegel waar de XHR send() aanroept.

Een voorbeeld hiervan is wanneer u ziet dat uw pagina om een ​​onjuiste URL vraagt ​​en u snel de AJAX- of Fetch-broncode wilt vinden die het onjuiste verzoek veroorzaakt.

Een XHR/fetch-breekpunt instellen:

  1. Klik op het tabblad Bronnen .
  2. Vouw het deelvenster XHR-breekpunten uit.
  3. Klik Toevoegen. Breekpunt toevoegen .
  4. Voer de string in die u wilt afbreken. DevTools pauzeert wanneer deze tekenreeks ergens in de verzoek-URL van een XHR aanwezig is.
  5. Druk op Enter om te bevestigen.

Een XHR/fetch-breekpunt maken.

Dit voorbeeld laat zien hoe u een XHR/fetch-breekpunt kunt maken in de XHR/fetch-breekpunten voor elk verzoek dat org in de URL bevat.

Breekpunten voor gebeurtenislisteners

Gebruik gebeurtenislistenerbreekpunten wanneer u wilt pauzeren op de gebeurtenislistenercode die wordt uitgevoerd nadat een gebeurtenis is geactiveerd. U kunt specifieke gebeurtenissen selecteren, zoals click , of categorieën van gebeurtenissen, zoals alle muisgebeurtenissen.

  1. Klik op het tabblad Bronnen .
  2. Vouw het deelvenster Gebeurtenislisteneronderbrekingspunten uit. DevTools toont een lijst met gebeurteniscategorieën, zoals Animation .
  3. Vink een van deze categorieën aan om te pauzeren wanneer een evenement uit die categorie wordt geactiveerd, of breid de categorie uit en controleer een specifiek evenement.

Een gebeurtenislistenerbreekpunt maken.

In dit voorbeeld ziet u hoe u een gebeurtenislistenerbreekpunt voor deviceorientation maakt.

Bovendien pauzeert de Debugger bij gebeurtenissen die plaatsvinden in webworkers of worklets van welk type dan ook, inclusief de Shared Storage Worklets .

De Debugger is gepauzeerd tijdens een gebeurtenis van een servicemedewerker.

In dit voorbeeld ziet u dat de Debugger is gepauzeerd bij een setTimer gebeurtenis die heeft plaatsgevonden bij een servicemedewerker.

U kunt ook een lijst met gebeurtenislisteners vinden in het deelvenster Elementen > Gebeurtenislisteners .

Uitzonderingsbreekpunten

Gebruik uitzonderingsbreekpunten wanneer u wilt pauzeren op de coderegel die een gevangen of niet-afgevangen uitzondering genereert. U kunt beide uitzonderingen afzonderlijk onderbreken in elke andere foutopsporingssessie dan Node.js .

Schakel in het deelvenster Breekpunten van het tabblad Bronnen een van de volgende opties of beide in en voer vervolgens de code uit:

  • Rekening Selectievakje. Pauzeer bij niet-afgevangen uitzonderingen .

    Gepauzeerd vanwege een niet-afgevangen uitzondering wanneer het bijbehorende selectievakje is ingeschakeld.

    In dit voorbeeld wordt de uitvoering gepauzeerd vanwege een niet-afgevangen uitzondering.

  • Rekening Selectievakje. Pauzeer bij gevangen uitzonderingen .

    Onderbroken vanwege een onderschepte uitzondering wanneer het overeenkomstige selectievakje is ingeschakeld.

    In dit voorbeeld wordt de uitvoering gepauzeerd vanwege een onderschepte uitzondering.

Uitzonderingen bij asynchrone oproepen

Als een van beide of beide gevangen en niet-afgevangen selectievakjes zijn ingeschakeld, probeert de Debugger te pauzeren voor de overeenkomstige uitzonderingen in zowel synchrone als asynchrone aanroepen. In het asynchrone geval zoekt de Debugger naar afwijzingshandlers tussen beloften om te bepalen wanneer er moet worden gestopt.

Uitzonderingen gevangen en code genegeerd

Als de Negeerlijst is ingeschakeld, pauzeert de Debugger bij uitzonderingen die zijn vastgelegd in niet-genegeerde frames of die door een dergelijk frame in de call-stack gaan.

In het volgende voorbeeld ziet u dat de Debugger is gepauzeerd bij een onderschepte uitzondering die is gegenereerd door de genegeerde library.js en die door de niet-genegeerde mycode.js gaat.

Gepauzeerd vanwege een gevangen uitzondering die door een niet-genegeerd frame in de call-stack gaat.

Test een verzameling scenario's op deze demopagina voor meer informatie over het gedrag van debugger in edge-cases.

Functie-breekpunten

Roep debug(functionName) aan, waarbij functionName de functie is waarvoor u fouten wilt opsporen, wanneer u wilt pauzeren wanneer een specifieke functie wordt aangeroepen. U kunt debug() in uw code invoegen (zoals een console.log() instructie) of deze aanroepen vanuit de DevTools Console. debug() is gelijk aan het instellen van een coderegelbreekpunt op de eerste regel van de functie.

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

Zorg ervoor dat de doelfunctie binnen het bereik valt

DevTools genereert een ReferenceError als de functie waarvoor u fouten wilt opsporen, niet binnen het bereik valt.

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

Ervoor zorgen dat de doelfunctie binnen het bereik valt, kan lastig zijn als u debug() aanroept vanuit de DevTools Console. Hier is één strategie:

  1. Stel ergens een coderegelbreekpunt in waar de functie binnen het bereik valt.
  2. Activeer het breekpunt.
  3. Roep debug() aan in de DevTools Console terwijl de code nog steeds is gepauzeerd op uw coderegelbreekpunt.

Trusted Type-breekpunten

De Trusted Type API biedt bescherming tegen beveiligingslekken die bekend staan ​​als cross-site scripting (XSS)-aanvallen.

Ga in het deelvenster Breekpunten van het tabblad Bronnen naar de sectie CSP-overtredingsbreekpunten en schakel een van de volgende opties of beide in, en voer vervolgens de code uit:

  • Rekening Selectievakje. Overtredingen van zinken .

    Gepauzeerd bij een sink-overtreding wanneer het bijbehorende selectievakje is ingeschakeld.

    In dit voorbeeld wordt de uitvoering gepauzeerd bij een sink-overtreding.

  • Rekening Selectievakje. Beleidsovertredingen .

    Onderbroken vanwege een beleidsschending wanneer het bijbehorende selectievakje is ingeschakeld.

    In dit voorbeeld wordt de uitvoering onderbroken vanwege een beleidsschending. Trusted Type-beleid wordt ingesteld met trustedTypes.createPolicy .

Meer informatie over het gebruik van de API kunt u vinden: