Share
In deel 1 zagen we hoe je JavaScript kon schrijven en uitvoeren met de DevTools. In deel 2 zullen we kijken naar het debuggen van JavaScript en het aannemen van een workflow zodat het oplossen van JavaScript-fouten en het diagnosticeren van problemen efficiënter wordt.
U kunt het foutopsporingszoekwoord rechtstreeks in uw code gebruiken om de foutopsporingsmogelijkheden (indien aanwezig) van de JavaScript-runtime op te roepen. Het effect van het toevoegen van het sleutelwoord debugger in uw code is identiek aan het handmatig instellen van een onderbrekingspunt via de DevTools UI. In Chrome is de debugger sleutelwoord heeft geen effect terwijl DevTools gesloten is.
De debugger-besturingselementen bieden fijnmazige controle over de debugging-stroom. Gebruik deze wanneer gepauzeerd op een breekpunt om effectief door JavaScript-code te navigeren. Elke foutopsporingscontrole die in dit gedeelte wordt vermeld, komt overeen met een knop in de DevTools die u kunt selecteren terwijl deze onderbroken is bij een onderbrekingspunt.
Verlaat het huidige breekpunt en voer de uitvoering van de code opnieuw uit zoals normaal. Dit heeft geen invloed op andere breekpunten die nog niet zijn gepauzeerd.
Gebruik Doorgaan met wanneer het huidige onderbroken breekpunt niet nuttig is en u wilt dat de code wordt uitgevoerd zoals normaal.
Doorloop code regel voor regel (één regel per klik) totdat een functie-oproep is bereikt. Op dit punt wordt de functieaanroep "over" getrapt en komt u niet in die specifieke functieaanroep.
Gebruik Overstappen wanneer wat u probeert op te lossen, is voorzien van de huidige functie en u niet hoeft te kijken naar externe functieaanroepen.
Gelijkwaardig aan Overstappen, behalve dat u in dit geval naar externe functie-oproepen navigeert door naar hun eerste regel te gaan.
Gebruik Stap in wanneer u geïnteresseerd bent in regel voor regel uitvoering en eventuele externe functieaanroepen.
Wanneer je in een functie stapt, Uitstappen zal doorgaan met het uitvoeren van de rest die functioneert, maar het is niet debugged.
Gebruik Uitstappen wanneer u geen interesse hebt in de rest van de huidige functie en wilt blijven debuggen erbuiten.
De oproepstapel is actief wanneer deze is gepauzeerd op een onderbrekingspunt. Het uitvoerpad dat naar het momenteel gepauzeerde onderbrekingspunt leidt, wordt weergegeven in de oproepstapel, waarbij de bovenste oproep de meest recente is.
Elke oproep binnen de stapel bevat:
Klik op een oproep binnen de stapel om naar het punt in de broncode te gaan met de betreffende regel gemarkeerd. Om een stacktracé naar uw klembord te kopiëren, klik met de rechtermuisknop tijdens een gesprek en selecteer Stapelspoor kopiëren. In het contextmenu van de oproepstapel kunt u ook selecteren Start Frame opnieuw.
Overweeg het gebruik van de debugger halverwege een callback-functie geactiveerd door een click event-handler, en u probeert te debuggen waarom het ophalen van de doelwit lijkt niet te werken zoals verwacht.
U ziet dat er een poging is gedaan om toegang te krijgen tot de eigenschap target als onderdeel van de deze zoekwoord, maar u herinnert zich vervolgens dat het een eigenschapsdeel van het gebeurtenisobject is dat als een argument aan de terugbelfunctie is doorgegeven.
U kunt de functie herschrijven met Live Edit om te controleren of uw wijzigingen werken en het nieuwe JavaScript wordt in de V8-engine ingespoten.
Wanneer u een gebeurtenishandler schrijft voor een gebeurtenis zoals scrollen, kunt u beginnen met gebruiken console.log om te zien hoe het aangenomen argument (het gebeurtenisobject) eruitziet. Een snelle tip om dit te bereiken is om de monitorEvents snelkoppeling. Plak de volgende code in de Console Panel en scroll dan door de pagina:
monitorEvents (venster, "formaat wijzigen");
Merk op dat het gebeurtenisobject in de console is vastgelegd en gereed is voor inspectie.
Wanneer u wilt dat de foutopsporing tijdens de uitvoering op de eerste regel van een functie wordt onderbroken, kunt u een van de volgende dingen doen:
Een andere techniek is om uit te voeren debug (fn) die deel uitmaakt van de Command Line API. De functie neemt de functie die u wilt debuggen als zijn argument, en zal breken op de eerste regel van de uitvoering van die functie.
Met deze techniek kunt u de foutopsporing pauzeren wanneer een eigenschap van een object waarin u geïnteresseerd bent op enigerlei wijze wordt benaderd (een lezen of schrijven). Als u wilt breken wanneer een eigenschap van een object wordt gelezen of beschreven, voert u het volgende uit (via de Console Panel of snippets):
Object.defineProperty (document.body, 'scrollTop', get: function () debugger;, set: function (val) debugger;);
Dit geldt voor een getter en een zetter voor de scrollTop eigendom van de document.body voorwerp. In de aangepaste getter en setter bestaat de debugger-instructie. Je kan ook gebruiken Object.observe om te breken op eigenschap-toevoegingen voor een gespecificeerd object:
var watchMe = ; Object.observe (watchMe, function () debugger;);
Met het sleutelwoord voor foutopsporing opzij, om een onderbrekingspunt in te stellen via DevTools, kunt u klikken op de regel met code die u wilt breken binnen de lijngoot. Deze methode voor het instellen van een onderbrekingspunt heeft extra functionaliteit: u stelt een voorwaardelijk onderbrekingspunt in dat de DevTools opdracht geeft om alleen bij een onderbrekingspunt te pauzeren als een bepaalde uitdrukking evalueert naar waar. U kunt bijvoorbeeld een voorwaardelijk breekpunt instellen om alleen te pauzeren als er een foutargument bestaat.
Om een voorwaardelijk breekpunt in te stellen:
U kunt ook de conditionele breekpunttechniek gebruiken om snel een in te voegen console.log verklaring als de uitdrukking om te evalueren. Sinds console.log evalueert naar onbepaald, DevTools pauzeert niet, maar omdat de expressie nog steeds wordt uitgevoerd, kunt u de waarde van variabelen op deze manier inspecteren.
Wanneer de foutopsporing bij een onderbrekingspunt wordt gepauzeerd, kunt u de Console Panel in de lademodus met behulp van de Ontsnappen sleutel. De code die u invoert, wordt geëvalueerd in dezelfde context als het punt waarop u bent gepauzeerd, wat betekent dat variabelen die zijn afgebakend voor u toegankelijk zijn.
Een kijkuitdrukking is een hulpmiddel om de techniek van regelmatige inspectie (via console.log bijvoorbeeld) van scoped variabelen. Kijkuitdrukkingen is een paneel in het bronnenpaneel. U kunt Watch Expressions toevoegen of verwijderen met behulp van de Plus en Min toetsen. Een typisch object om op te letten is het deze voorwerp; merk op hoe het verwijst naar een globaal vensterobject wanneer u niet bent gepauzeerd op een breekpunt.
Kijkuitdrukkingen worden meestal bijgewerkt terwijl u door de code loopt. Als dit niet het geval is, klikt u op verversen knop.
Beschouw het volgende script:
Accentsconagua
function a () return b (); functie b () return c (); function c () console.trace ('The Trace'); terug 42; een();
Er zijn drie gedeclareerde functies. Functie een roept functie b, dan functioneren b roept functie c. Het script initieert de ketting met een functieoproep een. De console.trace statement logt naar de console een stacktracé vanaf het punt waar de methode werd aangeroepen. Met console.trace wordt de uitvoer van het gebruik weergegeven console.trace.
Merk op dat de functienamen en de regels waar ze naartoe worden geroepen in het traceerbericht worden getoond. U kunt op het regelnummer klikken om naar het punt in de broncode te gaan via het bronnenpaneel. Deze techniek werkt ook voor fragmenten.
De debugger biedt verschillende modi voor het omgaan met uitzonderingen:
Wanneer u een website moet debuggen waarover u weinig inzicht hebt, kunt u een andere foutopsporingstechniek gebruiken. In deze benadering haakt u in op gebeurtenissen waarvan u denkt dat deze zullen activeren en vraagt u DevTools-onderbrekingen aan voor dergelijke gebeurtenissen als en wanneer deze zich voordoen. Er zijn twee categorieën van "buiten> in" toegangspunten:
U hebt de taak om een webpagina te debuggen, met name de DOM. Knopen worden toegevoegd en verwijderd tijdens de levenscyclus van de pagina, en u moet de JavaScript inspecteren die dit mogelijk maakt. Stel een DOM-onderbrekingspunt in met de volgende stappen:
Telkens wanneer u een DOM-onderbrekingspunt instelt, kunt u het eenvoudig in- en uitschakelen op de DOM-breekpunten deelvenster in de Elements Panel. In dit deelvenster wordt elk onderbrekingspunt dat u instelt weergegeven en kunt u op de volgende manieren met dit deelvenster communiceren:
Omschrijving: Een Subboom-wijziging vindt plaats wanneer de boom van een wortelknooppunt (waarop het breekpunt is ingesteld) is gewijzigd. Dit kan het toevoegen of verwijderen van knooppunten omvatten.
Use case: Een lege div container is aanwezig in de DOM en er gebeurt een Ajax-aanvraag bij het laden van een pagina, waarbij enkele nieuwe knooppunten aan de oorspronkelijke container worden toegevoegd. Voeg een Subtree-wijzigingsbreekpunt toe aan de container om het exacte punt in de code te zien die nieuwe knooppunten toevoegt aan de DOM.
Voorbeelden van berichten: Onderbroken op a Subboom aangepast breekpunt ingeschakeld lichaam, omdat zijn afstammeling p was verwijderd. Of: gepauzeerd op a Subboom aangepast breekpunt ingeschakeld div # ouder, omdat er een nieuw kind aan dat knooppunt is toegevoegd.
Omschrijving: Een kenmerkmodificatie wordt geactiveerd wanneer een attribuutnaam of waarde op een knooppunt wordt toegevoegd, verwijderd of gewijzigd. Dit omvat alle attributen, zoals klasse, gegevens-*, of stijl.
Use case: Een visuele verandering gebeurt op de pagina op een schijnbaar willekeurig tijdstip en u beperkt dit tot een klasse die dynamisch is ingesteld op het lichaamselement. U wilt de oorzaak van deze dynamische klassetoevoeging onderzoeken.
Bericht voorbeeld: Onderbroken op een Kenmerk gewijzigd breekpunt ingeschakeld p.
Omschrijving: Een knooppuntverwijderingsbreekpunt wordt geactiveerd op het punt waar een knooppunt wordt verwijderd van het bovenliggende element dat het ingestelde breekpunt bevat.
Use case: U bouwt een takenlijst-app en wilt verifiëren dat wanneer een gebruiker een taakitem verwijdert, deze ook wordt verwijderd uit de DOM. U kunt een breekpunt voor knooppuntverwijdering instellen om ervoor te zorgen dat dit gedrag optreedt.
Bericht voorbeeld: Onderbroken op a Node Removed div # container.
In de DevTools zijn een aantal vooraf gedefinieerde Event Listener Breakpoints beschikbaar die u kunt inschakelen. Deze bieden toegangspunten tot het JavaScript dat bij een pagina hoort.
Overweeg een eenvoudig about: blank pagina. Stel een Klik gebeurtenis luisteraar breekpunt op deze pagina met de volgende stappen:
Muis Categorie evenementluisteraar.Klik gebeurtenis luisteraar.U hebt nu een onderbrekingspunt ingesteld. Als u op de pagina klikt, ziet u dat er niets gebeurt. Voer nu het volgende stuk JavaScript-code uit in de Console Panel.
document.addEventListener ('klik', console.log.bind (console))Wanneer u een onderbrekingspunt instelt voor dezelfde gebeurtenis waarvoor u een gebeurtenislistener hebt geregistreerd, pauzeert de foutopsporing vóór het punt waar de callback van de gebeurtenislistener wordt uitgevoerd.
U kunt onderbrekingspunten registreren voor vele soorten gebeurtenissen, zoals timers, aanraakgebeurtenissen en meer, die in de onderstaande tabel worden vermeld.
| Evenement Categorie | Voorbeelden van evenementen |
|---|---|
animatie | requestAnimationFrame, cancelAnimationFrame, animationFrameFired |
Controle | vergroten / verkleinen, schuiven, zoomen, focus, vervagen, selecteren, wijzigen, verzenden, resetten |
Clipboard | kopiëren, knippen, plakken, beforecopy, beforecut, beforepaste |
DOM-mutatie | DOMActiveren, DOMFocusIn, DOMFocusOut, DOMAttr Modified, DOMCharacterData Modified, DOMNodeInserted, DOMNodeInsertedInto Document, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded |
Apparaat | apparaatoriëntatie, devicemotion |
Slepen, laten vallen | dragenter, dragover, dragleave, drop |
Toetsenbord | keydown, keyup, keypress, input |
Laden | load, beforeunload, unload, abort, error, hashchange, popstate |
Muis | klik, dblclick, mousedown, mouse-up, mouseover, mousemove, mouseout, mousewheel, wiel |
timer | setTimer, clearTimer, timerFired |
aanraken | touchstart, touchmove, touchend, touchcancel |
WebGL | webglErrorFired, webglWarningFired |
De "debugging from the outside in" -techniek kan handig zijn wanneer u een website van derden moet debuggen waarvan de functionaliteit is verbroken, of zelfs wanneer u nieuwsgierig bent naar hoe iets op een pagina die u bekijkt werkt.
Er bestaan een aantal Chrome-extensies, waarvan er veel de DevTools-functionaliteit verbeteren. Een uitgebreide lijst is te vinden op de DevTools Extensions Gallery.
Voor ontwikkelaars van DevTools-extensies is de JavaScript-voorbewerkingsfunctie een lonend onderwerp om over te leren. De preprocessor kan de JavaScript-broncode onderscheppen voordat deze de V8-engine binnenkomt, wat betekent dat de JavaScript-broncode kan worden gewijzigd via DevTools voordat deze de VM binnenkomt, allemaal vanuit een extensie.
Naast de interceptiemogelijkheden heeft de preprocessing-API programmatische toegang voor het herladen van scriptbronnen. Een extensie kan op elk moment tijdens de levenscyclus een JavaScript-bron opnieuw laden zonder de originele webpagina opnieuw te laden.
Deze sectie behandelt een paar hulpmiddelen die een zekere mate van integratie bieden tussen Node.js en de Chrome DevTools.
De DevTools bestaat uit twee delen:
Elke toepassing kan communicatie implementeren via het externe foutopsporingsprotocol en de gebruikers toestaan fouten op te sporen via DevTools. Node Inspector is zo'n tool. Na de installatie kunt u elk knooppuntscript uitvoeren met Node Inspector. De tool start een webserver die de front-end van DevTools host. Deze speciale versie van DevTools maakt geen gebruik van de Chrome-back-end, maar eerder van Node Inspector.
Zoals je kunt zien in Node Inspector, wordt DevTools onderbroken bij een onderbrekingspunt. De oproepstapel verwijst naar de oproepen die worden uitgevoerd in Node.js. De enige betrokkenheid van de browser hier is voor de gebruikersinterface van DevTools.
Gebruik Knooppunt Heapdump om een momentopname van de V8-heap te maken op een moment in uw code. De huidige status van de V8-heap wordt geserialiseerd en uitgevoerd naar een bestand.
Vergelijk twee heap-snapshots om te ontdekken welke objecten niet worden verzameld. Dit is handig voor het opvangen van geheugenlekken.
Dat is het voor deze tweedelige serie over een moderne debug-ervaring. Hopelijk ben je op dit moment vertrouwd met het schrijven en het fout opsporen van JavaScript in Chrome DevTools. U kent workflows die kunnen helpen bij het opsporen van fouten en u kent enkele tips en trucs bij het omgaan met een productiesite waar u nog niet eerder aan gewerkt hebt. Zorg ervoor dat je een paar technieken uitprobeert die je hier hebt geleerd, de volgende keer dat je moet debuggen.
Bedankt voor het lezen!
