Deze pagina is vertaald door de Cloud Translation API.

Wat is er nieuw in DevTools (Chrome 83)

Kayce Basques

Emuleer tekortkomingen in het gezichtsvermogen

Open het tabblad Rendering en gebruik de nieuwe functie Visusstoornissen emuleren om een beter idee te krijgen van hoe mensen met verschillende soorten gezichtsstoornissen uw site ervaren.

Wazig zicht emuleren.

DevTools kan wazig zien en de volgende soorten kleurwaarnemingstekortkomingen emuleren:

Protanopie: het onvermogen om enig rood licht waar te nemen.
Deuteranopie: het onvermogen om enig groen licht waar te nemen.
Tritanopie: het onvermogen om blauw licht waar te nemen.
Achromatopsie: het onvermogen om welke kleur dan ook waar te nemen, behalve grijstinten (uiterst zeldzaam).

Er bestaan minder extreme versies van deze tekortkomingen in het kleurzicht, en deze komen in feite vaker voor. Protanomalie is bijvoorbeeld een verminderde gevoeligheid voor rood licht (in tegenstelling tot protanopie , wat het volledige onvermogen is om rood licht waar te nemen). Deze "-omaly" gezichtsstoornissen zijn echter niet zo duidelijk gedefinieerd: elke persoon met een dergelijk gezichtsvermogen is anders en kan de dingen anders zien (in staat zijn meer/minder van de relevante kleuren waar te nemen).

Door te ontwerpen voor de extremere simulaties in DevTools zijn uw webapps gegarandeerd ook toegankelijk voor mensen met protanomalie, deuteranomalie, tritanomalie en achromatomalie.

Stuur feedback naar Chromium issue #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 Commandomenu en typ Sensors om toegang te krijgen tot het tabblad Sensoren . Na het uitvoeren van deze acties wijzigt DevTools de huidige standaardlandinstelling, wat invloed heeft op het volgende:

Intl.* API's, bijvoorbeeld new Intl.NumberFormat().resolvedOptions().locale
andere locale-bewuste 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-verzoekheader

Let op: updates van navigator.language en navigator.languages zijn niet onmiddellijk zichtbaar, maar pas na de volgende navigatie of herladen van de pagina. Wijzigingen in de Accept-Language HTTP-header worden alleen weergegeven voor volgende verzoeken.

Bekijk het landafhankelijke codevoorbeeld om het zelf te proberen.

Stuur feedback naar Chromium-nummer 1051822 .

Foutopsporing in Cross-Origin Embedder Policy (COEP).

Het netwerkpaneel biedt nu foutopsporingsinformatie voor Cross-Origin Embedder Policy .

De kolom Status biedt nu een korte uitleg waarom een verzoek is geblokkeerd, evenals een link om de headers van dat verzoek te bekijken voor verdere foutopsporing:

Geblokkeerde verzoeken in de kolom Status

Het gedeelte Reactiekoppen van het tabblad Kopteksten biedt meer richtlijnen voor het oplossen van de problemen:

Meer richtlijnen vindt u in de sectie Antwoordkoppen

Stuur feedback naar Chromium-nummer 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 halfrode, halfwitte cirkels.
Logpunten worden weergegeven door rode cirkels met consolepictogrammen.

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

Stuur feedback naar Chromium-nummer 1041830 .

Gebruik het nieuwe cookie-path trefwoord in het netwerkpaneel om u te concentreren op de netwerkverzoeken 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 Commandomenu en voer de opdracht Dock to left uit om DevTools naar de linkerkant van uw viewport te verplaatsen.

DevTools is aan de linkerkant van de viewport gekoppeld

Stuur feedback naar Chromium-nummer 1011679 .

De optie `Settings` in het hoofdmenu is verplaatst

De optie om Instellingen vanuit het Hoofdmenu te openen is nu te vinden onder Meer Tools .

Send feedback to Chromium issue #1050855 .

Het paneel Audits is nu het Lighthouse -paneel

De DevTools- en Lighthouse-teams kregen regelmatig feedback van webontwikkelaars dat ze hoorden dat het mogelijk is Lighthouse vanuit DevTools uit te voeren, maar toen ze het gingen uitproberen konden ze het "Lighthouse"-paneel niet vinden, dus het Audits- paneel is nu het Vuurtoren paneel.

Het Vuurtorenpaneel

Verwijder alle lokale overschrijvingen in een map

Na het instellen van Lokale overschrijvingen kunt u nu met de rechtermuisknop op een map klikken en de nieuwe optie Alle overschrijvingen verwijderen selecteren om alle lokale overschrijvingen in die map te verwijderen.

Verwijder alle overschrijvingen

Stuur feedback naar Chromium-nummer 1016501 .

Bijgewerkte gebruikersinterface voor lange taken

Een lange taak is JavaScript-code die de rode draad lange tijd monopoliseert, waardoor een webpagina vastloopt.

U kunt al een tijdje lange taken visualiseren in het prestatiepaneel , maar in Chrome 83 is de gebruikersinterface voor de visualisatie van lange taken in het prestatiepaneel bijgewerkt. Het lange taakgedeelte van een taak is nu gekleurd met een gestreepte rode achtergrond.

De nieuwe gebruikersinterface voor lange taken

Stuur feedback naar Chromium-nummer 1054447 .

Ondersteuning voor maskeerbare pictogrammen in het manifestvenster

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

Schakel het nieuwe selectievakje Alleen het minimaal veilige gebied voor maskeerbare pictogrammen weergeven in het Manifest- paneel in om te controleren of uw maskeerbare pictogram er goed uitziet op Android Oreo-apparaten. Bekijk Zijn mijn huidige iconen gereed? om meer te leren.

Het selectievakje 'Alleen het minimale veilige gebied voor maskeerbare pictogrammen weergeven'

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 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 .