Wat is er nieuw in DevTools (Chrome 63)

Kayce Basken
Kayce Basques
X GitHub

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

Lees verder of bekijk de video hieronder voor meer informatie!

Ondersteuning voor debuggen op afstand met meerdere clients

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

Vanaf Chrome 63 ondersteunt DevTools standaard meerdere clients voor debuggen op afstand, zonder dat hiervoor configuratie nodig is.

Multi-client remote debugging was het meest besproken probleem met DevTools op crbug.com en nummer 3 binnen het gehele Chromium-project. Ondersteuning voor meerdere clients biedt ook tal van interessante mogelijkheden voor de integratie van andere tools met DevTools, of voor het gebruik van die tools op nieuwe manieren. Bijvoorbeeld:

  • Protocolclients zoals ChromeDriver of de Chrome-debuggingextensies voor VS Code en Webstorm, en WebSocket-clients zoals Puppeteer, kunnen nu tegelijk 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 tegelijk met DevTools worden uitgevoerd.
  • Meerdere verschillende Chrome-extensies kunnen nu tegelijkertijd de chrome.debugger API op hetzelfde tabblad gebruiken.

Werkruimtes 2.0

Werkruimtes bestaan ​​al een tijdje in DevTools. Met deze functie kun je DevTools als je IDE gebruiken. Je brengt wijzigingen aan in je broncode binnen DevTools en deze wijzigingen worden opgeslagen in de lokale versie van je project op je bestandssysteem.

Workspaces 2.0 bouwt voort op versie 1.0 en biedt een gebruiksvriendelijkere interface en verbeterde automatische mapping 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-presentatie van CDS 2016 om Workspaces 2.0 in actie te zien.

Vier nieuwe audits

In Chrome 63 bevat het paneel Audits 4 nieuwe audits:

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

Zie Lighthouse uitvoeren in Chrome DevTools om te leren hoe u het Audits- paneel kunt gebruiken om de kwaliteit van uw pagina's te verbeteren.

Zie Lighthouse voor meer informatie over het project dat het auditpaneel aandrijft.

Simuleer pushmeldingen met aangepaste gegevens.

Het simuleren van pushmeldingen is al een tijdje mogelijk in DevTools, met één beperking: je kon geen aangepaste gegevens verzenden. Maar met het nieuwe tekstvak 'Push' in het Service Worker- paneel van 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 je vraagt ​​om meldingen toe te staan.
  4. Open de ontwikkelaarstools.
  5. Ga naar het paneel Servicemedewerkers .

  6. Typ iets in het tekstvak 'Push' .

    Een pushmelding simuleren met aangepaste gegevens.

    Afbeelding 1. Het simuleren van een pushmelding met aangepaste gegevens via het tekstvak 'Push' in het Service Worker- venster.

  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 synchronisatiegebeurtenissen op de achtergrond is al enige tijd mogelijk in het Service Workers -paneel, maar nu kunt u ook aangepaste tags verzenden:

  1. Open de ontwikkelaarstools.
  2. Ga naar het paneel Servicemedewerkers .
  3. Voer wat tekst in het tekstvak 'Synchroniseren' in.
  4. Klik op Synchroniseren .

Een aangepaste achtergrondsynchronisatiegebeurtenis activeren

Afbeelding 3. Na het klikken op Synchroniseren stuurt DevTools een synchronisatiegebeurtenis op de achtergrond met de aangepaste tag update-content naar de service worker.

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .