Share
In 2013 heb ik een paar zelfstudies gepost op DevTools: Markup and Style, Networking and the Console en JavaScript and Performance, waarin de basisfuncties van de verschillende DevTools-panels worden behandeld. Sindsdien is er veel veranderd, dus laten we een kijkje nemen.
DevTools is behoorlijk gegroeid sinds het voor het laatst werd behandeld op Tuts +, hier zijn enkele van de functies waarvan u op de hoogte wilt zijn:
screencasting: bekijk en communiceer met webpagina's op je Android-apparaat via DevTools op de desktop.
workspaces: gebruik de bronnen paneel als een code-editor. Bewerk de code in uw project en laat die aanhouden tot de schijf.
Foutopsporing in bronkaart: schrijf je LESS / Sass of zelfs CoffeeScript? Uitvoerbron-kaarten tijdens de compilatie om DevTools de toewijzing te laten begrijpen.
* Vlamkaart: *bekijk een interactieve visualisatie van JavaScript-verwerking in de loop van de tijd.
Mobiele emulatie: emuleer bepaalde apparaatkenmerken (bijvoorbeeld schermafmetingen, gebruikersagenten) en pas deze toe op uw pagina om te zien hoe deze reageert.
Canvas debuggen: stap door de opdrachten die HTML5 canvas ontvangt en zie hoe het canvas verandert bij elke instructie.
Er is veel in de DevTools ingebouwd om workflows voor ontwikkeling en debugging te verbeteren. Van debuggen van bronkaarten tot debuggen op afstand, hopelijk is er ten minste één ding in dit bericht dat u kunt wegnemen en kunt gebruiken. Als u enkele van deze functies wilt proberen, kunt u Chrome Canary een kans geven.
Met Screencasting krijgt u de mogelijkheid om te communiceren met een webpagina die is geopend in Chrome voor Android, vanaf uw desktopcomputer. Klikken, vegen, scrollen en meer wordt allemaal mogelijk gemaakt met behulp van een muis.
Open de Inspecteer apparaten pagina door op de te klikken hotdog pictogram in Chrome (rechtsboven) en gaan naar Hulpmiddelen> Apparaten inspecteren (U kunt ook invoeren chrome: // inspecteren / # apparaten in de adresbalk). Zorg ervoor dat je je apparaat in de lijst kunt zien. Op uw apparaat moet USB-foutopsporing zijn ingeschakeld als dit nog niet het geval is. Zodra uw apparaat is weergegeven, voert u een URL in die u op afstand wilt debuggen in de "Open het tabblad met url"invoervak en selecteer Open. Op dit moment zou u deze pagina moeten zien laden in Chrome voor Android. Raken 'Inspecteren'terug op de chrome: // inspecteren pagina en let op een kleine Scherm pictogram in de rechterbovenhoek van de DevTools. Als u hierop klikt, wordt Screencasting ingeschakeld.
De screencast die u binnen DevTools ziet, wordt in realtime bijgewerkt. Als u de pagina verschuift (via DevTools of op het apparaat), zal zijn tegenhanger ook scrollen. Let op in de onderstaande schermafbeelding, dat de Inspecteer Element functie gedraagt zich precies zoals je zou verwachten, doordat functies zoals typen en gebaren je in staat stellen om belangrijke delen van de workflow voor het testen van je apparaat naar de DevTools te verplaatsen.
Bekijk de officiële documentatie over Screencasting het scherm van uw apparaat.
Het algemene idee is dat u de bronnen paneel geeft de inhoud van uw projectbronbestanden weer zoals deze in uw bestandssysteem aanwezig zijn. Elk bestand kan worden bewerkt met de mogelijkheid om bestanden op te slaan naar schijf. Bewerk niet alleen de bestanden zoals een teksteditor, maar synchroniseer ze ook, ongeacht of u stijlen in de Elements paneel, extern in een andere editor of in de DevTools.
Werkruimten voorbereiden:
U voegt eerst een map toe aan uw werkruimte. Klik met de rechtermuisknop in de bronnen venster en selecteer 'Map toevoegen aan werkruimte'.
Verleen bestandssysteemrechten zoals gevraagd door Chrome.
Nadat u machtigingen voor het bestandssysteem hebt verleend, kunt u doorgaan en uw code bewerken in DevTools en deze opslaan zoals u zou doen in een codebewerker. Het echte voordeel komt van bewerkingscode die wordt gedeeld door de webpagina die u bekijkt. Als u een pagina serveert op http: // localhost: 3000 / ga door en voeg het bijbehorende project toe als een werkruimtemap in DevTools. Op dit moment wilt u DevTools leren over de toewijzing tussen de netwerkresource en de bijbehorende bestandssysteemresource.
Klik met de rechtermuisknop op een bestand binnen een map met netwerkbronnen in de bronnen paneel (zorg ervoor dat het een duidelijke toewijzing heeft aan een bestand op uw bestandssysteem).
kiezen Map naar bestandssysteembron ...
Nadat DevTools de opdracht heeft gekregen om de toewijzing uit te voeren, worden de bronbestanden van uw project weergegeven in plaats van de netwerkresourcebestanden.
Een paar kleine maar nuttige functies die het vermelden waard zijn, zijn:
De meeste bestanden worden geleverd met syntaxisaccentuering.
Gebruik Cmd + P om snel een bestand te openen als u ongewenste resultaten ziet (zoals bestanden binnen node_modules), klik met de rechtermuisknop in de map die het bevat en selecteer 'Map uitsluiten'.
Maak nieuwe bestanden van de Contextmenu > 'Nieuw bestand'.
Als u een bestand ergens anders bijwerkt, zal DevTools proberen het automatisch opnieuw te laden wanneer het de focus herwint.
Zie de DevTools-documentatie voor werkruimtes bij Google voor meer informatie.
Voor LESS, Sass, CoffeeScript en enkele andere hulpmiddelen kan het compilatieproces bronmapbestanden produceren. DevTools kan dergelijke bestanden interpreteren en live-bewerkingsmogelijkheden aan u leveren. Dit betekent dat je je bronbestanden kunt bewerken (.minder, .scss, .coffee) binnen de bronnen paneel. Als u een kijktaak hebt op uw voorbewerkte bestanden die een nieuw CSS / JS-bestand opnieuw compileert na wijziging, zal DevTools automatisch opnieuw laden van dat bestand en de webpagina dienovereenkomstig bijwerken.
Om meer over deze workflows te begrijpen, hebben we in het verleden gesproken over DevTools plus debugging van bronkaarten:
Ontwikkelen met Sass en Chrome DevTools (juni 2013)
Werken met LESS en de Chrome DevTools (jan 2014)
De Flame-grafiek geeft u een visueel overzicht van de JavaScript-activiteit gedurende een bepaalde tijd.
Als u een vlamgrafiekvisualisatie wilt maken en bekijken, moet u een JavaScript-CPU-profiel verzamelen van de profielen tab en koos de "tabel"zicht op de Profiel resultaat. Spikes in de grafiek kunnen worden ingezoomd op by slepen en selecteren een deel van belang. U kunt een bereik selecteren dat ertoe leidt dat het vlammenbord overeenkomstig wordt bijgewerkt en vervolgens de vlammen horizontaal of verticaal sleept om te pannen.
De hoogte van alle staven in een bepaalde kolom is niet significant, deze vertegenwoordigt eenvoudigweg elke functieaanroep die plaatsvond. Wat echter wel belangrijk is, is de breedte van een balk, omdat de lengte gerelateerd is aan de tijd die de functie duurde om uit te voeren.
Elke balk kan worden overgeheveld om de details van de timing weer te geven. Een startpunt om prestatiebottlenecks te ontdekken zou zijn:
Zoek een brede balk in het vlammenbord.
zweven eroverheen om het gedeelte met details te openen.
Zorg ervoor dat de 'Totale tijd'is op een bevredigend bedrag.
Een balk met een hoge uitvoeringstijd kan uw webpagina vertragen, Klik erop om naar het corresponderende punt in de code te worden gebracht.
Er is een speciaal stuk documentatie voor de vlammenkaart bij Google.
Met mobiele emulatie kan Chrome op desktop pc bepaalde kenmerken van mobiele apparaten imiteren. De kenmerken kunnen individueel worden beheerd of via een set vaste presets op basis van populaire apparaten zoals de Nexus 5, Galaxy S4, iPhone, iPad, Kindle en nog veel meer.
Meteen kunt u een apparaatvoorinstelling toepassen om te zien hoe de geïnspecteerde webpagina zich onder mobiele omstandigheden gedraagt.
Open de lade DevTools door op te slaan Ontsnappen.
Navigeer naar het emulatiepaneel.
Selecteer 'Google Nexus 5'
Druk op 'wedijveren'
U wilt ook de pagina vernieuwen om ervoor te zorgen dat de apparaatinstellingen correct zijn toegepast. Merk op hoe het zichtbare webpaginagebied nu een stuk kleiner is, dit komt overeen met de beeldverhouding van de apparaatvoorinstelling. Wat is er nog meer veranderd?
User agent: Typen navigator.userAgent in de console wordt de geëmuleerde apparaat user agent, bijvoorbeeld: "Mozilla / 5.0 (Linux; Android 4.2.1; en-us; Nexus 4 Build / JOP40D) AppleWebKit / 535.19 (KHTML, like Gecko) Chrome / 18.0.1025.166 Mobile Safari / 535.19"
Schermresolutie: De gerapporteerde dimensies screen.width en screen.height rapporteer nu de dimensies die u van het apparaat zelf zou ontvangen. Let op, voor de Nexus 5-voorinstelling worden de breedte en hoogte gerapporteerd als 384 en 640 respectievelijk. Zie Een pixel is geen pixel is geen pixel.
* devicePixelRatio: *window.devicePixelRatio rapporten 2 waarmee een media-query kan worden ingeschakeld min-apparaat-pixel-ratio: 2.
Tik op Evenementen: "Klikken" die u uitvoert, vertalen zich nu in de gebruikelijke touchstart, touchend en andere evenementen. Tip: Luister snel naar aanraakgebeurtenissen met monitorEvents (venster, "touchstart"); in de Troosten paneel.
Ongeacht een vooraf ingestelde apparaat, zijn er enkele andere emulatie-opties beschikbaar die kunnen worden ingeschakeld. Het paneel Sensors in het emulatiepaneel bevat een realtime accelerometer die u kunt slepen.
U kunt de gerapporteerde breedte- en lengtegraad aanpassen die zich ook in het deelvenster Sensors bevindt, dit is handig wanneer de geïnspecteerde webpagina gebruikmaakt van navigator.geolocation methoden.
Raadpleeg de officiële documentatie voor mobiele emulatie voor meer informatie over emulatieopties die beschikbaar zijn in DevTools.
Canvas Inspection in de DevTools is momenteel een experimentele functie. Schakel het in op DevTools> Instellingen> Experimenten. Canvas Inspection is in wezen een profieltype, dus je zult het vinden onder de profielen paneel waar het kan worden ingeschakeld.
De canvas-profiler verzamelt instructies die naar het canvas zelf zijn verzonden en biedt u de mogelijkheid elke stap te doorlopen terwijl u de huidige canvaseigenschappen en een visuele weergave van het canvas op een bepaald tijdstip bekijkt.
Nadat een profiel is vastgelegd, kunt u de items op het hoogste niveau (tekenreeksen) bekijken en individuele tekenoproepen ontdekken (ctx.drawImagebijvoorbeeld). Rechts van elke draw call, let op de file: lineNumber referentie, als u hierop klikt, gaat u naar de bronnen Paneel met de relevante coderegel geselecteerd. U kunt de werkbalk gebruiken:
... om eenvoudig door individuele tekenoproepen of opeenvolgende tekenreeksen te navigeren. Met de vervolgkeuzelijst kunt u opgeven welke canvascontext de eigenschappen van, als er meer dan één is, moet worden gecontroleerd.
Een meer gedetailleerde handleiding, zie: Canvasinspectie met Chrome DevTools op HTML5Rocks.
DevTools voor mobiel - Chrome Dev Summit 2013 door Paul Irish.
Er is ook The Breakpoint Ep. 6: Accelerating Load Time, Run Time en JS tooling met een grote nadruk op prestaties, het is een jaar oud maar nog steeds een horloge waard.
Voor mensen met traag scrollende pagina's op mobiel, checkout: The Breakpoint Ep. 7: Een mobiele site profileren met Chrome DevTools met Paul Irish en John McCutchan
Een mooie diepgaande breakpoint-aflevering over geheugenprofilering: Ep. 8: Geheugenprofileren met Chrome DevTools, de aflevering bevat Loreena Lee en John McCutchan.
Addy Osmani creëerde een DevTools-productiviteitsvideo: de productiviteit van 2013 verbeteren met de Chrome DevTools.
Paul Irish pronkt met een aantal eerder experimentele functies in de DevTools.
Sommige DigTools-digests zijn gepubliceerd op HTML5 Rocks, er zijn de edities van november en december waarvan de laatste de Chrome 33-editie is.
Remy Sharp deelt zijn inzichten in renderingprestaties met het tijdlijnpaneel.
Paul Lewis en Addy Osmani hebben onlangs een uiterst gedetailleerd artikel geschreven voor Smashing Magazine getiteld: Gone In 60 Frames Per Second: een Pinterest Paint Performance Case Study, wat leuk is, omdat het praktische voorbeelden geeft van problematische prestaties.
Adventures in Jank Busting: Parallax, prestaties en de nieuwe Flickr-startpagina die op het Flickr Engineering-blog werd geplaatst, is weer een verbazingwekkend gedetailleerd bericht over hoe de slechte prestaties drastisch zijn verbeterd door actie te ondernemen op paneelafmetingen uit het tijdschema.
Brian Grinstead deelt zijn DevTools-fragmenten op GitHub samen met een blogpost.
Geheimen van de Browser-ontwikkelaarstools door Andi Smith heeft een breed scala aan DevTools-tips die er hopelijk toe moeten bijdragen dat ontwikkelaars efficiënter worden tijdens hun ontwikkelingsworkflow.
DevThemez bevat een aantal aangepaste thema's die kunnen worden gebruikt met de DevTools.
Ik probeer om nuttige links opnieuw te tweeten / te delen op mijn Twitter- en Google+ pagina's in mijn profiel hier bij Tuts+.
Dat is alles voor nu, bedankt voor het lezen.
Vind je het leuk wat je hebt geleerd? Meer informatie over Chrome DevTools!
Accentsconagua