Share
In deze uit twee delen bestaande instructiereeks kijken we naar het schrijven en foutopsporen van JavaScript-code met behulp van moderne gereedschappen zoals Chrome DevTools.
In deel 1 krijgt u een inleidende blik op de verschillende panels in de DevTools en voor welke workflows ze geschikt zijn. Er zal ook aandacht zijn voor het schrijven en uitvoeren van JavaScript-code via de browser in plaats van een code-editor.
Developer Tools zijn functies die worden geboden door browsers die een reeks hulpprogramma's bevatten om webpagina's te inspecteren, ermee te werken en te debuggen. Browser DevTools worden meestal gebundeld met alle moderne browsers, waaronder Chrome, Firefox, Safari, Opera en Internet Explorer. Deze zelfstudie richt zich specifiek op het deel DevTools van Chrome Canary, maar alle hier genoemde functies zijn waarschijnlijk binnenkort onderdeel van Chrome Stable.
Het open webplatform stelt u in staat om Klik met de rechtermuisknop> Inspecteer element op elke webpagina en ontdek de inhoud ervan, maar JavaScript is altijd een beetje meer buiten bereik geweest dan CSS (Cascading Style Sheets). Hoewel DevTools vol zit met functies die zijn gerelateerd aan de vormgeving van de pagina, is er ook een heleboel minder bekende functionaliteit waarmee je JavaScript op verschillende manieren kunt bekijken, schrijven en debuggen, of het nu op je eigen pagina staat of op een derde -party site.
Als u een front-end webontwikkelaar bent, is het raadzaam om op zijn minst op de hoogte te zijn van de JavaScript-hulpprogramma's die DevTools te bieden heeft. Hoogstaande functies omvatten:
Dit gedeelte behandelt de UI-elementen van de DevTools, met name het bronnenvenster en het consolepaneel, aangezien dit de twee panelen zijn die worden gebruikt voor de rest van deze zelfstudie.
Houd rekening met enkele lay-outkenmerken:
In het bronnenvenster vindt u een code-editor en het ondersteunt syntax highlighting voor veel voorkomende bestandsindelingen zoals HTML, CSS, JavaScript, CoffeeScript, LESS en Sass. De code-editor is aanwezig in het hoofdvenster. Rechtstreeks boven het hoofdvenster ziet u tabbladen die overeenkomen met uw geopende bestanden.
In het Bronnenvenster in de linkerzijbalk ziet u een bestandsstructuur waarin doorgaans de elementen worden weergegeven die op de momenteel geïnspecteerde pagina zijn geladen. Activa zijn gegroepeerd per domein en mappen kunnen in een uitgevouwen of samengevouwen toestand zijn. Als u één keer op een item klikt, wordt dit geopend in de codebewerker.
De rechterzijbalk bevat besturingselementen voor JavaScript-foutopsporing en elk deelvenster kan in een uitgevouwen of samengevouwen toestand zijn. Verschillende niveaus van uitvoer worden hier weergegeven wanneer JavaScript is gepauzeerd op een onderbrekingspunt.
Met het consolepaneel kunt u de uitvoer bekijken die wordt geproduceerd door diagnostische logboeken (zoals console.log statements) maar ook om JavaScript te schrijven en te evalueren in de context van de momenteel geïnspecteerde pagina. Het consolepaneel ondersteunt zowel de Console-API als de Command Line-API. Hier zijn enkele functies die worden weergegeven door elke API, samen met een beschrijving van hun uitvoer.
Accentsconagua
// Een eenvoudige loginstructie, een string, een array en een object console.log ('Hi', [1,2,3], this);
// Hetzelfde als console.log maar dan in rood opgemaakt om een fout console.error aan te geven ('Er is een fout opgetreden');
toetsen (raam); // Verkrijg de eigenschappen van een object
$ 0; // Haal het momenteel geselecteerde element op in het Elements-paneel
De bovenkant van het consolepaneel bevat enkele bedieningselementen zoals hieronder weergegeven.
duidelijk(), die deel uitmaakt van de Command Line API.Het consolepaneel is een van de weinige panelen die u kunt overlappen over andere panelen in de DevTools (Elements, Network, Sources) om een verbeterde workflow te bieden. Als u merkt dat u regelmatig terugkeert naar het consolepaneel, opent u de consolelade door op de Ontsnappen sleutel.
In deze sectie wordt de nadruk gelegd op het gebruik van DevTools om JavaScript-bronnen te bekijken die een site gebruikt. Voordat u doorgaat, is het raadzaam om de browsercache uit te schakelen via DevTools. Ga hiervoor naar Instellingen> Algemeen en schakel het selectievakje getiteld in Schakel cache uit (terwijl DevTools open is). Dit zorgt ervoor dat u altijd een nieuwe versie van een actief krijgt.
Navigeer naar HTML5Please.com, een site die de gereedheid van webplatformfuncties verklaart. Open de DevTools met Command-Shift-I of door te selecteren Inspecteer Element vanuit het contextmenu van de pagina. Ga naar de Bronnenpaneel en noteer de bestandsboomstructuur die in de linkerzijbalk wordt weergegeven. Het is niet ongehoord dat websites hun JavaScript opslaan in mappen zoals "js" of "scripts", dus je weet al waar je moet kijken. Open de script.js bestand in de js map. Merk een paar kenmerken van de code-editor op die handig kunnen zijn wanneer u JavaScript-code bekijkt of bewerkt:
Gebruik de go-to-definitiefunctie om snel JavaScript-methoden of -functies te vinden of te ontdekken. U kunt het modeldialoogvenster go-to definition openen via de snelkoppeling Command-Shift-P. Als u de naam kent van de methode of functie waarnaar u op zoek bent, typt u deze in het zoekveld van de go-to-definitie; terwijl u typt, worden de resultaten in realtime bijgewerkt. Elk resultaat bevat de naam van de overeenkomende methode (indien aanwezig) en het regelnummer waar deze is gedefinieerd. Gebruik invoeren om een zoekresultaat te selecteren en u komt terecht op de coderegel waar de functie is gedefinieerd.
Nu open modernizr-2.0.min.js in de js / libs map. Het feit dat dit bestand is verkleind, maakt het moeilijker om te bekijken. kiezen Pretty Print DevTools gebruiken om een meer intuïtieve opmaak toe te passen op het bestand, met behulp van regeleinden en inspringen. De Pretty Print-functie werkt voor zowel CSS als JavaScript.
Elk JavaScript-bestand in de bestandsstructuur heeft een contextmenu, dus open het met klik met de rechtermuisknop. Merk een paar opties op die handig zijn om het bestand offline te zetten voor later gebruik.
Het netwerkpaneel geeft niet alleen eenvoudig weer welke bronnen een pagina heeft geladen, maar geeft ook andere informatie en gegevens weer.
Gebruik HTML5Please.com als voorbeeldwebsite en volg de onderstaande stappen:
Het eerste script, modernizr-2.0.min.js, heeft de waarde van html5please.com/:17 voor de initiatiefnemer. Dit suggereert dat het een HTML-bron was die de download van het script initieerde (in plaats van een script-lader, bijvoorbeeld). Klik op de initiator en u wordt naar de regel met code in het bronnenvenster geleid die verwijst naar het bestand:
In het geval dat een script dynamisch wordt ingevoegd (bijvoorbeeld met een scriptlader), kan de initiator-kolom in het netwerkvenster een JavaScript-call stack bieden met betrekking tot de aanroepen die plaatsvonden helemaal tot aan het punt waar het script dynamisch werd ingevoegd in de DOM.
U kunt op elke oproep binnen een oproepstapel klikken om naar het relevante gedeelte van de code in het bronnenvenster te navigeren.
In de sectie "JavaScript met de DevTools bekijken", heb ik uitgelegd hoe informatie, metadata en broncode op JavaScript-elementen kunnen worden bekeken. In dit gedeelte wordt de manier onderzocht waarop je JavaScript kunt schrijven met de DevTools.
Gebruik het consolepaneel voor het schrijven van snelle JavaScript-oneliners met onmiddellijke resultaten. JavaScript wordt uitgevoerd met de context van de momenteel geïnspecteerde pagina. Voer wat JavaScript uit in het consolepaneel door op te drukken invoeren na het invoeren van een code.
Raadpleeg de Console API en Command Line API voor een lijst met beschikbare methoden en functies.
Hoewel het consolepaneel relatief eenvoudig is, zijn er een paar kleine tips om uw workflow te verbeteren:
toetsen (venster) om globale variabelen op de huidige pagina te detecteren.$ _ helper om het laatste resultaat van een vorig commando op te halen.Misschien vindt u het consolepaneel een goede kandidaat om snel met JavaScript te experimenteren om te ontdekken wat de uitvoer van bepaalde uitdrukkingen is. Wanneer u echter complexere JavaScript-code gaat schrijven, kunt u gemakkelijk tegen beperkingen aanlopen:
Het consolepaneel is niet bedoeld als vervanging van een codebewerker of zelfs als alternatief. Hier is een lijst van enkele gevallen waarin het consolepaneel nuttig kan zijn:
() aanroepen en van toepassing zijn() methoden door ze inline uit te voeren en de resultaten te observerenHet hoofdvenster van het bronnenpaneel bevat een code-editor met basisbewerkingsmogelijkheden.
De editor zelf wordt mogelijk gemaakt door CodeMirror, een krachtige teksteditor die is geïmplementeerd met JavaScript. DevTools importeert de CodeMirror-editor in zijn eigen codebase en schakelt selectief verschillende functies in die op zijn beurt beschikbaar worden gemaakt voor elke Chrome-gebruiker.
Bij het bewerken van JavaScript (naast andere ondersteunde talen) bevat de Bronnenvenster-editor een aantal hulpprogramma's zoals:
document wordt niet voorgesteld na het typen docu tenzij er al minstens één woord voorkomt document in hetzelfde bestand.De functie, beter bekend als Live Edit, biedt u de mogelijkheid om de JavaScript-code van een pagina te bewerken via DevTools en de wijzigingen direct op de pagina toe te passen zonder een paginavernieuwing. Er is geen specifieke gebruikersinterface om dit te gebruiken; je herschrijft eenvoudigweg een deel van JavaScript-code en drukt op Command-S om het op te slaan.
Hoe dit achter de schermen werkt, wordt hieronder uitgelegd, maar denk eerst aan de volgende voorwaarden (deze zijn onafhankelijk van Live Edit):
script.js laadt in Chrome via een webpagina.script.js wordt geparseerd, geëvalueerd en gecompileerd in machinecode via de V8 JavaScript-engine.Dit is wat er achter de schermen van de Live Edit-functie gebeurt, rekening houdend met de vorige punten:
script.js in de DevTools-codebewerker. Stel dat er een knop op de huidige webpagina is. Bij klikken op de knop voert een gebeurtenisklantlistener een anonieme functie uit.console.log verklaring en sla het bestand op.script.js worden teruggejecteerd in de V8-motor voor verwerking.script.js en de oude. Verwijderingen, toevoegingen en wijzigingen worden opgeslagen.script.js met de gecompileerde wijzigingen.Live Edit werkt het beste met kleine wijzigingen in plaats van volledige JavaScript-bestanden voor uw app te maken. Foutopsporingsscenario's werken goed met Live Edit.
Workspaces is geen essentieel onderdeel van JavaScript-foutopsporing via de DevTools. Afhankelijk van uw vereisten kan dit uw werkstroom voor foutopsporing echter versnellen. Werkruimten is een functie van de DevTools waarmee u de inhoud van een map op het bestandssysteem kunt wijzigen door codewijzigingen aan te brengen in de DevTools.
Als u door een project bladert dat lokaal wordt bediend via een webserver, zoals op http: // localhost: 3000 / en het project bestaat in uw bestandssysteem op ~ / Ontwikkeling / project, u kunt bijvoorbeeld DevTools leren over de toewijzing tussen de twee en de Live Edit-mogelijkheden gebruiken met de mogelijkheid om schijven op te slaan. Workspaces maakt de volgende workflow mogelijk:
In stap 3 overschrijft het opslaan het oorspronkelijke bronbestand.
Bronkaarten lossen een veel voorkomend probleem op bij het omgaan met broncode die wordt verwerkt of gecompileerd in iets anders. Voorbeelden zijn:
Het probleem is als volgt: bij het debuggen van een verwerkte versie van de code, kan het moeilijk zijn om te begrijpen hoe uw originele broncode in kaart komt op wat u bekijkt tijdens het foutopsporing. Als u een foutmelding krijgt in de DevTools-console voor een productiewebsite, zult u doorgaans uiteindelijk een onvoltooide en aaneengesloten JavaScript-code moeten oplossen, die weinig lijkt op de bronbestanden die u auteur.
Een bronkaart is een gegenereerd bestand dat is geproduceerd als onderdeel van een compilatieproces dat beschikbaar is voor de eerder genoemde gebruikscasussen. DevTools kan een Source Map-bestand lezen om te begrijpen hoe een samengesteld bestand wordt toegewezen aan het oorspronkelijke bestand.
De twee codefragmenten (Source File-app.js en Transpiled file-compiled.js) tonen de foutopsporingscode van Source Map.
Voorbeeld 1. Bronbestand-app.js
for (var element van [1, 2, 3]) console.log (element);
Merk op dat de app.js bronbestand gebruikt een Ecmascript 6-compatibele functie die bekend staat als de array-iterator.
Voorbeeld 2. Transpiled File-compiled.js
"gebruik strikt"; for (var $ __ 0 = [1, 2, 3] [Symbol.iterator] (), $ __ 1;! ($ __ 1 = $ __ 0.next ()). done;) var element = $ __ 1.waarde; console.log (element); // // sourceMappingURL = app.js.map
Let daar op compiled.js wordt verwezen door een scripttag op een HTML-pagina, samen met de Traceur-runtime en wordt uiteindelijk geopend in een browser.
Zelfs de gecompileerde JavaScript heeft de console.log verklaring op regel 6. DevTools kan precies laten zien waar deconsole.log verklaring bestaat in het originele bronbestand (foutopsporing bronkaart), die op regel 2 staat. Breekpunten werken zoals verwacht. Achter de schermen wordt het gecompileerde JavaScript geëvalueerd en uitgevoerd, maar DevTools presenteert een ander activum in plaats van de browser-geëvalueerde versie.
De functie Snippets van DevTools biedt een snelle manier om diverse JavaScript-code te schrijven en uit te voeren. Alle JavaScript uitgevoerd via fragmenten wordt uitgevoerd binnen de context van de huidige pagina. Het uitvoeren van een DevTools-fragment is vergelijkbaar met het uitvoeren van een bladwijzer op een pagina. Misschien vindt u het beter om bepaalde JavaScript-code te schrijven in Snippets dan in het consolepaneel om redenen die te maken hebben met een betere codebewerkingsomgeving. Uw fragmenten worden opgeslagen in de lokale opslag van de DevTools.
Om fragmenten te gebruiken:
console.log ( 'Hello'); in de codebewerker.Je kunt een aantal reeds geschreven fragmenten vinden in deze DevTools Snippets-repository.
Dat is het voor deel 1 van een moderne foutopsporingservaring. In deel 2 bekijken we enkele functies voor foutopsporing en een paar uitbreidingen die hierbij kunnen helpen.
