Wat is er nieuw in DevTools (Chrome 93)

Jecelyn Yeen

Bewerkbare CSS-containerquery's in het deelvenster Stijlen

U kunt nu CSS-containerquery's bekijken en bewerken in het deelvenster Stijlen.

Containerquery's bieden een veel dynamischere benadering van responsief ontwerp. De @container at-rule werkt op een vergelijkbare manier als een mediaquery met @media . In plaats van de viewport en de user agent te raadplegen voor informatie, raadpleegt @container echter de bovenliggende container die aan bepaalde criteria voldoet.

Klik in het paneel ' Elementen' op een DOM-element met de at-rule @container . DevTools geeft nu de @container informatie weer in het deelvenster 'Stijlen' . Klik erop om de grootte te bewerken. Het deelvenster 'Stijlen' geeft ook de bijbehorende containerinformatie weer. Beweeg de muis erover om het containerelement op de pagina te markeren en de containergrootte te controleren. Klik erop om het containerelement te selecteren.

De functie voor containerquery's is momenteel experimenteel. Schakel de vlag #enable-container-queries in onder chrome://flags om deze te testen.

Bewerkbare CSS-containerquery's in het deelvenster Stijlen

Chromium-probleem: 1146422

Voorbeeld van webbundel in het paneel Netwerk

Webbundel is een bestandsindeling voor het inkapselen van een of meer HTTP-bronnen in één bestand. U kunt nu een voorbeeld van de inhoud van de webbundel bekijken in het paneel Netwerk .

De webbundelfunctie is momenteel experimenteel. Schakel de vlag #enable-experimental-web-platform-features in onder chrome://flags om deze te testen.

voorbeeld van webbundel

Chromium-probleem: 1182537

Foutopsporing van de Attribution Reporting API

Fouten in de Attribution Reporting API worden nu gemeld op het tabblad Problemen .

Attributierapportage is een nieuwe API waarmee u kunt meten wanneer een gebruikersactie (zoals een advertentieklik of -weergave) leidt tot een conversie, zonder dat u hiervoor cross-site-identificatiegegevens hoeft te gebruiken.

Fouten in de Attribution Reporting API op het tabblad Problemen

Chromium-probleem: 1190735

Betere stringverwerking in de console

Met het nieuwe contextmenu in de console kunt u elke tekenreeks kopiëren als inhoud, JavaScript-literaal of JSON-literaal.

Nieuw contextmenu in de console

In Chrome 90 heeft DevTools de console bijgewerkt om stringuitvoer altijd te formatteren als geldige JSON-literals . We hebben feedback van de ontwikkelaars ontvangen dat deze wijziging verwarrend kan zijn. Sommigen vinden dat de hoeveelheid escape-tekens te groot is en de uitvoer onleesbaar maakt.

De console formatteert nu stringuitvoer als geldige JavaScript-literals en biedt u bovendien drie opties om strings te kopiëren. De optie 'Kopiëren als JavaScript-literal' escapet de juiste speciale tekens en plaatst de string tussen enkele aanhalingstekens, dubbele aanhalingstekens of backticks, afhankelijk van de stringinhoud. Met ' Tekenreeksinhoud kopiëren' kopieert u de onbewerkte stringinhoud (inclusief nieuwe regels en andere speciale tekens) letterlijk naar het klembord. Tot slot formatteert 'Kopiëren als JSON-literal' de string als een geldige JSON-literal en kopieert deze naar het klembord.

Chromium-probleem: 1208389

Verbeterde CORS-foutopsporing

CORS-gerelateerde TypeErrors in de console zijn nu gekoppeld aan het paneel Netwerk en het tabblad Problemen.

Klik op de twee nieuwe pictogrammen naast het CORS-gerelateerde foutbericht om de netwerkaanvraag te bekijken of om het foutbericht beter te begrijpen en mogelijke oplossingen te vinden op het tabblad Problemen.

Pictogrammen naast het CORS-gerelateerde foutbericht

Chromium-probleem: 1213393

Vuurtoren 8.1

Het Lighthouse- paneel draait nu op Lighthouse 8.1.

Vuurtoren

Als uw site bronkaarten beschikbaar stelt aan Lighthouse, zoekt u naar de knop View Treemap (Treemap weergeven). Hier ziet u een overzicht van uw verzonden JavaScript, dat u kunt filteren op grootte en dekking bij het laden.

Het rapport bevat ook een nieuw filter voor statistieken (zie het filter 'Relevante audits weergeven' in de schermafbeelding). Kies een statistiek om u te richten op de kansen en diagnoses die het meest relevant zijn voor het verbeteren van die statistiek.

In de categorie Prestaties zijn de scores op een aantal punten aangepast om deze af te stemmen op andere prestatietools en om de status van het web beter weer te geven.

Bekijk de release notes voor een volledig overzicht van de wijzigingen.

Chromium-probleem: 772558

Nieuwe notitie-URL weergeven in het Manifest-paneel

In het Manifest-venster wordt nu de URL van de nieuwe notitie weergegeven.

Momenteel kunnen Chrome-apps en Android-apps met een "nieuwe notitie"-functie in ChromeOS (CrOS) worden geselecteerd als notitie-app in de stylusinstellingen (wordt weergegeven als het CrOS-apparaat met een stylus is gebruikt). Wanneer de app is geselecteerd als notitie-app, kan deze worden gestart via de knop "Notitie maken" op het styluspalet. Het toevoegen van het veld new-note-url aan het applicatiemanifest maakt deel uit van het streven om vergelijkbare functionaliteit toe te voegen aan webapps.

Nieuwe notitie-URL in het Manifest-paneel

Chromium-probleem: 1185678

Vaste CSS-matchingselectoren

DevTools heeft de CSS-matchingselectors gerepareerd. In de laatste release werkten deze niet.

De door komma's gescheiden selectoren in het deelvenster Stijlen hebben een verschillende kleur, afhankelijk van of ze overeenkomen met het geselecteerde DOM-knooppunt:

  • Een niet-overeenkomend gedeelte wordt in lichtgrijs weergegeven.
  • Een passend selectorgedeelte wordt in zwart weergegeven.

CSS-matchingselectoren

Chromium-probleem: 1219153

JSON-reacties mooi afdrukken in het paneel Netwerk

U kunt nu JSON-antwoorden afdrukken in het paneel Netwerk .

Open een JSON-antwoord in het paneel Netwerk en klik op het pictogram {} om het mooi af te drukken.

JSON-reacties mooi afdrukken in het paneel Netwerk

Chromium-fout: 998674

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om nieuwe functies, updates of iets anders met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.