Pauzeer uw code met breekpunten

Kayce Basques

Sofia Emelianova

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 paneel 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 erop. Er verschijnt een blauw pictogram bovenaan de regelnummerkolom.

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

Coderegelbreekpunten in uw code

Roep debugger aan vanuit uw code om op die regel te pauzeren. Dit komt overeen met 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 paneel 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.

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 paneel 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 = 42
   // 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.

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

Bewerk coderegelbreekpunten

Gebruik de sectie Breekpunten om breekpunten van coderegels uit te schakelen, te bewerken of te verwijderen.

Groepen breekpunten bewerken

In de sectie 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 naast de groep of het breekpunt.
• Om een ​​groep te verwijderen, beweegt u de muis eroverheen en klikt u erop .

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 gedeelte Breekpunten met de rechtermuisknop op een groep en kies:

• 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 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 bewerken en om het te verwijderen.

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

  

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

  

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

Sla onderbrekingspunten over met 'Pauzeer hier nooit'

Gebruik het onderbrekingspunt Nooit hier pauzeren om pauzes over te slaan die om andere redenen zouden optreden. Dit kan handig zijn als u uitzonderingsbreekpunten hebt ingeschakeld, maar de debugger blijft stoppen bij een bijzonder luidruchtige uitzondering waarvoor u niet geïnteresseerd bent in het opsporen van fouten.

Een pauzelocatie dempen:

1. Open in het Bronnenpaneel het bronbestand en zoek de regel die u niet wilt afbreken.
2. Klik met de rechtermuisknop op het regelnummer in de regelnummerkolom aan de linkerkant, naast de verklaring die de onderbreking veroorzaakt.
3. Selecteer Hier nooit pauzeren in het vervolgkeuzemenu. Er verschijnt een oranje (voorwaardelijk) breekpunt naast de lijn.

U kunt het breekpunt ook dempen terwijl de uitvoering is gepauzeerd. Bekijk de volgende video om de workflow te leren.

Met Nooit hier pauzeren kunt u debugger-instructies en elk ander breekpunttype dempen, behalve breekpunten voor coderegels en breekpunten voor gebeurtenislisteners .

Hier nooit pauzeren kan mislukken op een regel met meerdere instructies als de instructie die niet mag worden onderbroken, verschilt van de instructie die de pauze veroorzaakt. In brontoegewezen code komt niet elke breekpuntlocatie overeen met de oorspronkelijke instructie die de breuk veroorzaakt.

Belangrijk punt: Breekpunten in coderegels overschrijven andere breukredenen die uit dezelfde instructie voortkomen. Dit betekent dat u, om stoppen te voorkomen, ook logpunten en voorwaardelijke breekpunten kunt gebruiken waarvan de toestand onwaar wordt. In feite is een 'Nooit hier pauzeren' -breekpunt slechts een voorwaardelijk breekpunt met een false voorwaarde.

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 .

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.

Daar kunt u:

• Schakel ze in of uit met .
• 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 paneel Bronnen .
2. Vouw het deelvenster XHR-breekpunten uit.
3. Klik 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.

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

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 .

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 .

Belangrijk punt: momenteel kunt u in een Node.js-foutopsporingssessie alleen pauzeren bij onderschepte uitzonderingen als u ook onderbreekt bij niet-afgevangen uitzonderingen. Zie Chromium-bug #1382762 voor details.

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

• Rekening Pauzeer bij niet-afgevangen uitzonderingen .

  

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

• Rekening Pauzeer bij gevangen uitzonderingen .

  

  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.

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.

Sleutelterm: DOM-gebaseerde cross-site scripting vindt plaats wanneer gegevens van een door de gebruiker beheerde bron (zoals gebruikersnaam of omleidings-URL uit het URL-fragment) een sink bereiken, wat een functie is zoals eval() of een eigenschappensetter zoals .innerHTML , die willekeurige JavaScript-code kan uitvoeren.

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

• Rekening Overtredingen van zinken .

  

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

• Rekening Beleidsovertredingen .

  

  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:

• Om uw beveiligingsdoelstellingen te bevorderen, gaat u naar Voorkom DOM-gebaseerde cross-site scripting-kwetsbaarheden met Trusted Types .
• Ga voor foutopsporing naar Foutopsporing van CSP en vertrouwde typen implementeren in Chrome DevTools .