Een aantal bijgewerkte functies zijn onlangs in de Chrome DevTools terechtgekomen, sommige klein, andere groot. We beginnen met de updates van het Element-paneel en gaan verder met praten over Console, Tijdlijn en meer.
Uitgeschakelde stijlregels kopiëren zoals becommentarieerd
Het kopiëren van volledige CSS-regels in het deelvenster Stijlen omvat nu de stijlen die u hebt uitgeschakeld; ze zullen op uw klembord staan zoals aangegeven. [ crbug.com/316532 ]
Kopieer als CSS-pad
'Kopiëren als CSS-pad' is nu beschikbaar als menu-item voor DOM-knooppunten in het paneel Elementen (vergelijkbaar met het menu-item XPath kopiëren).
Het genereren van CSS-selectors hoeft niet beperkt te blijven tot uw stylesheets/JavaScript, het kunnen ook alternatieven zijn voor locatorstrategieën in WebDriver- tests. [ crbug.com/277286 ]
Bekijk Shadow DOM-elementstijlen
De stijlen van onderliggende elementen van een schaduwwortel kunnen nu worden geïnspecteerd. [ crbug.com/279390 ]
Console's copy() werkt voor objecten
De methode copy() van de Command Line API werkt nu voor objecten. Ga je gang en probeer copy({foo:'bar'}) naar het consolepaneel en merk op hoe een stringified en opgemaakte versie van het object nu op je klembord staat. [ crbug.com/289348 ]
Regex-filter voor console
Filter consoleberichten met reguliere expressies in het consolepaneel. crbug.com/318308 ]
Verwijder eenvoudig gebeurtenislisteners
Probeer getEventListeners(document).mousewheel[0]; in het consolepaneel om de eerste muiswielgebeurtenislistener in het document op te halen. Ga hiermee verder en probeer $_.remove() ; om die gebeurtenislistener te verwijderen ( $_ = waarde van de meest recent geëvalueerde expressie). crbug.com/309524 ]
Verwijdering van CSS-waarschuwingen
De waarschuwingen in de stijl van " Ongeldige CSS-eigenschapswaarde " die u mogelijk hebt gezien, zijn nu verwijderd. Er worden voortdurend inspanningen geleverd om de implementatie robuuster te maken tegen echte CSS, inclusief browserhacks. crbug.com/309982 ]
Tijdlijnbewerkingen samengevat in een cirkeldiagram
Het deelvenster Tijdlijn bevat nu een cirkeldiagram in het detailvenster, waarin de bron van uw renderingkosten visueel wordt weergegeven. Hierdoor kunt u in één oogopslag uw knelpunten identificeren.
U zult merken dat veel van de informatie die vroeger in popovers werd weergegeven, nu naar een eigen venster is gepromoveerd. Om te bekijken, start u een tijdlijnopname en selecteert u een frame. Let op het nieuwe detailvenster dat een cirkeldiagram bevat. In de Frames-weergave krijg je interessante statistieken zoals de gemiddelde FPS ( 1000ms/frame duration ) voor de geselecteerde frame(s). [ crbug.com/247786 ]
Gebeurtenisdetails voor het wijzigen van het afbeeldingsformaat
Gebeurtenissen voor het wijzigen van het formaat en decoderen van afbeeldingen in het tijdlijnpaneel bevatten nu een link naar het DOM-knooppunt in het paneel Elementen.
De link Afbeeldings-URL brengt u naar de overeenkomstige bron in het Bronnenpaneel. crbug.com/244159 ]
GPU-frames
Frames die op de GPU voorkomen, worden nu bovenaan weergegeven, boven frames op de hoofdthread. crbug.com/305863 ]
Pauze voor luisteraars van popstaten
'popstate' is nu beschikbaar als breekpunt voor gebeurtenislisteners in de zijbalk van het paneel Bronnen. [ crbug.com/88112 ]
Weergave-instellingen beschikbaar in de lade
Als u de lade opent, worden nu een aantal vensters weergegeven, waarvan er één het Rendering-paneel is. Gebruik dit om verfrechthoeken, FPS-meter enz. weer te geven. Dit is standaard ingeschakeld via Instellingen > "Toon 'Rendering'-weergave in consolelade"
Kopieer afbeelding als gegevens-URL
De inhoud van afbeeldingselementen in het paneel Bronnen kan nu worden gekopieerd als een gegevens-URI ( data:image/png;base64,iVBO... ).
Om dit uit te proberen, zoekt u de afbeeldingsbron in Frames > [Bron] > Afbeeldingen en klikt u met de rechtermuisknop op het afbeeldingsvoorbeeld om toegang te krijgen tot het contextmenu. Selecteer vervolgens 'Afbeelding kopiëren als gegevens-URL'. crbug.com/321132 ]
Gegevens-URI-filtering
Als u nooit had gedacht dat ze erbij horen: gegevens-URI's kunnen nu uit het tabblad Netwerk worden gefilterd. Selecteer het filterpictogram
Bugs in netwerktiming opgelost
Als u zag dat het downloaden van uw afbeelding blijkbaar 300.000 jaar duurde, dan bieden wij u onze excuses aan. ;) Deze onjuiste timings voor netwerkbronnen zijn nu opgelost. crbug.com/309570 ]
Het netwerkopnamegedrag heeft meer controle
Het gedrag van het opnamenetwerk is iets anders. Ten eerste werkt de opnameknop precies zoals je zou verwachten van Timeline of een CPU-profiel. En omdat u het zou verwachten, wordt de netwerkopname automatisch gestart als u de pagina opnieuw laadt terwijl DevTools geopend is. Het wordt dan uitgeschakeld, dus als u netwerkactiviteit wilt vastleggen nadat de pagina is geladen, schakelt u het in. Dit maakt het eenvoudiger om uw waterval te visualiseren zonder dat late netwerkverzoeken de resultaten vertekenen. crbug.com/325878 ]
DevTools-thema's zijn nu beschikbaar via extensies
Gebruikersstylesheets zijn nu beschikbaar via DevTools Experiments (selectievakje: "Aangepaste UI-thema's toestaan") waarmee een Chrome-extensie aangepaste styling op DevTools kan toepassen. Zie Voorbeeld van een DevTools-thema-extensie voor een voorbeeld. crbug.com/318566 ]
Dat was het voor deze editie van de DevTools-samenvatting. Als je dat nog niet hebt gedaan, bekijk dan de novembereditie .