Wat is er nieuw in DevTools (Chrome 63)

Kayce Basques

Welkom terug! Nieuwe functies voor DevTools in Chrome 63 zijn onder andere:

• Ondersteuning voor multi-client-foutopsporing op afstand .
• Werkruimten 2.0 .
• Vier nieuwe audits .
• Simuleer pushmeldingen met aangepaste gegevens .
• Activeer achtergrondsynchronisatiegebeurtenissen met aangepaste tags .

Lees verder of bekijk de onderstaande video voor meer informatie!

Ondersteuning voor multi-client-foutopsporing op afstand

Als je ooit hebt geprobeerd een app te debuggen vanuit een IDE zoals VS Code of WebStorm, heb je waarschijnlijk ontdekt dat het openen van DevTools je debugsessie verstoort. Dit probleem maakte het ook onmogelijk om DevTools te gebruiken om WebDriver-tests te debuggen.

Vanaf Chrome 63 ondersteunt DevTools standaard meerdere externe foutopsporingsclients, zonder dat er configuratie nodig is.

Multi-client remote debugging was het populairste DevTools-probleem op crbug.com en nummer drie in het hele Chromium-project. Ondersteuning voor meerdere clients biedt ook een aantal interessante mogelijkheden om andere tools te integreren met DevTools, of om die tools op nieuwe manieren te gebruiken. Bijvoorbeeld:

• Protocolclients zoals ChromeDriver of de Chrome-foutopsporingsextensies voor VS Code en Webstorm, en WebSocket-clients zoals Puppeteer, kunnen nu tegelijkertijd met DevTools worden uitgevoerd.
• Twee afzonderlijke WebSocket-protocolclients, zoals Puppeteer of chrome-remote-interface , kunnen nu tegelijkertijd verbinding maken met hetzelfde tabblad.
• Chrome-extensies die gebruikmaken van de chrome.debugger API kunnen nu tegelijkertijd met DevTools worden uitgevoerd.
• Meerdere verschillende Chrome-extensies kunnen nu tegelijkertijd de chrome.debugger API op hetzelfde tabblad gebruiken.

Werkruimten 2.0

Werkruimten bestaan al een tijdje in DevTools. Met deze functie kunt u DevTools als uw IDE gebruiken. U brengt binnen DevTools enkele wijzigingen aan in uw broncode en deze wijzigingen worden opgeslagen in de lokale versie van uw project op uw bestandssysteem.

Workspaces 2.0 bouwt voort op 1.0 en biedt een handigere gebruikerservaring en verbeterde automatische toewijzing van getranspileerde code. Deze functie zou oorspronkelijk kort na de Chrome Developer Summit (CDS) 2016 worden uitgebracht, maar het team heeft de release uitgesteld om enkele problemen op te lossen.

Bekijk het onderdeel "Authoring" (rond 14:28) van de DevTools-lezing van CDS 2016 om Workspaces 2.0 in actie te zien.

Vier nieuwe audits

In Chrome 63 heeft het Audits- paneel vier nieuwe audits:

• Afbeeldingen weergeven als WebP.
• Gebruik afbeeldingen met de juiste beeldverhouding.
• Vermijd frontend JavaScript-bibliotheken met bekende beveiligingsproblemen.
• Browserfouten worden geregistreerd in de console.

Zie Run Lighthouse in Chrome DevTools voor meer informatie over het gebruik van het paneel Audits om de kwaliteit van uw pagina's te verbeteren.

Zie Lighthouse voor meer informatie over het project dat het paneel Audits aanstuurt.

Simuleer pushmeldingen met aangepaste gegevens

Het simuleren van pushmeldingen bestaat al een tijdje in DevTools, met één beperking: je kon geen aangepaste gegevens versturen. Maar met de komst van het nieuwe Push- tekstvak in het Service Worker- venster in Chrome 63 is dat nu wel mogelijk. Probeer het nu:

1. Ga naar de Simple Push Demo .
2. Klik op Pushmeldingen inschakelen .
3. Klik op Toestaan wanneer Chrome u vraagt om meldingen toe te staan.
4. Open DevTools.
5. Ga naar het deelvenster Service Workers .

6. Schrijf iets in het tekstvak Push .

   

   Figuur 1. Simulatie van een pushmelding met aangepaste gegevens via het tekstvak Push in het deelvenster Service Worker

7. Klik op Push om de melding te verzenden.

   

   Figuur 2. De gesimuleerde pushmelding

Activeer achtergrondsynchronisatiegebeurtenissen met aangepaste tags

Het activeren van achtergrondsynchronisatiegebeurtenissen was al enige tijd beschikbaar in het deelvenster Service Workers , maar nu kunt u aangepaste tags verzenden:

1. Open DevTools.
2. Ga naar het deelvenster Service Workers .
3. Voer wat tekst in het tekstvak Synchroniseren in .
4. Klik op Synchroniseren .

Figuur 3. Nadat u op Sync hebt geklikt, stuurt DevTools een achtergrondsynchronisatiegebeurtenis met de aangepaste tag update-content naar de service worker.

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.