Chrome DevTools werkt snel en we wilden uw aandacht vestigen op enkele nieuwe functionaliteiten en verbeteringen die we in een aantal componenten hebben geïntroduceerd. We gaan het namelijk hebben over enkele UI-wijzigingen, JS-profilering met hoge resolutie en nieuwe Workspaces-functies.
- Profilering met hoge resolutie gaat nu naar een nauwkeurigheid van 0,1 milliseconde
- Werkbalken kwamen bovenaan Devtools te staan en Overrides werden verplaatst naar de consolela
- Workspaces heeft verschillende functies toegevoegd ter ondersteuning van het toevoegen/verwijderen/zoeken van bestanden
Profilering met hoge resolutie
CPU-profilering is een behoorlijk nuttige functie om te zien hoe efficiënt uw Javascript is. Naast de traditionele profielweergaven hebben we deze zomer een Flame Chart geïntroduceerd, die de Javascript-verwerking van een pagina in de loop van de tijd visueel weergeeft. Het kan worden gebruikt om eenvoudig te bekijken hoe diep uw call-stack gaat en hoe lang het duurt om de afzonderlijke functies te verwerken.
Tot voor kort toonden zowel de traditionele Heavy- (bottom-up) als de Tree- (top-down) weergave, evenals de Flame Chart, slechts processen met een nauwkeurigheid van 1 milliseconde. Voor de meeste toepassingen is dit prima. Als u echter aan iets werkt waarbij snelheid er echt toe doet in de gebruikersinterface, zoals een game, kan een resolutie van 1 milliseconde te groot zijn om zinvolle resultaten te krijgen voor de oorzaak van de trage site of de traagheid van uw gebruikersinterface. Om profilering met hoge resolutie in te schakelen (momenteel alleen Canary):
- Open DevTools-instellingen.
- Schakel op het tabblad Algemeen onder Profiler CPU-profilering met hoge resolutie in.
Hier is een voorbeeld van een vlamgrafiek die te zien is bij normale profilering en met hoge resolutie, waarbij we een profiel laden op de startpagina van HTML5Rocks.com:
Bij een normale profileringsresolutie wordt de procestijd altijd naar boven afgerond op de volgende milliseconde, dus een proces dat slechts 0,1 milliseconden of minder duurt, wordt nog steeds gerapporteerd als een proces van 1,0 milliseconden, en andere processen worden mogelijk helemaal niet weergegeven in de call-stack.
Profilering met hoge resolutie heeft een grote overhead in de Javascript VM en is daarom standaard uitgeschakeld. Hoewel het er zeker cooler uitziet dan de normale profileringsresolutie, raden we aan deze alleen te gebruiken als je de precisie echt nodig hebt.
Verbeteringen in de gebruikersinterface van Devtools
Hoewel er altijd nieuwe dingen worden uitgerold in Canary, willen we uw aandacht vestigen op een paar grote wijzigingen in de gebruikersinterface: knoppen die in het algemeen naar de top van de gebruikersinterface stijgen, de tijdlijnnavigatie en informatiepanelen, en de verplaatsing van overschrijvingen naar de Consolelade.
Laten we eerst eens kijken waar we vandaan komen. Omdat we het toch over Tijdlijn hebben, zal ik proberen de eerste twee vogels te doden met één paar screenshots. Zo ziet de tijdlijn er momenteel uit in Chrome (stabiel):
En zo ziet de tijdlijn er nu uit.
Let op de volgende dingen:
- De werkbalken en knoppen bevinden zich nu allemaal bovenaan het scherm, zowel voor de specifieke tijdlijn aan de linkerkant als voor de algemene DevTools aan de rechterkant.
- De tijdlijnrecords hebben nu hun neststructuur in het paneel aan de linkerkant, en u kunt zelfs het toetsenbord gebruiken om er doorheen te bladeren. Naast het gebruik van de toetsen omhoog en omlaag om omhoog en omlaag te scrollen, kunt u ook de toetsen links en rechts gebruiken om geneste records te openen en te sluiten.
- Tijddetails worden nu weergegeven in een paneel aan de rechterkant voor welk item u ook hebt geselecteerd. (U kunt ook met de muis over andere vermeldingen bewegen om hun informatie op te halen.)
Laten we nu eens kijken naar de consolelade. Om de consolelade te openen, drukt u op Escape vanuit DevTools of drukt u op de knop van de consolelade 
en de lade rolt vanaf de onderkant omhoog.
Standaard heb je daar de tabbladen Console en Zoeken . Om toegang te krijgen tot de functionaliteit die voorheen bekend stond als Overrides, opent u de DevTools-instellingen en vinkt u het vakje aan naast "Toon 'Emulatie'-weergave in consolelade". Sluit het instellingenvak en je hebt een tabblad Emulatie in de consolelade, zoals de schermafbeelding hier:
En u kunt al uw emulatie daar uitvoeren.
De reden voor deze wijziging is dat u voorheen naar Instellingen moest gaan om uw emulatieoverschrijvingen te wijzigen, en vervolgens terug moest gaan om uw pagina te bekijken. Nu kunt u uw emulatieoverschrijvingen wijzigen terwijl u nog steeds stijlen manipuleert.
Verbeterde werkruimten
Vooral Workspaces is een functie die uw schrijfworkflow behoorlijk kan vereenvoudigen, en toch krijgt het lang niet zoveel liefde als het verdient. Met Workspaces kunt u, in plaats van te experimenteren en wijzigingen aan te brengen in DevTools en uw wijzigingen terug naar uw bronbestanden te moeten kopiëren en plakken, wijzigingen aanbrengen in DevTools, deze weergegeven zien in de browser en ze opslaan in een permanente lokale versie van uw bestanden -- allemaal zonder Chrome te verlaten.
Als je het Chrome Developer Tools Revolutions 2013- artikel nog niet hebt gelezen, bekijk dat dan eens en kom dan hier terug om te zien hoe we deze functies de afgelopen maanden hebben verbeterd.
Bestanden toevoegen is eenvoudiger
Ten tijde van het Revolutions 2013-artikel vereiste het maken van een nieuwe werkruimte het toevoegen van de map aan uw werkruimten en het vervolgens toewijzen van de map aan een netwerkbron. We hebben dit proces vereenvoudigd tot één stap: klik met de rechtermuisknop in het linkerpaneel van Bronnen en selecteer Map toevoegen aan werkruimte . Hierdoor wordt een bestandsdialoogvenster geopend waarin u een nieuwe map kunt kiezen om toe te voegen aan uw werkruimten. (De momenteel gemarkeerde map wordt niet toegevoegd aan uw werkruimten.)
Bestanden maken en verwijderen
U kunt nu nieuwe bestanden toevoegen aan de lokale map die u gebruikt voor Workspaces binnen Workspaces zelf. Klik eenvoudig met de rechtermuisknop op een map in het linkerbronpaneel en selecteer Nieuw bestand.
U kunt ook bestanden verwijderen vanuit Workspaces. Klik met de rechtermuisknop op een bestand in het linkerbronpaneel en selecteer Bestand verwijderen.
U kunt een bestand ook dupliceren door Bestand dupliceren te selecteren.
Vernieuwen
Nu u rechtstreeks in werkruimten nieuwe bestanden kunt maken (of bestanden kunt verwijderen), wordt de map Bronnen ook automatisch vernieuwd en worden deze nieuwe bestanden weergegeven. Als dit niet het geval is, kunt u altijd met de rechtermuisknop op een map klikken en Vernieuwen selecteren in het pop-upmenu om een vernieuwing te forceren.
Dit is ook handig als u uw bestanden wijzigt die in een andere editor zijn geopend en wilt dat de wijzigingen in DevTools verschijnen.
Zoeken in bestanden
We hebben de interface voor het zoeken in bestanden een beetje verfijnd, en nu kunt u ook zoeken naar tekenreeksen in alle bestanden in uw werkruimten, evenals in alle bestanden die in DevTools zijn geladen. U kunt zoeken naar een string of naar een reguliere expressie, en we matchen elke gebeurtenis in elk bestand of elke pagina. Meerdere bestanden zoeken in werkruimten (momenteel in Canary):
- Open de consolelade door op de Escape-toets te drukken en klik op het tabblad Zoeken naast Console om het zoekvenster te openen
OF
Druk op Ctrl + Shift + F ( Cmd + Opt + F op Mac) om het zoekvenster te openen.
- Typ uw zoekopdracht in het vak Zoekbronnen en druk op Enter. Als uw zoekopdracht een reguliere expressie is of niet hoofdlettergevoelig moet zijn, klikt u op het betreffende vakje.
Negeer lijsten
Het doorzoeken van de tekst van bestanden of het filteren op bestandsnamen kan erg vervelend worden als je een heleboel .git-bestanden of README.md-bestanden hebt die je resultaten onoverzichtelijk maken.
Daarom hebben we een negeerlijstfunctie toegevoegd aan Workspaces, zodat u bepaalde bestandstypen of mappen kunt uitsluiten wanneer u uw werkruimte bekijkt en doorzoekt.
Zo kunt u de huidige gedeelde negeerlijst in Workspaces bekijken en wijzigen:
- Open DevTools- instellingen .
- Klik op Werkruimte .
- Onder Algemeen kunt u in het vak Patroon uitsluiten map de patronen bekijken en/of bewerken.
We verzenden met deze standaard globale uitsluitingspatronen:
Deze regex sluit metadata uit van Git, SVN, Mercurial, projectbestanden van Eclipse en IntelliJ, OS X DS_Store en Trash-bestanden, en een paar andere dingen die de moeite waard zijn om te negeren, zoals cache van Sass. Hun hele map, inclusief eventuele onderliggende mappen, wordt uitgesloten van de gebruikersinterface om niet in de gebruikersinterface te verschijnen en niet te verschijnen bij het zoeken door bestanden.
Werkruimtespecifieke negeerlijsten
Om specifieker te worden, kunt u er ook voor kiezen om bestanden en mappen binnen uw specifieke werkruimte uit te sluiten om zo de overzichtelijkheid van zoekopdrachten te verminderen. Uitgesloten mappen worden ook niet weergegeven in de bronnenmap.
Om een volledige map van uw werkruimte uit te sluiten, klikt u met de rechtermuisknop op de map in het linkerbronpaneel en selecteert u Map uitsluiten. Om de toewijzingen en uitgesloten mappen voor een bepaalde werkruimtemap te bekijken:
- Open de DevTools-instellingen.
- Klik op Werkruimte .
- Markeer de map waarin u geïnteresseerd bent.
- Klik op Bewerken en het venster "Bestandssysteem bewerken" verschijnt; Vanuit dit venster kunt u toewijzingen en/of uitgesloten mappen toevoegen of verwijderen.
