Share
In dit derde deel van onze Chrome Developer Tools-reeks zullen we bekijken hoe JavaScript moet worden aangepast en foutopsporen. Optimalisatie is een belangrijk onderdeel van het ontwikkelingsproces, vooral voor prestatie-kritische toepassingen. We zullen ook technieken bespreken om potentiële knelpunten in onze code te identificeren.
Net als in de vorige twee artikelen, zal ik me concentreren op de functies in de Chrome Canary-build (versie 26.0, vanaf dit schrijven). Ik behandel de Bronnen en Tijdlijn-panelen.
Het bronnenvenster is de beste plek voor JavaScript-foutopsporing. Dit paneel, in combinatie met het consolepaneel, zorgt voor een extreem krachtig hulpmiddel! Het is een point-and-click-interface waarmee u de JavaScript-uitvoering kunt onderbreken en alle variabelen en objecten in de huidige scope kunt inspecteren.
Misschien vindt u het handig om uw CSS en JavaScript in de Developer Tools te bewerken.
Accentsconagua
deze sleutelwoord in de verschillende stadia van een JavaScript-programma, dat kan kijk maar de deze sleutelwoord om de verschillende waarden in de loop van de tijd te zien. Klik op de knop Toevoegen om een expressie toe te voegen. Als een expressie niet wordt bijgewerkt, klikt u op de kleine vernieuwingsknop naast de knop Toevoegen.Op het tabblad bronnen worden bronnen weergegeven die zijn gegroepeerd in het subdomein waar ze worden weergegeven. Elke resource heeft een contextmenu (onthuld door rechts te klikken op de resource) met een reeks veelgebruikte opties. Eén optie is echter erg interessant: Lokale aanpassingen, waar we later naar zullen kijken.
Opmerking: u kunt de bronbestandlijst weergeven als een platte lijst (dus niet opgenomen in mappen gegroepeerd op subdomein) door 'Toon mappen' uit te schakelen in Instellingen> Algemeen.
Als u op een resource klikt, wordt deze in het hoofdvenster van de inhoud weergegeven. Vergeet niet de mooie afdrukmodus in te schakelen voor geminimaliseerde bronnen, omdat sommige minifiers variabelen hernoemen om de code moeilijker te begrijpen. Hopelijk zullen meer ontwikkelaars in de toekomst bronkaarten genereren, waardoor het gemakkelijker wordt om met verkleinde code te werken.
U kunt de meeste bestanden in het hoofdvenster van de inhoud bewerken en die wijzigingen worden onmiddellijk in de browser weergegeven. Nadat u wijzigingen in een resource hebt aangebracht, biedt het contextmenu u de mogelijkheid om te Opslaan (hoewel niet permanent) of Opslaan als (slaat een nieuwe versie lokaal op). Wanneer u met uw eigen lokale sites werkt, is het misschien handig om uw CSS en JavaScript in de Developer Tools te bewerken in plaats van met uw IDE. Wijzigingen opslaan, in dit geval, wijzigt het daadwerkelijke bronbestand. Hulpprogramma's zoals Tincr of chrome-devtools-autosave kunnen helpen bij het automatiseren van deze workflow.
Het contextmenu van de resource biedt ook de optie om de resource in het netwerkpaneel te onthullen.
Een revisie is een nieuw punt binnen de levensduur van een resource, waarop deze is aangepast. Door code te bewerken en op te slaan in het bronpaneel, wordt een nieuwe revisie gemaakt en wijzigingen in de stijl die in het paneel Elementen zijn aangebracht, activeren feitelijk een nieuwe revisie!
Nadat u een paar wijzigingen hebt aangebracht, kunt u met de rechtermuisknop op de resource klikken en Lokale wijzigingen selecteren. Hiermee wordt een nieuw deelvenster Lokale modificaties geopend met een diff van de originele en bewerkte bestanden. In het deelvenster Lokale modificaties kunnen we een gewijzigd bronbestand in zijn geheel terugdraaien (handig voor wanneer u een groot aantal ongewenste wijzigingen hebt aangebracht) door op 'terugzetten' naast de bestandsnaam te klikken.
Developer Tools is zo vriendelijk om ons te attenderen op mogelijke optimalisaties.
Het hoofdvenster van de inhoud bevat veel van de functies die u zou vinden in bewerkers van basiscodes: regelnummers, accentuering van syntaxis, de mogelijkheid om tabbladen te maken en functies voor 'ongedaan maken'. Hoewel het niet overeenkomt met een volwaardige IDE, is het niet slecht voor snelle bewerking.
Met onderbrekingspunten kunnen we de uitvoering van JavaScript-code stoppen en de huidige omgeving inspecteren. Bijvoorbeeld: neem aan dat we een simpele hebben voor lus die items op een array duwt. Ons doel is om de innerlijke werking binnen elke iteratie van de lus precies te begrijpen. We kunnen heel gemakkelijk gebruiken console.log om de variabelen te loggen die we willen inspecteren. Hoewel deze techniek u de gewenste resultaten zou geven, is het zeker niet de meest efficiënte foutopsporingstechniek. Door gebruik te maken van onderbrekingspunten, kunnen we de uitvoering van de code onderbreken in de voor loop en inspecteer alle variabelen binnen het bereik van de context.
var arr = []; for (var i = 0; i < 3; i++) var num = i; arr.push(num);
Om een breekpunt toe te voegen, klikt u op het regelnummer; u kunt ook met de rechtermuisknop op het regelnummer klikken en de optie "Breekpunt toevoegen" kiezen. Stel na het instellen van uw onderbrekingspunt de pagina opnieuw in en merk op dat onderbrekingen blijven bestaan tussen het laden van de pagina. Als de code nog moet worden uitgevoerd (het onderbrekingspunt is bijvoorbeeld ingesteld in een gebeurtenishandler voor klikken), kunt u de code uitvoeren zonder een pagina te vernieuwen.
U kunt een breekpunt in uw code hard coderen met behulp van de debugger; verklaring in uw code. Developer Tools (en de meeste JavaScript-foutopsporingsprogramma's) herkennen dit als een onderbrekingspunt.
Wanneer een breekpunt wordt bereikt, wordt de pagina grijs en de coderegel blauw. Op dit punt kunnen we op de escape-toets drukken om het consolepaneel weer te geven. Wat interessant is, is dat de code geschreven en uitgevoerd in de console (terwijl gepauzeerd op een breekpunt) daadwerkelijk wordt uitgevoerd in de momenteel gepauzeerde context! Typisch, de deze sleutelwoord verwijst naar het globale venster voorwerp; terwijl het bekijken deze in een Klik gebeurtenishandler toont de waarde als het gebeurtenisdoel (een element).
In de bovenstaande schermafbeelding is het grijze gedeelte het document zelf en hebben Developer Tools de huidige regel JavaScript gemarkeerd. In de console ziet u de resultaten van het inspecteren van een paar variabelen. Rechts van het inhoudvenster bevindt zich het deelvenster "Scope Variables", waar u alle variabelen en objecten in het huidige bereik kunt inspecteren.
Voorwaardelijke breekpunten laten je breken wanneer een bepaalde voorwaarde waar is.
In het rechterdeelvenster van het paneel Bronnen ziet u het tabblad XHR-onderbrekingspunten. Klik op 'Add XHR Breakpoint toevoegen' op uw favoriete Ajax-site. Als u in het veld 'URL bevat' lege pauzes opgeeft elke XHR verzoek.
Dit biedt ontwikkelaars nieuwe en krachtige mogelijkheden. We kunnen navigeren naar een site die we niet hebben gebouwd, en we hebben er geen betrokkenheid bij gehad en we beginnen met het debuggen van code op basis van bepaalde gebeurtenissen en criteria. Dus pauzeren op Ajax-verzoeken is leuk, maar met welke andere gebeurtenissen kunnen we doorbreken?
Het bronnenpaneel heeft een point-and-click-interface voor het instellen van onderbrekingspunten die overeenkomen met bepaalde gebeurtenislisteners. Merk op dat het doorbreken van een bepaalde gebeurtenis alleen werkt wanneer de betreffende pagina naar die gebeurtenis luistert. Als we breken op de Controle> Formaat wijzigen gebeurtenis, met code zoals het volgende zorgt ervoor dat de code breekt wanneer het evenement vuurt:
window.onresize = function (e) console.log (e); ;
Dus wanneer is het nuttig om bepaalde gebeurtenissen te doorbreken?
Breekpunten blijven bestaan tussen het laden van pagina's.
Op het tabblad DOM-onderbrekingspunten worden onderbrekingspunten voor de DOM weergegeven. Een eenvoudige manier om dit in actie te zien is om een element te vinden dat, bijvoorbeeld wanneer erop wordt geklikt, het element heeft naam van de klasse eigendom veranderd. Zoek het element in het deelvenster Elementen, klik er met de rechtermuisknop op en ga naar Break On> Attributen wijzigen. De code zal nu breken wanneer de waarden van de attributen van dat element veranderen.
document.querySelector ('# knop'). onclick = function () this.setAttribute ('some', 'thing'); ; De bij klikken gebeurtenishandler hierboven telt als een attribuutwijziging, die iets soortgelijks vertoont als dit:
Andere opties zijn:
element.remove ().Notitie: Chrome lijkt de methode remove () te hebben geïmplementeerd. Sommige browsers ondersteunen deze methode niet; dus, removeChild () moet in plaats daarvan worden gebruikt.
In het deelvenster Tijdlijn onderzoekt u de prestatieproblemen van uw webtoepassing. Het primaire doel van het tijdlijnpaneel is (op het moment van schrijven) voor het bekijken van informatie, in tegenstelling tot de andere panelen waarmee u destructieve acties op de pagina kunt uitvoeren.
Tijden die u mogelijk wilt gebruiken in het tijdlijnpaneel zijn:
U kunt een breekpunt in uw code hard coderen met behulp van de
debugger;verklaring in uw code.
In deel 2 herinnert u zich misschien hoe we begonnen met het vastleggen van netwerkinformatie voordat de pagina werd geladen om zo veel mogelijk netwerkverzoeken vast te leggen. We doen dat niet in het Tijdlijn-paneel; we kunnen beter korte en specifieke evenementen opnemen. We hoeven niet noodzakelijk iets te doen. We kunnen de opname laten staan om te kijken wat er gebeurt als de gebruiker inactief is of als er timers op de achtergrond actief zijn.
De tabbladen Events, Frames en Memory worden gevuld tijdens het opnemen; dus, kijk zeker door ze om de gegevens te vinden die u nodig heeft. De geheugensectie kan u helpen potentiële geheugenlekken op te vangen.
Records worden weergegeven tijdens en na opnames. Een redelijke hoeveelheid gegevens wordt vastgelegd in de records, zoals weergegeven in de volgende afbeelding.
Dit screenshot toont enkele netwerkverzoeken (blauw) en een paar 'herbereken stijlen' (paars). Herberekeningen van stijl kunnen om een aantal redenen plaatsvinden. De gele records zijn scripts en groen staat voor paginaweergave.
Klikken op of zweven boven een record geeft meer informatie weer. Als u bijvoorbeeld boven een 'verf'-record zweeft, wordt mogelijk het gedeelte van de pagina dat is geverfd weergegeven.
Ontwikkelaarstools koppelen soms een record aan een ander paneel. De koppeling van een afbeelding leidt u bijvoorbeeld naar het Resources-venster met die afbeelding in focus en een XHR-record kan een koppeling bevatten naar het overeenkomstige item in het netwerkpaneel.
Developer Tools is zo vriendelijk om ons te attenderen op mogelijke optimalisaties. Let op het kleine meldingspictogram rechts van een aantal records in de volgende afbeelding. Als deze is vervaagd, moet u een analyse uitvoeren om het daadwerkelijke record te vinden dat de nuttige informatie bevat.
Popovers bevatten soms een link naar de regel code die ervoor zorgde dat de record werd weergegeven. Maar een woord van waarschuwing: mooi afdrukken zal niet altijd helpen - vooral als je kijkt naar code van derden. Een optie is om een onderbrekingspunt in te stellen op de regel waar je naartoe wordt gebracht. Nadat de foutopsporing is onderbroken, kunt u de inhoud van de variabele bekijken om de intentie van de code beter te begrijpen.
Als je op mij lijkt, eindig je altijd meer gegevens dan je nodig hebt, maar je kunt een selectie vormen over de verticale balken (frames) die alleen de records weergeeft die overeenkomen met het geselecteerde deel.
Als u alleen om langdurige records geeft, stel dan een filter in om alleen die lange records weer te geven. U kunt dit onderaan in het tijdlijnpaneel doen.
Als het scrollen niet zo soepel aanvoelt als het zou moeten, overweeg dan het 'Laden' (bijvoorbeeld netwerkrecords) uit te sluiten. Dat gezegd hebbende, als u weet dat netwerkverzoeken worden gebruikt om gegevens in een pagina te laden zodat gebruikers oneindig kunnen scrollen, moet u 'Laden' ingeschakeld houden.
Pas het filteren niet toe alleen omdat de gegevens aanvankelijk te intens lijken. Neem de tijd om te begrijpen en te onderzoeken wat de hulpmiddelen voor ontwikkelaars je laten zien. U zult de tijdlijn willen gebruiken om te bevestigen waar de vertragingen plaatsvinden en ernaar streven om die verticale balken zo leeg mogelijk te krijgen (witruimte / niet-actieve tijd).
Het hoofdvenster van de inhoud bevat veel van de functies die u zou vinden in bewerkers van basiscodes.
Kent u nog andere nuttige bronnen? Noem het in de comments!
