Wat is er nieuw in DevTools (Chrome 83)

Kayce Basques

Visuele tekortkomingen nabootsen

Open het tabblad Rendering en gebruik de nieuwe functie 'Visuele beperkingen nabootsen' om een ​​beter beeld te krijgen van hoe mensen met verschillende soorten visuele beperkingen uw site ervaren.

Het imiteren van wazig zicht.

DevTools kunnen wazig zien en de volgende soorten kleurenzichtstoornissen nabootsen :

• Protanopie: het onvermogen om rood licht waar te nemen.
• Deuteranopie: het onvermogen om groen licht waar te nemen.
• Tritanopie: het onvermogen om blauw licht waar te nemen.
• Achromatopsie: het onvermogen om kleuren waar te nemen, behalve grijstinten (zeer zeldzaam).

Er bestaan ​​minder extreme vormen van deze kleurenblindheidsstoornissen, en die komen zelfs vaker voor. Protanomalie is bijvoorbeeld een verminderde gevoeligheid voor rood licht (in tegenstelling tot protanopie , wat het volledig onvermogen is om rood licht waar te nemen). Deze "-omalie"-blindheidsstoornissen zijn echter niet zo duidelijk gedefinieerd: iedereen met een dergelijke blindheidsstoornis is anders en kan dingen anders zien (meer/minder van de relevante kleuren waarnemen).

Door te ontwerpen voor de extremere simulaties in DevTools, is de zekerheid aanwezig dat uw web-apps ook toegankelijk zijn voor mensen met protanomalie, deuteranomalie, tritanomalie en achromatomalie.

Stuur feedback over Chromium-probleem #1003700 of lees meer over de implementatie .

Landinstellingen emuleren

U kunt nu landinstellingen emuleren door een locatie in te stellen in Sensoren > Locatie . Open het menu Opdracht en typ Sensors om het tabblad Sensoren te openen. Na het uitvoeren van deze acties wijzigt DevTools de huidige standaardlandinstelling, met gevolgen voor het volgende:

• Intl.* API's, bijvoorbeeld new Intl.NumberFormat().resolvedOptions().locale
• andere locale-afhankelijke JavaScript API's zoals String.prototype.localeCompare en *.prototype.toLocaleString , bijvoorbeeld 123_456..toLocaleString()
• DOM API's zoals navigator.language en navigator.languages
• de Accept-Language HTTP-aanvraagheader

Bekijk het landinstellingsafhankelijke codevoorbeeld om het zelf te proberen.

Stuur feedback over Chromium-probleem #1051822 .

Cross-Origin Embedder Policy (COEP) foutopsporing

Het paneel Netwerk biedt nu informatie over het opsporen van fouten in het Cross-Origin Embedder-beleid .

De kolom Status biedt nu een snelle uitleg over waarom een ​​verzoek is geblokkeerd, evenals een koppeling om de headers van het verzoek te bekijken voor verdere foutopsporing:

In het gedeelte Antwoordheaders van het tabblad Headers vindt u meer informatie over hoe u de problemen kunt oplossen:

Stuur feedback over Chromium-probleem #1051466 .

Nieuwe pictogrammen voor breekpunten, voorwaardelijke breekpunten en logpunten

Het paneel Bronnen heeft nieuwe pictogrammen voor breekpunten, voorwaardelijke breekpunten en logpunten:

• Breekpunten worden weergegeven door rode cirkels.
• Voorwaardelijke breekpunten worden weergegeven door half rode, half witte cirkels.
• Logpunten worden weergegeven door rode cirkels met consolepictogrammen.

De motivatie voor de nieuwe iconen was om de gebruikersinterface consistenter te maken met andere GUI-foutopsporingshulpmiddelen (die normaal gesproken breekpunten rood kleuren) en om het gemakkelijker te maken om in één oogopslag onderscheid te maken tussen de drie functies.

Stuur feedback over Chromium-probleem #1041830 .

Bekijk netwerkverzoeken die een specifiek cookiepad instellen

Gebruik het nieuwe filtertrefwoord cookie-path in het paneel Netwerk om u te richten op de netwerkaanvragen die een specifiek cookiepad instellen.

Bekijk Filter verzoeken op eigenschappen om meer speciale trefwoorden te ontdekken, zoals cookie-path .

Dock naar links vanuit het Commandomenu

Open het opdrachtmenu en voer de opdracht Dock to left om DevTools naar de linkerkant van uw viewport te verplaatsen.

Stuur feedback over Chromium-probleem #1011679 .

De optie Settings in het hoofdmenu is verplaatst

De optie om Instellingen te openen vanuit het hoofdmenu vindt u nu onder Meer hulpmiddelen .

Stuur feedback over Chromium-probleem #1050855 .

Het Audits -paneel is nu het Lighthouse- paneel

De DevTools- en Lighthouse-teams kregen regelmatig feedback van webontwikkelaars. Ze kregen te horen dat het mogelijk is om Lighthouse vanuit DevTools uit te voeren. Toen ze het wilden uitproberen, konden ze het paneel 'Lighthouse' echter niet vinden. Daarom is het paneel ' Audits ' nu het paneel 'Lighthouse' .

Alle lokale overschrijvingen in een map verwijderen

Nadat u Lokale Overrides hebt ingesteld, kunt u met de rechtermuisknop op een map klikken en de nieuwe optie Alle overschrijvingen verwijderen selecteren om alle Lokale Overrides in die map te verwijderen.

Stuur feedback over Chromium-probleem #1016501 .

Bijgewerkte gebruikersinterface voor lange taken

Een Long Task is een JavaScript-code die de hoofdthread gedurende lange tijd monopoliseert, waardoor een webpagina vastloopt.

Je kunt al een tijdje lange taken visualiseren in het Prestatiepaneel , maar in Chrome 83 is de visualisatie-interface voor lange taken in het Prestatiepaneel bijgewerkt. Het lange-taakgedeelte van een taak heeft nu een rood gestreepte achtergrond.

Stuur feedback over Chromium-probleem #1054447 .

Ondersteuning voor maskerbare pictogrammen in het Manifest-paneel

Android Oreo introduceerde adaptieve pictogrammen, waarmee app-pictogrammen in verschillende vormen op verschillende apparaatmodellen worden weergegeven. Maskeerbare pictogrammen zijn een nieuw pictogramformaat dat adaptieve pictogrammen ondersteunt, zodat je ervoor kunt zorgen dat je PWA- pictogram er goed uitziet op apparaten die de standaard voor maskeerbare pictogrammen ondersteunen.

Schakel het nieuwe selectievakje 'Toon alleen de minimale veilige zone voor maskeerbare pictogrammen' in het deelvenster Manifest in om te controleren of uw maskeerbare pictogram er goed uitziet op Android Oreo-apparaten. Zie ' Zijn mijn huidige pictogrammen gereed?' voor meer informatie.

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.

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

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