Wat is er nieuw in DevTools (Chrome 63)

Kayce Basken

Welkom terug! Nieuwe functies die naar DevTools komen in Chrome 63 zijn onder meer:

Lees verder of bekijk onderstaande video voor meer informatie!

Ondersteuning voor foutopsporing op afstand voor meerdere clients

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 debug-sessie verpest. Dit probleem maakte het ook onmogelijk om DevTools te gebruiken voor het debuggen van WebDriver-tests.

Vanaf Chrome 63 ondersteunt DevTools nu standaard meerdere clients voor foutopsporing op afstand, er is geen configuratie nodig.

Foutopsporing op afstand bij meerdere clients was het populairste DevTools-probleem op crbug.com en nummer 3 in het hele Chromium-project. Ondersteuning voor meerdere clients biedt ook heel wat interessante mogelijkheden om andere tools met DevTools te integreren, 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 de chrome.debugger API gebruiken, kunnen nu tegelijkertijd met DevTools worden uitgevoerd.
  • Meerdere verschillende Chrome-extensies kunnen nu tegelijkertijd de chrome.debugger API op hetzelfde tabblad gebruiken.

Werkruimtes 2.0

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

Workspaces 2.0 bouwt voort op versie 1.0 en voegt een behulpzamere UX en verbeterde automatische mapping van getranspileerde code toe. Deze functie zou oorspronkelijk kort na Chrome Developer Summit (CDS) 2016 worden uitgebracht, maar het team heeft dit uitgesteld om enkele problemen op te lossen.

Bekijk het gedeelte "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 paneel Audits 4 nieuwe audits:

  • Serveer afbeeldingen als WebP.
  • Gebruik afbeeldingen met de juiste beeldverhoudingen.
  • Vermijd frontend JavaScript-bibliotheken met bekende beveiligingsproblemen.
  • Browserfouten geregistreerd in de console.

Zie Lighthouse uitvoeren in Chrome DevTools voor informatie over hoe u het deelvenster Audits kunt gebruiken om de kwaliteit van uw pagina's te verbeteren.

Zie Lighthouse voor meer informatie over het project dat het deelvenster 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 verzenden. Maar nu het nieuwe Push- tekstvak in het deelvenster Servicemedewerkers in Chrome 63 verschijnt, kan dat nu wel. Probeer het nu:

  1. Ga naar de Simple Push-demo .
  2. Klik op Pushmeldingen inschakelen .
  3. Klik op Toestaan ​​wanneer Chrome u vraagt ​​meldingen toe te staan.
  4. Open DevTools.
  5. Ga naar het deelvenster Servicemedewerkers .

  6. Schrijf iets in het Push- tekstvak.

    Een pushmelding simuleren met aangepaste gegevens.

    Figuur 1 . Een pushmelding simuleren met aangepaste gegevens via het Push- tekstvak in het deelvenster Servicemedewerker

  7. Klik op Push om de melding te verzenden.

    De gesimuleerde pushmelding

    Figuur 2 . De gesimuleerde pushmelding

Activeer achtergrondsynchronisatiegebeurtenissen met aangepaste tags

Het activeren van achtergrondsynchronisatiegebeurtenissen staat ook al een tijdje in het deelvenster Servicewerkers , maar nu kunt u aangepaste tags verzenden:

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

Een aangepaste achtergrondsynchronisatiegebeurtenis activeren

Figuur 3 . Nadat u op Synchroniseren hebt geklikt, verzendt DevTools een achtergrondsynchronisatiegebeurtenis met de aangepaste tag- update-content naar de servicemedewerker

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 .