Als je Chrome 111 of hoger gebruikt, heb je misschien al gemerkt dat we het ontwerp van onze breakpoint-zijbalk hebben gewijzigd. Met Chrome 113 vervangt de nieuwe zijbalk het oude ontwerp volledig. Ons doel met het herontwerp was om de breekpuntworkflow te verbeteren door:
Geeft een beter overzicht van alle breekpunten die zijn ingesteld. Gemeenschappelijke gebruikersworkflows met breekpunten gemakkelijker toegankelijk en intuïtiever maken. Coole bestaande breekpuntfuncties zichtbaar maken.
In dit bericht wordt ervan uitgegaan dat je al bekend bent met het opsporen van fouten met behulp van breekpunten. Als je nog niet eerder breakpoints hebt gebruikt, ga dan naar dit overzicht over breakpoints en leer meer over hoe je breakpoints kunt gebruiken om fouten in je code op te sporen.
Laten we nu eens kijken naar wat het vernieuwde ontwerp te bieden heeft en hoe u gebruik kunt maken van de nieuwe zijbalk! Houd er rekening mee dat het herontwerp zich erop concentreert om bestaande functies intuïtiever in gebruik en gemakkelijker toegankelijk te maken, in plaats van nieuwe functies toe te voegen.
Pauzeer bij uitzonderingen om te onderzoeken waarom uw code een fout genereert
Geeft uw code een uitzondering? Maak je geen zorgen! Met Chrome DevTools kunt u pauzeren bij uitzonderingen om de uitvoering te stoppen op het punt waarop uw uitzondering wordt gegenereerd. Dit kan u helpen bij het onderzoeken en beter begrijpen van de omstandigheden waaronder uw code een fout genereert. U kunt kiezen of u wilt pauzeren bij onderschepte uitzonderingen, niet-afgevangen uitzonderingen of beide, door de overeenkomstige selectievakjes in de zijbalk aan te vinken.
Beheer uw breekpunten: breid relevante breekpuntgroepen uit en vouw andere samen om u te concentreren op wat relevant is
Breekpunten kunnen over meerdere bestanden verspreid zijn. In de breekpuntzijbalk worden breekpunten gegroepeerd op basis van het bestand waartoe ze behoren. Concentreer u alleen op de zaken die van belang zijn voor uw huidige foutopsporingssessie door de relevante breekpuntgroepen uit te vouwen en de resterende groepen samen te vouwen.
Beheer uw breekpunten: één klik om naar code te springen, breekpunten te verwijderen of in/uit te schakelen
Met de breekpuntzijbalk kunt u algemene taken met één klik uitvoeren. Hier vindt u een overzicht van hoe u...
Navigeer naar de locatie van het onderbrekingspunt in de Code-editor. Verwijder één breekpunt of alle breekpunten binnen een bestand. Schakel één breekpunt of alle breekpunten binnen een bestand in of uit.
En dit allemaal met één klik! Uiteraard zijn deze opties ook beschikbaar in het contextmenu:
Ga naar de locatie van het breekpunt door op het codefragment van het breekpunt te klikken
Wilt u controleren waar in de code u uw breekpunt hebt ingesteld en de omringende code analyseren? Klik gewoon op het codefragment van een breekpunt in de zijbalk en de codelocatie wordt geopend in de code-editor.
Verwijder een enkel breekpunt of alle breekpunten binnen een bestand door op de knop Verwijderen te klikken
Beweeg de muis over een breekpunt of een breekpuntgroep om een verwijderknop weer te geven waarmee u één of alle breekpunten in een bestand kunt verwijderen door erop te klikken.
Schakel één of alle breekpunten binnen een bestand uit
Schakel het selectievakje naast een onderbrekingspunt in of uit om het in of uit te schakelen.
Om alle breekpunten in een bestand in of uit te schakelen, beweegt u de muis over de breekpuntgroep en schakelt u het selectievakje in of uit dat naast de bestandsnaam verschijnt.
Maak gebruik van deze minder bekende breekpuntfuncties: voorwaardelijke breekpunten en logpunten
Bewerk de breekpuntvoorwaarden of wijzig uw logboekpuntlogboek door een breekpunt te bewerken
Bewerk een breekpuntvoorwaarde of logboek door de muisaanwijzer op een breekpunt te plaatsen en op de knop Bewerken te klikken die verschijnt. Hierdoor wordt een dialoogvenster geopend waarin u het breekpunttype en de details van uw breekpunt kunt wijzigen.
U kunt ook de regel van het breekpunt in de code-editor selecteren en Control + Alt + b op Linux en Command + Alt + b op Mac typen om het dialoogvenster voor het bewerken van het breekpunt te openen.
U kunt uw conditie- of logpuntlogboek ook snel controleren door over het breekpunt in de zijbalk te bewegen:
Conclusie
Ons doel achter het herontwerp van de breekpuntzijbalk was om het debuggen van breekpunten eenvoudiger te maken. Het allerbelangrijkste was dat we ernaar streefden om de zaken meer gestructureerd en gemakkelijker toegankelijk en begrijpelijker te maken. We hopen dat deze verbeteringen u zullen helpen bij uw volgende foutopsporingssessie!
Als u suggesties heeft voor verdere verbeteringen, laat het ons dan weten door een bug in te dienen !
Download de voorbeeldkanalen
Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!
Neem contact op met het Chrome DevTools-team
Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.
- Stuur ons een suggestie of feedback via crbug.com .
- Rapporteer een DevTools-probleem met behulp van de opties Meer
> Help > Rapporteer een DevTools-probleem in DevTools. - Tweet op @ChromeDevTools .
- Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .