DevTools Digest - Geaggregeerde tijdlijndetails, kleurenpaletten en meer

Het was een maand vol functies in Chrome Canary. Lees verder om te ontdekken welke scripts van derden prestatieproblemen op uw site veroorzaken met de geaggregeerde details in de tijdlijn , hoe u consistente kleuren kiest met het nieuwe kleurenpalet , hoe u WiFi van conferenties simuleert met aanpasbare netwerkprofielen en hoe u meer uit de DevTools kunt halen. UI met het nieuwe hoofdmenu en betere tooltips .


Geef prestatieproblemen beter de schuld: geaggregeerde details in de tijdlijn

Geaggregeerde details in de tijdlijn

Op de websites van vandaag maken we steeds meer gebruik van beacons, analyses, sociale media, het laden van lettertypen en advertentiediensten van derden, soms een paar te veel . Om ervoor te zorgen dat dit niet gebeurt en om u inzicht te geven in het probleem, introduceren we geaggregeerde details op de tijdlijn.

Op het tabblad Geaggregeerde details kunt u zich concentreren op alleen dure functies of op de gehele oproepboom, en vervolgens de geselecteerde gegevens opsplitsen per domein, subdomein of afzonderlijke URL's. In de bovenstaande tijdlijn van het laden van een pagina kunt u nu bijvoorbeeld eenvoudig vertragingen toeschrijven aan scripts van derden die afkomstig zijn van domeinen zoals facebook.net of twitter.com.

Nieuw, speciaal hoofdmenu

Nieuw hoofdmenu.

Om de hoofdwerkbalk overzichtelijker te maken, hebben we de lade-, instellingen- en dockingpictogrammen naar een nieuw, speciaal hoofdmenu verplaatst.

Vooral het aanmeren werd veel eenvoudiger. In plaats van lang op het vorige pictogram te moeten drukken, heeft elke dockingpositie een eigen pictogram.

Naast docking hebben we snel zoeken naar bestanden, snelkoppelingen en hulp toegevoegd (die naar onze nieuwe startpagina leiden).

Ontdek DevTools via verbeterde tooltips

Nieuwe tooltips.

We hebben veel knoppen in DevTools, en we weten dat ze niet allemaal voor zichzelf spreken. We hebben het ontdekken van acties en hun snelkoppelingen nu eenvoudiger gemaakt door de systeemeigen tooltips te vervangen door aangepaste, platformconsistente tooltips.

De nieuwe tooltips verschijnen veel sneller en bevatten sneltoetsen (als die er zijn).

Maak aangepaste netwerkbeperkingsprofielen

Aangepaste netwerkprofielen.

Als de standaardopties voor de Network Throttler te beperkend zijn voor uw gebruikssituaties, en u een "Conference WiFi"-optie nodig heeft of, uit nostalgie, ouderwets wilt gaan en een "110 Baud"-lijn wilt emuleren, dan heb ik goede nieuws voor jou. We hebben een nieuw paneel Instellingen toegevoegd waarmee u al deze dingen kunt doen.

Automatische, materiaal- en aangepaste kleurenpaletten

Of u nu de magische kleuren wilt nabootsen of met een bestaand kleurenpalet wilt werken, de verbeterde Colorpicker helpt u een consistent kleurenpalet voor uw site te kiezen.

Door op het kleine schakelpictogram naast het palet te klikken, kunt u uit het volgende kiezen:

  1. Paginakleuren — Dit palet wordt automatisch gegenereerd op basis van de kleuren die we in uw CSS vinden, waardoor het een geweldige optie is als u een bestaande site uitbreidt.
  2. Material Design — Het Material Design-palet biedt kant-en-klare prachtige kleuren en is een ideale keuze bij het starten van een nieuw project. Op dit moment vind je alle primaire kleuren, maar binnenkort brengen we alle tinten erbij.
  3. Op maat — Dat is je eigen speeltuin. Voeg nieuwe kleuren toe door er een te kiezen in de kiezer en klik vervolgens op het plusteken naast het palet. Herschik ze door ze te slepen en klik met de rechtermuisknop om meer opties weer te geven, zoals verwijderen.

Vertel ons wat u ervan vindt en hoe we het kleurenverhaal verder kunnen uitbreiden.

Het beste van de rest

  • Verzoeken die zijn gedaan met behulp van de fetch() API worden nu weergegeven in het netwerkpaneel
  • Automatische paneelindeling zorgt ervoor dat wanneer u het formaat van uw DevTools wijzigt
    panelen passen zich aan de nieuwe ruimtebeperkingen aan.
  • Inspect Element & Device Mode heeft een reeks nieuwe pictogrammen.
  • Attributen in het DOM-paneel hebben nu een andere kleur, zelfs als het knooppunt is gemarkeerd. (Vroeger waren ze allemaal wit.)
  • Verborgen elementen (geactiveerd door op "h" te drukken op een geselecteerd DOM-knooppunt) tonen nu een grijze cirkelindicator aan de linkerkant, en DOM-breekpunten doen hetzelfde met een blauwe cirkel. (Dit is analoog aan de oranje indicatoren die we al hebben voor het forceren van een elementstatus zoals: hover).

Laat ons zoals altijd weten wat je ervan vindt via Twitter of de reacties hieronder, en stuur bugs naar crbug.com/new .

Tot volgende maand!
Paul Bakaus en het DevTools-team