Wat is er nieuw in DevTools (Chrome 92)

Jecelyn Yeen

CSS-rastereditor

Een veelgevraagde functie. Je kunt nu een voorbeeld van een CSS-raster bekijken en er een CSS-raster van maken met de nieuwe CSS-rastereditor!

CSS-rastereditor

Wanneer een HTML-element op uw pagina is voorzien van display: grid of display: inline-grid , verschijnt er een pictogram naast in het deelvenster Stijlen. Klik op het pictogram om de CSS-rastereditor in of uit te schakelen. Hier kunt u de mogelijke wijzigingen vooraf bekijken met de pictogrammen op het scherm (bijv. justify-content: space-around ) en de weergave van het raster met één klik bewerken.

Chromium-probleem: 1203241

Ondersteuning voor const herdeclaraties in de console

De console ondersteunt nu het opnieuw declareren van const statements, naast de bestaande let en class herdeclaraties . Het niet opnieuw kunnen declareren was een veelvoorkomend probleem voor webontwikkelaars die de console gebruiken om te experimenteren met nieuwe JavaScript-code.

Hierdoor kunnen ontwikkelaars code kopiëren en plakken in de DevTools-console om te zien hoe het werkt of om te experimenteren, kleine wijzigingen in de code aan te brengen en het proces te herhalen zonder de pagina te vernieuwen. Voorheen genereerde DevTools een syntaxisfout als de code een const binding opnieuw declareerde.

Zie het onderstaande voorbeeld. const herdeclaratie wordt ondersteund in afzonderlijke REPL-scripts (zie variabele a ). Houd er rekening mee dat de volgende scenario's niet standaard worden ondersteund:

  • const -herdeclaratie van paginascripts is niet toegestaan ​​in REPL-scripts
  • const -herdeclaratie binnen hetzelfde REPL-script is niet toegestaan ​​(zie variabele b )

const herdeclaraties

Chromium-probleem: 1076427

Bronvolgordeviewer

U kunt nu de volgorde van bronelementen op het scherm bekijken voor een betere toegankelijkheidsinspectie.

Bronvolgordeviewer

De volgorde van de inhoud in een HTML-document is belangrijk voor zoekmachineoptimalisatie en toegankelijkheid. Dankzij de nieuwere CSS-functies kunnen ontwikkelaars inhoud creëren die er op het scherm heel anders uitziet dan in het HTML-document. Dit is een groot toegankelijkheidsprobleem, omdat gebruikers van schermlezers een andere, en waarschijnlijk verwarrende, ervaring krijgen dan gebruikers die wel kunnen zien.

Chromium-probleem: 1094406

Nieuwe snelkoppeling om framedetails te bekijken

Bekijk iframedetails door met de rechtermuisknop op het iframe-element in het deelvenster Elementen te klikken en selecteer Framedetails weergeven .

Framedetails weergeven

Hiermee gaat u naar een overzicht van de iframe-details in het toepassingspaneel. Hier kunt u documentdetails, de beveiligings- en isolatiestatus, het machtigingsbeleid en meer bekijken om mogelijke problemen op te sporen.

Weergave van framedetails

Chromium-probleem: 1192084

Verbeterde CORS-foutopsporingsondersteuning

CORS-fouten (Cross-Origin Resource Sharing) worden nu weergegeven op het tabblad Problemen. Er zijn verschillende oorzaken voor CORS-fouten. Klik om elk probleem uit te vouwen voor meer informatie over de mogelijke oorzaken en oplossingen.

CORS-problemen op het tabblad Problemen

Chromium-probleem: 1141824

Updates van het netwerkpaneel

XHR-label hernoemen naar Fetch/XHR

Het XHR-label is nu hernoemd naar Fetch/XHR . Deze wijziging maakt duidelijker dat dit filter zowel XMLHttpRequest als Fetch API- netwerkverzoeken omvat.

Ophalen/XHR-label

Chromium-probleem: 1201398

Filter Wasm-resourcetype in het paneel Netwerk

U kunt nu op de nieuwe Wasm -knop klikken om de Wasm-netwerkverzoeken te filteren.

Filter op Wasm

Chromium-probleem: 1103638

Tips voor User-Agent-clients voor apparaten op het tabblad Netwerkvoorwaarden

Hints voor User-Agent-clients worden nu toegepast op apparaten in het veld User-agent op het tabblad Netwerkvoorwaarden .

User-Agent Client Hints zijn een nieuwe uitbreiding van de Client Hints API, waarmee ontwikkelaars op een privacybeschermende en ergonomische manier toegang kunnen krijgen tot informatie over de browser van een gebruiker.

Tips voor User-Agent-clients voor apparaten op het tabblad Netwerkvoorwaarden

Chromium-probleem: 1174299

Rapporteer problemen met de Quirks-modus op het tabblad Problemen

DevTools meldt nu problemen met de Quirks-modus en de Limited-quirks-modus .

Quirks Mode en Limited-quirks Mode zijn oudere browsermodi van vóór de invoering van webstandaarden. Deze modi emuleren lay-outgedragingen van vóór de standaarden, die vaak onverwachte visuele effecten veroorzaken.

Bij het opsporen van problemen met de lay-out denken ontwikkelaars soms dat de problemen worden veroorzaakt door CSS- of HTML-bugs die door de gebruiker zijn gemaakt, maar het echte probleem zit in de compatibiliteitsmodus waarin de pagina zich bevindt. DevTools biedt suggesties om dit op te lossen.

Rapporteer problemen met de Quirks-modus op het tabblad Problemen

Chromium-probleem: 622660

Compute Intersections opnemen in het Prestatiepaneel

DevTools tonen nu de Compute Intersections in het vlamdiagram. Deze wijzigingen helpen u bij het identificeren van de gebeurtenissen van de intersection observers en het debuggen van de mogelijke prestatieoverhead.

Bereken snijpunten in het paneel Prestaties

Chromium-probleem: 1199137

Vuurtoren 7.5 in het Vuurtorenpaneel

Het Lighthouse-paneel draait nu Lighthouse 7.5. De waarschuwing 'expliciete breedte en hoogte ontbreken' is nu verwijderd voor afbeeldingen met aspect-ratio die in CSS is gedefinieerd. Voorheen gaf Lighthouse waarschuwingen voor afbeeldingen zonder gedefinieerde breedte en hoogte.

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

Chromium-probleem: 772558

Verouderd contextmenu "Frame opnieuw starten" in de aanroepstack

De optie 'Herstart frame' is nu verouderd. Deze functie vereist verdere ontwikkeling om goed te werken, maar is momenteel defect en crasht vaak.

Verouderd contextmenu voor opnieuw opstarten

Chromium-probleem: 1203606

[Experimenteel] Protocolmonitor

Chrome DevTools gebruikt het Chrome DevTools Protocol (CDP) om Chrome-browsers te instrumenteren, inspecteren, debuggen en profileren. Met de Protocol Monitor kunt u alle CDP-verzoeken en -reacties van DevTools bekijken.

Twee nieuwe functies toegevoegd om het testen van CDP te vergemakkelijken:

  • Met de nieuwe knop Opslaan kunt u de opgenomen berichten downloaden als een JSON-bestand
  • Een nieuw veld waarmee u direct een onbewerkte CDP-opdracht kunt verzenden

Protocolmonitor

Chromium-problemen: 1204004 , 1204466

[Experimenteel] Poppenspeler-recorder

De Puppeteer-recorder genereert nu een lijst met stappen op basis van uw interactie met de browser, terwijl DevTools voorheen rechtstreeks een Puppeteer-script genereerde. Er is een nieuwe knop Exporteren toegevoegd waarmee u de stappen kunt exporteren als een Puppeteer-script.

Nadat je de stappen hebt opgenomen, kun je de nieuwe knop 'Opnieuw afspelen' gebruiken om de stappen opnieuw af te spelen. Volg de instructies hier om te leren hoe je aan de slag kunt met opnemen.

Houd er rekening mee dat dit een experiment in een vroeg stadium is. We zijn van plan de functionaliteit van de Recorder in de loop der tijd te verbeteren en uit te breiden.

Poppenspeler Recorder

Chromium-probleem: 1199787

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.