Hallo allemaal, in de laatste editie van de DevTools Digest hebben we de krachtige asynchrone call-stacks en een paar andere kunnen bekijken. In deze editie zien we een verbeterde netwerkpaneelfiltering (met automatisch aanvullen), bewerkingsmogelijkheden met Shadow DOM-inhoud, CodeMirror 4-updates en meer.
Netwerkpaneelfiltering
U kunt nu bronnen filteren op bepaalde velden, zoals Domein. Eén filterformaat is dit: Domain:website.com . Naast filteren krijgt u ook suggesties voor automatisch aanvullen voor geldige filterwaarden, die in realtime worden bijgewerkt terwijl u uw zoekopdracht typt. Dit kan handig zijn als u alle bronnen wilt vinden die door een bepaald domein worden aangeboden. [ crbubg.com/258421 ]
Bewerk Shadow DOM-inhoud
DevTools heeft altijd gewone HTML kunnen bewerken in het Elementenpaneel; deze mogelijkheden strekken zich nu uit tot elementen die deel uitmaken van een Shadow DOM. [ crbug.com/348991 ]
Upgrade naar CodeMirror 4.0
CodeMirror, de op JavaScript gebaseerde teksteditor die wordt gebruikt als onderdeel van het Bronnenpaneel, is geüpgraded naar versie 4. Als resultaat hiervan is een heleboel nieuwe functionaliteit toegevoegd. crbug.com/356878 ]
Snel zoeken naar een CSS-property
U kunt nu zoeken naar eigenschapsnamen, waarden of regelkiezers vanuit het nieuwe zoekvak in het deelvenster Stijlen. De resultaten worden in realtime gemarkeerd terwijl u uw zoekopdracht typt. [ crbug.com/278852 ]
Tijdstempels naast consoleberichten
Wanneer berichten snel achter elkaar worden geregistreerd, kan het handig zijn om het exacte tijdstip te zien waarop een bericht is geregistreerd. U kunt dit inschakelen via DevTools Experiments. [ crbug.com/131714 ]
Uitsplitsing van geheugenstatistieken voor heap-snapshots
Wanneer u een opgenomen heap-snapshot bekijkt, let dan op het statische cirkeldiagram dat een visueel, kleurgecodeerd overzicht geeft van welk aspect van JavaScript het meeste geheugen in beslag neemt. Momenteel een experimentele functie. Schakel 'Heap snapshot statistieken' in om deze uit te proberen. [ crbug.com/346335 ]
Bekijk de originele bron van een console.log, niet de verpakte versie
Je hebt waarschijnlijk een console.log wrapper-functie, maar helaas komen in de console al je berichten van zoiets als util.js:46. Nu kunt u DevTools uw oorspronkelijke locaties laten omzetten. Voer het bestand dat consolelogberichten verpakt in het invoervak 'Sla het doorlopen van bronnen met bepaalde namen over' in om DevTools het te laten blackboxen en vervolgens de ware bron van een loginstructie weer te geven. [ crbug.com/231007 ]
Nog een paar kleine, maar krachtige toevoegingen
Vernieuw het deelvenster Gebeurtenislisteners in het Elementenpaneel, nadat u JavaScript-gebeurtenislisteners dynamisch hebt toegevoegd of verwijderd. [ crbug.com/341044 ]
U kunt
Ctrl+gebruiken om de focus op de console-invoer te krijgen . Mogelijk vindt u dit handig voor een workflow met alleen een toetsenbord in DevTools. [ crbug.com/144943 ]suggesties voor automatisch aanvullen in randstijl (stippellijn, streepjes, dubbel, groef) zijn bijgewerkt om aan de specificaties te voldoen. [ crbug.com/349998 ]
Standaardinstellingen herstellen en knop opnieuw laden ** is toegevoegd aan het paneel Instellingen, dat precies doet wat er op het blikje staat. [ crbug.com/135451 ]
Momenteel een experimentele functie. U kunt Dock naar links uitproberen om te ontdekken of deze geschikt is voor uw workflow. De andere lay-outmodi zijn gekoppeld aan het hoofdvenster (rechts of onderaan) en ontkoppelen in een apart venster. [ crbug.com/134282 ]
" wheel " wordt nu aangeboden als breekpunt voor de gebeurtenislistener , dit is een aanvulling op de gebruikelijke klik-, muisbeweging-, mousedown-, enz.-gebeurtenissen. [ crbug.com/347562 ]
Dat was alles voor nu, bedankt voor het lezen!