Wat is er nieuw in DevTools (Chrome 92)

Jecelyn Yeen

CSS-rastereditor

Een veelgevraagde functie. U kunt nu een voorbeeld van CSS Grid bekijken en schrijven met de nieuwe CSS Grid-editor!

CSS-rastereditor

Wanneer op een HTML-element op uw pagina display: grid of display: inline-grid is toegepast, kunt u ernaast een pictogram zien verschijnen in het deelvenster Stijlen. Klik op het pictogram om de CSS-rastereditor in of uit te schakelen. Hier kunt u een voorbeeld van de mogelijke wijzigingen bekijken met de pictogrammen op het scherm (bijvoorbeeld justify-content: space-around ) en met slechts één klik het rasterontwerp maken.

Chroomuitgave: 1203241

Ondersteuning voor const herdeclaraties in de console

De console ondersteunt nu het opnieuw declareren van const instructie, naast de bestaande herdeclaraties van let en class . Het onvermogen om opnieuw aan te geven was een veel voorkomende ergernis voor webontwikkelaars die de console gebruiken om te experimenteren met nieuwe JavaScript-code.

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

Raadpleeg het onderstaande voorbeeld. const herdeclaratie wordt ondersteund door afzonderlijke REPL-scripts (zie variabele a ). Houd er rekening mee dat de volgende scenario's niet door het ontwerp 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

Chroomuitgave: 1076427

Bronbestellingviewer

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

Bronbestellingviewer

De volgorde van de inhoud in een HTML-document is belangrijk voor zoekmachineoptimalisatie en toegankelijkheid. Met de nieuwere CSS-functies kunnen ontwikkelaars inhoud maken die er op het scherm heel anders uitziet dan wat er in het HTML-document staat. Dit is een groot toegankelijkheidsprobleem, omdat gebruikers van schermlezers een andere, hoogstwaarschijnlijk verwarrende ervaring zouden krijgen dan ziende gebruikers.

Chroomuitgave: 1094406

Nieuwe snelkoppeling om framedetails te bekijken

Bekijk iframe-details door met de rechtermuisknop op het iframe-element in het paneel Elementen te klikken en Framedetails tonen te selecteren.

Framedetails weergeven

Dit brengt u naar een weergave van de details van het iframe in het paneel Toepassingen, waar u documentdetails, de beveiligings- en isolatiestatus, het machtigingsbeleid en meer kunt onderzoeken om mogelijke problemen op te lossen.

Framedetails bekijken

Chroomuitgave: 1192084

Verbeterde ondersteuning voor CORS-foutopsporing

Cross-origin resource sharing (CORS)-fouten worden nu weergegeven op het tabblad Problemen. Er zijn verschillende redenen die CORS-fouten veroorzaken. Klik om elk probleem uit te vouwen om de mogelijke oorzaken en oplossingen te begrijpen.

CORS-problemen op het tabblad Problemen

Chroomuitgave: 1141824

Updates van het netwerkpaneel

Hernoem het XHR-label 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

Chroomuitgave: 1201398

Filter Wasm-brontype in het netwerkpaneel

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

Filter op Wasm

Chroomuitgave: 1103638

User-Agent Client-tips voor apparaten op het tabblad Netwerkvoorwaarden

User-Agent Client Hints 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.

User-Agent Client-tips voor apparaten op het tabblad Netwerkvoorwaarden

Chroomuitgave: 1174299

Rapporteer problemen met de Quirks-modus op het tabblad Problemen

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

Quirks Mode en Limited-quirks Mode zijn oudere browsermodi van vóór de webstandaarden werden gemaakt. Deze modi emuleren lay-outgedrag uit het pre-standaardtijdperk dat vaak onverwachte visuele effecten veroorzaakt.

Bij het debuggen van lay-outproblemen kunnen ontwikkelaars denken dat deze worden veroorzaakt door door de gebruiker geschreven CSS- of HTML-bugs, terwijl het echte probleem de compatibiliteitsmodus is waarin de pagina zich bevindt. DevTools biedt suggesties om dit probleem op te lossen.

Rapporteer problemen met de Quirks-modus op het tabblad Problemen

Chroomuitgave: 622660

Neem rekenkruisingen op in het paneel Prestaties

DevTools toont nu de Compute Intersections in het vlammendiagram. Deze wijzigingen helpen u bij het identificeren van de gebeurtenissen van de kruispuntwaarnemers en bij het opsporen van fouten in de potentiële prestatieoverheads.

Bereken kruispunten in het paneel Prestaties

Chroomuitgave: 1199137

Vuurtoren 7.5 in het Vuurtorenpaneel

Het Lighthouse-paneel draait nu Lighthouse 7.5. De waarschuwing "ontbrekende expliciete breedte en hoogte" is nu verwijderd voor afbeeldingen waarvan aspect-ratio is gedefinieerd in CSS. Voorheen liet Lighthouse waarschuwingen zien voor afbeeldingen zonder gedefinieerde breedte en hoogte.

Bekijk de release-opmerkingen voor een volledige lijst met wijzigingen.

Chroomuitgave: 772558

Verouderd contextmenu "Frame opnieuw opstarten" in de call-stack

De optie Frame opnieuw starten is nu verouderd. Deze functie vereist verdere ontwikkeling om goed te werken, maar is momenteel kapot en loopt vaak vast.

Verouderd Contextmenu van frame opnieuw starten

Chroomuitgave: 1203606

[Experimenteel] Protocolmonitor

Chrome DevTools gebruikt het Chrome DevTools Protocol (CDP) om Chrome-browsers te instrumenteren, inspecteren, debuggen en profileren. De Protocolmonitor biedt u een manier om alle CDP-verzoeken en -antwoorden van DevTools te bekijken.

Er zijn twee nieuwe functies toegevoegd om het testen van CDP te vergemakkelijken:

  • Met de nieuwe knop Opslaan kunt u de opgenomen berichten downloaden als JSON-bestand
  • Een nieuw veld waarmee u rechtstreeks een onbewerkt CDP-commando kunt verzenden

Protocolmonitor

Chroomuitgaves: 1204004 , 1204466

[Experimenteel] Poppenspelerrecorder

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

Na het opnemen van de stappen kunt u de nieuwe knop Opnieuw afspelen gebruiken om de stappen opnieuw af te spelen. Volg de instructies hier om te leren hoe u aan de slag gaat met opnemen.

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

Poppenspeler-recorder

Chroomuitgave: 1199787

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.

Wat is er nieuw in DevTools

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