Als je Chrome 111 of later gebruikt, is het je misschien al opgevallen dat we het ontwerp van onze breakpoint-zijbalk hebben aangepast. Met Chrome 113 vervangt de nieuwe zijbalk het oude ontwerp volledig. Ons doel met het herontwerp was om de breakpoint-workflow te verbeteren door:
Een beter overzicht bieden van alle ingestelde breekpunten. Veelgebruikte gebruikersworkflows met breekpunten gemakkelijker toegankelijk en intuïtiever maken. Interessante bestaande breekpuntfuncties zichtbaar maken.
In dit artikel wordt ervan uitgegaan dat je al bekend bent met debuggen met behulp van breakpoints. Als je nog nooit breakpoints hebt gebruikt, ga dan naar dit overzicht over breakpoints en leer meer over hoe je breakpoints kunt gebruiken om je code te debuggen.
Laten we nu eens kijken wat het herontwerp te bieden heeft en hoe je de nieuwe zijbalk kunt gebruiken! Houd er rekening mee dat het herontwerp zich richt op het intuïtiever en gemakkelijker toegankelijk maken van bestaande functies , in plaats van het toevoegen van nieuwe functies.
Pauzeer bij uitzonderingen om te onderzoeken waarom je code een fout genereert.
Gooit je code een uitzondering? Geen paniek! Met Chrome DevTools kun je de uitvoering pauzeren op uitzonderingen, zodat de uitvoering stopt op het punt waar de uitzondering optreedt. Dit kan je helpen om de omstandigheden waaronder je code een fout genereert te onderzoeken en beter te begrijpen. Je kunt kiezen of je wilt pauzeren bij opgevangen uitzonderingen, niet-opgevangen uitzonderingen of beide, door de bijbehorende selectievakjes in de zijbalk aan te vinken.
Beheer uw breekpunten: vouw relevante breekpuntgroepen uit en vouw andere samen om u te concentreren op wat relevant is.
Breakpoints kunnen over meerdere bestanden verspreid zijn. De zijbalk met breakpoints groepeert breakpoints op basis van het bestand waartoe ze behoren. Concentreer u op alleen de breakpoints die relevant zijn voor uw huidige debugsessie door de betreffende breakpointgroepen uit te vouwen en de overige in te klappen.
Beheer je breakpoints: met één klik spring je naar de code, verwijder je breakpoints of schakel je ze in/uit.
Met de zijbalk voor breakpoints kunt u veelvoorkomende taken met één klik uitvoeren. Hier volgt een overzicht van hoe u dat kunt doen...
Navigeer naar de locatie van het breekpunt in de code-editor. Verwijder een of alle breekpunten in een bestand. Schakel een of alle breekpunten in een bestand in of uit.
En dat allemaal met één klik! Deze opties zijn natuurlijk ook beschikbaar in het contextmenu:
Spring naar de locatie van het breekpunt door op het codefragment van het breekpunt te klikken.
Wil je controleren waar in de code je een breakpoint hebt ingesteld en de omliggende code analyseren? Klik dan op het codefragment van een breakpoint in de zijbalk en de betreffende codelocatie wordt geopend in de code-editor.
Verwijder een enkel breakpoint of alle breakpoints in een bestand door op de knop 'Verwijderen' te klikken.
Beweeg de muis over een breakpoint of een breakpointgroep om een verwijderknop te tonen waarmee u een of alle breakpoints in een bestand kunt verwijderen.
Schakel een of alle breakpoints in een bestand uit.
Vink het selectievakje naast een breekpunt aan of uit om het in of uit te schakelen.
Om alle breakpoints in een bestand in of uit te schakelen, beweegt u de muis over de breakpointgroep en vinkt u het selectievakje naast de bestandsnaam aan of uit.
Maak gebruik van deze minder bekende breakpoint-functies: voorwaardelijke breakpoints en logpoints.
Bewerk de breakpointvoorwaarden of wijzig uw logpointlog door een breakpoint te bewerken.
Bewerk een breakpointvoorwaarde of logboek door met de muis over een breakpoint te bewegen en op de bewerkingsknop te klikken die verschijnt. Hiermee opent u een dialoogvenster waarin u het breakpointtype en de details van uw breakpoint kunt wijzigen.
Als alternatief kunt u de regel van het breekpunt in de code-editor selecteren en Control + Alt + b op Linux of Command + Alt + b op Mac typen om het dialoogvenster voor het bewerken van breekpunten te openen.
Je kunt je conditie- of logpuntlog ook snel controleren door met de muis over het breekpunt in de zijbalk te bewegen:
Conclusie
Ons doel met het herontwerp van de breakpoint-zijbalk was om debuggen met breakpoints eenvoudiger te maken. Het belangrijkste was dat we de zijbalk overzichtelijker, toegankelijker en begrijpelijker wilden maken. We hopen dat deze verbeteringen u van pas zullen komen tijdens uw volgende debugsessie!
Heb je suggesties voor verdere verbeteringen? Laat het ons weten door een bug te melden !
Download de previewkanalen
Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!
Neem contact op met het Chrome DevTools-team.
Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.
- Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
- Meld een probleem met DevTools via de Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
- Tweet naar @ChromeDevTools .
- Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .