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-regel werkt op dezelfde manier als een mediaquery met @media . In plaats van de viewport en de user-agent om informatie te vragen, ondervraagt @container echter de bovenliggende container die aan bepaalde criteria voldoet.

Klik in het paneel Elementen op een DOM-element met @container at-rule. DevTools geeft nu de @container informatie weer in het paneel Stijlen . Klik erop om de maat te bewerken. In het deelvenster Stijlen wordt ook de bijbehorende containerinformatie weergegeven. Beweeg erop om het containerelement op de pagina te markeren en controleer de containergrootte. Klik erop om het containerelement te selecteren.

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

Chroomuitgave: 1146422

Voorbeeld van een webbundel in het netwerkpaneel

Webbundel is een bestandsformaat 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 netwerkpaneel .

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

Chroomuitgave: 1182537

Foutopsporing in de attributierapportage-API

Attribution Reporting API-fouten worden nu gerapporteerd op het tabblad Problemen .

Attributierapportage is een nieuwe API waarmee u kunt meten wanneer een gebruikersactie (zoals een advertentieklik of -weergave) tot een conversie leidt, zonder gebruik te maken van cross-site-ID's.

Chroomuitgave: 1190735

Betere stringverwerking in de console

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

In Chrome 90 heeft DevTools de console bijgewerkt om tekenreeksuitvoer altijd op te maken als geldige JSON-letterlijke waarden . We hebben feedback gekregen van de ontwikkelaars dat deze wijziging verwarrend kan zijn. Sommigen zijn van mening dat de hoeveelheid ontsnappingen buitensporig is en de uitvoer onleesbaar maakt.

De console formatteert tekenreeksuitvoer nu als geldige JavaScript-literals, en biedt u bovendien drie kopieertekenreeksopties. Met de letterlijke optie Kopiëren als JavaScript worden de juiste speciale tekens vermeden en wordt de tekenreeks tussen enkele aanhalingstekens, dubbele aanhalingstekens of backticks geplaatst, afhankelijk van de inhoud van de tekenreeks. De Kopieer tekenreeksinhoud kopieert in plaats daarvan de onbewerkte tekenreeksinhoud (inclusief nieuwe regels en andere speciale tekens) woordelijk naar het klembord. Ten slotte formatteert Kopiëren als JSON-letterlijk de tekenreeks als een geldige JSON-letterlijke waarde en kopieert deze naar het klembord.

Chroomuitgave: 1208389

Verbeterde CORS-foutopsporing

CORS-gerelateerde typefouten in de console zijn nu gekoppeld aan het netwerkpaneel en het tabblad Problemen.

Klik op de twee nieuwe pictogrammen naast het CORS-gerelateerde foutbericht om het netwerkverzoek te bekijken, of begrijp het foutbericht verder en krijg mogelijke oplossingen op het tabblad Problemen.

Chroomuitgave: 1213393

Vuurtoren 8.1

Het Lighthouse- paneel draait nu Lighthouse 8.1.

Als uw site bronkaarten beschikbaar stelt aan Lighthouse, zoekt u naar de knop View Treemap om een ​​overzicht te zien van uw verzonden JavaScript, filterbaar op grootte en dekking bij het laden.

Het rapport bevat ook een nieuw metrisch filter (zie Audits weergeven die relevant zijn voor filteren in de schermafbeelding). Kies een statistiek om u te concentreren op de kansen en diagnostiek die het meest relevant zijn voor het verbeteren van juist die statistiek.

De prestatiecategorie had een aantal scorewijzigingen om aan te sluiten bij andere prestatietools en om de toestand van het internet beter weer te geven.

Bekijk de releaseopmerkingen voor een volledige lijst met wijzigingen.

Chroomuitgave: 772558

Geef de nieuwe notitie-URL weer in het manifestvenster

In het manifestvenster wordt nu de nieuwe notitie-URL weergegeven.

Op ChromeOS (CrOS) kunnen Chrome-apps en Android-apps die de mogelijkheid voor 'nieuwe notities' aangeven, worden geselecteerd als app voor het maken van notities in de Stylus-instellingen (wordt weergegeven als het CrOS-apparaat met een stylus is gebruikt). Indien geselecteerd als app voor het maken van notities, kan de app worden gestart via de knop "Notitie maken" op het styluspalet. Het toevoegen van het veld new-note-url in het applicatiemanifest maakt deel uit van de poging om gelijkwaardige functionaliteit aan web-apps toe te voegen.

Chroomuitgave: 1185678

Vaste CSS-matchende selectors

DevTools heeft de CSS-matching-kiezers gerepareerd, deze werkten niet in de laatste release.

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

• Een ongeëvenaard gedeelte wordt weergegeven in lichtgrijs.
• Een bijpassend selectorgedeelte wordt in het zwart weergegeven.

Chroomuitgave: 1219153

Mooi afdrukkende JSON-antwoorden in het netwerkpaneel

U kunt nu JSON-antwoorden mooi afdrukken in het netwerkpaneel .

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

Chromium-bug: 998674

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .