Wat is er nieuw in DevTools (Chrome 102)

Jecelyn Yeen

Previewfunctie: Nieuw paneel Prestatie-inzichten

Gebruik het paneel Prestatie-inzichten om bruikbare en op use cases gebaseerde inzichten te krijgen in de prestaties van uw website.

Open het paneel en start een nieuwe opname op basis van uw use case. Laten we bijvoorbeeld de laadsnelheid van deze demopagina meten.

Zodra de opname is voltooid, krijgt u de prestatie-inzichten in het deelvenster 'Inzichten' . Klik op elk inzichtitem (bijvoorbeeld 'Render blocking request', 'Layout shift') om inzicht te krijgen in het probleem en mogelijke oplossingen.

Ga naar de documentatie van het paneel Prestatie-inzichten voor meer informatie met de stapsgewijze zelfstudie.

Dit is een previewfunctie waarmee webontwikkelaars (met name niet-performance-experts) potentiële prestatieproblemen kunnen identificeren en oplossen. Ons team werkt actief aan deze functie en we horen graag uw feedback voor verdere verbeteringen.

Chromium-probleem: 1270700

Nieuwe snelkoppelingen om lichte en donkere thema's na te bootsen

U kunt nu de lichte en donkere thema's sneller nabootsen (CSS-mediafunctie prefers-color-scheme ) met de nieuwe snelkoppelingen in het deelvenster Stijlen.

Voorheen waren er meer stappen nodig om thema's te emuleren in het tabblad Rendering .

Chromium-probleem: 1314299

Verbeterde beveiliging op het tabblad Netwerkvoorbeeld

DevTools past nu het Content Security Policy (CSP) toe op het tabblad Voorbeeld in het paneel Netwerk .

De eerste schermafbeelding toont bijvoorbeeld een pagina met gemengde inhoud . De pagina laadt via een beveiligde HTTPS-verbinding, maar de stylesheet laadt via een onveilige HTTP-verbinding.

De browser blokkeerde de stylesheet-aanvraag standaard. Toen u de pagina echter opende via het tabblad Voorbeeld in het paneel Netwerk , werd de stylesheet eerder niet geblokkeerd (vandaar de rode achtergrond). Hij is nu geblokkeerd zoals u zou verwachten (tweede schermafbeelding).

Chromium-probleem: 833147

Verbeterd herladen bij breekpunt

De debugger beëindigt nu de uitvoering van het script wanneer het opnieuw wordt geladen bij een breekpunt.

Zo raakte het script in deze React-demo eerder in een eindeloze lus bij het instellen en herladen van het ReactDOM breekpunt. Het Bronnenpaneel brak door de eindeloze lus.

Het blijven uitvoeren van JavaScript veroorzaakt veel problemen voor ontwikkelaars en kan ertoe leiden dat de renderer niet meer werkt. Deze wijziging stemt het debuggedrag af op dat van andere browsers zoals Firefox.

Chromium-problemen: 1014415 , 1004038 , 1112863 , 1134899

Console-updates

Scriptuitvoeringsfouten in de console verwerken

Fouten tijdens de scriptevaluatie in de console genereren nu de juiste foutgebeurtenissen die de handler window.onerror activeren en als "error" -gebeurtenissen op het vensterobject worden verzonden.

Chromium-probleem: 1295750

Live-expressie vastleggen met Enter

Zodra je klaar bent met het typen van een live-expressie , kun je op Enter drukken om deze vast te leggen. Voorheen resulteerde het indrukken van Enter in het toevoegen van nieuwe regels. Dit is inconsistent met andere onderdelen van de DevTools.

Als u een nieuwe regel in de live-expressie -editor wilt toevoegen, gebruikt u Shift + Enter .

Chromium-probleem: 1260744

Annuleer de gebruikersstroomopname aan het begin

U kunt de opname annuleren tijdens de start van de gebruikersstroomopname. Voorheen was er geen mogelijkheid om de opname te annuleren.

Chromium-probleem: 1257499

Geërfde pseudo-elementen in het deelvenster Stijlen weergeven

Bekijk de overgenomen pseudo-elementen voor markering (bijv. ::selection , ::spelling-error , ::grammar-error en ::highlight ) in het deelvenster Stijlen. Voorheen werden deze regels niet weergegeven.

Zoals vermeld in de specificatie , bepaalt cascade de winnende stijl wanneer meerdere stijlen met elkaar conflicteren. Deze nieuwe functie helpt u de overerving en prioriteit van de regels te begrijpen.

Chromium-probleem: 1024156

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

• Het deelvenster Eigenschappen geeft nu standaard accessoreigenschappen met een waarde weer. Dit was voorheen abusievelijk verborgen. ( 1309087 )
• Het deelvenster Stijlen geeft de overschreven @support -regels nu correct weer als doorhaling. Voorheen waren de regels niet doorhaling. ( 1298025 )
• De CSS-opmaaklogica in het Bronnenpaneel is aangepast, waardoor er meerdere lege regels ontstonden bij het bewerken van CSS. ( 1309588 )
• Stel de optie Recursief uitbreiden van een object in de console in op maximaal 100, zodat deze niet oneindig doorgaat voor cirkelvormige objecten. ( 1272450 )

[Experimenteel] CSS-wijzigingen kopiëren

Met dit experiment worden je CSS-wijzigingen in het deelvenster Stijlen groen gemarkeerd. Je kunt de muisaanwijzer op de gewijzigde regels plaatsen en op de knop 'Nieuw kopiëren' ernaast klikken om ze te kopiëren.

Daarnaast kunt u alle CSS-wijzigingen naar andere declaraties kopiëren door met de rechtermuisknop op een regel te klikken en Alle CSS-wijzigingen kopiëren te selecteren.

Er is ook een nieuwe knop Kopiëren toegevoegd aan het tabblad Wijzigingen , zodat u uw CSS-wijzigingen eenvoudig kunt bijhouden en kopiëren!

Chromium-probleem: 1268754

[Experimenteel] Kleur kiezen buiten de browser

Schakel dit experiment in om een ​​kleur buiten de browser te kiezen met de kleurenkiezer. Voorheen kon je alleen een kleur binnen de browser kiezen.

Klik in het deelvenster Stijlen op een kleurvoorbeeld om de kleurenkiezer te openen. Gebruik het pipet om overal een kleur te kiezen.

Chromium-probleem: 1245191

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.