Wat is er nieuw in DevTools (Chrome 65)

Kayce Basques

Nieuwe functies die in Chrome 65 aan DevTools worden toegevoegd, zijn onder andere:

• Lokale overschrijvingen
• Nieuwe toegankelijkheidstools
• Het tabblad Wijzigingen
• Nieuwe SEO- en prestatieaudits
• Meerdere opnames in het paneel 'Prestaties'
• Betrouwbare code-stapsgewijze uitvoering met workers en asynchrone code.

Lees verder, of bekijk de videoversie van deze release-opmerkingen hieronder.

Lokale overschrijvingen

Met lokale overschrijvingen kunt u wijzigingen aanbrengen in de ontwikkelaarstools en deze wijzigingen behouden, zelfs wanneer de pagina opnieuw wordt geladen. Voorheen gingen alle wijzigingen die u in de ontwikkelaarstools aanbracht verloren wanneer u de pagina opnieuw laadde. Lokale overschrijvingen werken voor de meeste bestandstypen, met een paar uitzonderingen. Zie Beperkingen .

Afbeelding 1. Een CSS-wijziging behouden tussen paginaladingen met behulp van lokale overschrijvingen .

Hoe het werkt:

• Je geeft een map op waar DevTools wijzigingen moet opslaan.
• Wanneer je wijzigingen aanbrengt in DevTools, slaat DevTools een kopie van het gewijzigde bestand op in je map.
• Wanneer je de pagina opnieuw laadt, serveert DevTools het lokaal gewijzigde bestand in plaats van de netwerkbron.

Lokale overschrijvingen instellen:

1. Open het paneel Bronnen .

2. Open het tabblad Overrides .

   

   Afbeelding 2. Het tabblad Overrides

3. Klik op Instellingen overschrijven .

4. Selecteer in welke map u uw wijzigingen wilt opslaan.

5. Klik bovenaan in uw weergavevenster op ' Toestaan ' om DevTools lees- en schrijftoegang tot de map te geven.

6. Breng uw wijzigingen aan.

Beperkingen

• DevTools slaat geen wijzigingen op die zijn aangebracht in de DOM-structuur van het paneel Elementen . Bewerk HTML in plaats daarvan in het paneel Bronnen .
• Als je CSS bewerkt in het deelvenster Stijlen en de bron van die CSS is een HTML-bestand, slaat DevTools de wijziging niet op. Bewerk het HTML-bestand in plaats daarvan in het deelvenster Bronnen.

Gerelateerde functies

• Werkruimtes . DevTools koppelt netwerkbronnen automatisch aan een lokale repository. Telkens wanneer u een wijziging aanbrengt in DevTools, wordt die wijziging ook opgeslagen in uw lokale repository.

Het tabblad Wijzigingen

Houd de wijzigingen die u lokaal in DevTools aanbrengt bij via het nieuwe tabblad 'Wijzigingen '.

Afbeelding 3. Het tabblad Wijzigingen

Nieuwe toegankelijkheidstools

Gebruik het nieuwe deelvenster Toegankelijkheid om de toegankelijkheidseigenschappen van een element te controleren en inspecteer de contrastverhouding van tekstelementen in de kleurenkiezer om ervoor te zorgen dat ze toegankelijk zijn voor gebruikers met een visuele beperking of kleurenblindheid.

Toegankelijkheidspaneel

Gebruik het deelvenster Toegankelijkheid in het paneel Elementen om de toegankelijkheidseigenschappen van het momenteel geselecteerde element te bekijken.

Figuur 4. Het deelvenster Toegankelijkheid toont de ARIA-attributen en berekende eigenschappen voor het element dat momenteel is geselecteerd in de DOM-structuur in het deelvenster Elementen , evenals de positie ervan in de toegankelijkheidsstructuur.

Bekijk Rob Dodsons A11ycast over labelen hieronder om het toegankelijkheidspaneel in actie te zien.

Contrastverhouding in de kleurenkiezer

De kleurenkiezer toont nu de contrastverhouding van tekstelementen. Door de contrastverhouding van tekstelementen te verhogen, wordt uw website toegankelijker voor gebruikers met een visuele beperking of kleurenblindheid. Zie Kleur en contrast voor meer informatie over de invloed van de contrastverhouding op toegankelijkheid.

Het verbeteren van het kleurcontrast van je tekstelementen maakt je website gebruiksvriendelijker voor alle gebruikers. Met andere woorden: als je tekst grijs is met een witte achtergrond, is dat voor niemand leesbaar.

Figuur 5. Inspectie van de contrastverhouding van het gemarkeerde h1 element.

In figuur 5 betekenen de twee vinkjes naast 4,61 dat dit element voldoet aan de verbeterde aanbevolen contrastverhouding (AAA) . Als er slechts één vinkje zou staan, zou dat betekenen dat het voldoet aan de minimale aanbevolen contrastverhouding (AA) .

Klik op Meer weergeven Om het gedeelte over de contrastverhouding uit te breiden. De witte lijn in het vak 'Kleurenspectrum ' geeft de grens aan tussen kleuren die voldoen aan de aanbevolen contrastverhouding en kleuren die dat niet doen. Omdat de grijze kleur in afbeelding 6 bijvoorbeeld aan de aanbevelingen voldoet, betekent dit dat alle kleuren onder de witte lijn ook aan de aanbevelingen voldoen.

Figuur 6. Het uitgevouwen gedeelte van de contrastverhouding .

Gerelateerde functies

Het paneel 'Audits' beschikt over een geautomatiseerde toegankelijkheidsaudit om te garanderen dat elk tekstelement op een pagina een voldoende contrastverhouding heeft.

Zie 'Run Lighthouse in Chrome DevTools' of bekijk de A11ycast hieronder om te leren hoe u het paneel 'Audits' kunt gebruiken om de toegankelijkheid te testen.

Nieuwe audits

Chrome 65 wordt geleverd met een geheel nieuwe categorie SEO-audits en vele nieuwe prestatieaudits.

Nieuwe SEO-audits

Door ervoor te zorgen dat uw pagina's alle audits in de nieuwe SEO- categorie doorstaan, kunt u uw positie in de zoekresultaten verbeteren.

Figuur 7. De nieuwe SEO- categorie van audits.

Nieuwe prestatieaudits

Chrome 65 wordt ook geleverd met veel nieuwe prestatieverbeteringen:

• De opstarttijd van JavaScript is hoog.
• Gebruikt een inefficiënt cachebeleid voor statische bestanden.
• Voorkomt paginaomleidingen
• Dit document maakt gebruik van plug-ins.
• Minimaliseer CSS
• Minimaliseer JavaScript

Prestaties zijn belangrijk! Nadat Mynet de laadsnelheid van hun pagina's verviervoudigde, brachten gebruikers 43% meer tijd op de site door, bekeken ze 34% meer pagina's, daalde het bouncepercentage met 24% en steeg de omzet per bekeken artikelpagina met 25%. Lees meer .

Tip! Wilt u de laadprestaties van uw pagina's verbeteren, maar weet u niet waar u moet beginnen? Probeer dan het Audits- paneel. U voert een URL in en u krijgt een gedetailleerd rapport met diverse manieren waarop u die pagina kunt verbeteren. Ga aan de slag .

Overige updates

• Nieuwe, handmatige toegankelijkheidsaudits
• Updates aan de WebP-audit om deze beter geschikt te maken voor andere beeldformaten van de volgende generatie.
• Een herziening van de toegankelijkheidsscore
• Als een toegankelijkheidsaudit niet van toepassing is op een pagina, telt die audit niet langer mee voor de toegankelijkheidsscore.
• Prestaties vormen nu het belangrijkste onderdeel in rapporten.

Betrouwbare code-stapsgewijze uitvoering met workers en asynchrone code.

Chrome 65 brengt updates voor de Step Into-functie. Deze knop wordt gebruikt wanneer je stap voor stap door code loopt die berichten tussen threads uitwisselt, en door asynchrone code. Als je het vorige stapgedrag wilt behouden, kun je de nieuwe stapfunctie gebruiken. knop, in plaats daarvan.

Het doorlopen van code die berichten tussen threads doorgeeft.

Wanneer je code doorloopt die berichten tussen threads uitwisselt, laat DevTools je nu zien wat er in elke thread gebeurt.

De app in Figuur 8 verstuurt bijvoorbeeld een bericht tussen de hoofdthread en de workerthread. Nadat DevTools de postMessage() -aanroep op de hoofdthread heeft doorlopen, pauzeert het programma in de onmessage handler op de workerthread. De onmessage handler zelf stuurt een bericht terug naar de hoofdthread. Door die aanroep te doorlopen, pauzeert DevTools weer terug naar de hoofdthread.

Afbeelding 8. Het bekijken van berichtuitwisselingscode in Chrome 65.

Als je in eerdere versies van Chrome code op deze manier opende, toonde Chrome alleen de code aan de hoofdthreadzijde, zoals je in Figuur 9 kunt zien.

Afbeelding 9. Het bekijken van berichtuitwisselingscode in Chrome 63.

Stappen in asynchrone code

Wanneer je asynchrone code doorloopt, gaat DevTools er nu van uit dat je wilt pauzeren in de asynchrone code die uiteindelijk wordt uitgevoerd.

In Figuur 10 bijvoorbeeld, voert DevTools na het betreden van setTimeout() alle code die tot dat punt heeft geleid op de achtergrond uit en pauzeert vervolgens in de functie die aan setTimeout() wordt doorgegeven.

Afbeelding 10. Asynchrone code doorlopen in Chrome 65.

Wanneer je in Chrome 63 op deze manier code opende, pauzeerde DevTools de code terwijl deze chronologisch werd uitgevoerd, zoals je in Figuur 11 kunt zien.

Afbeelding 11. Asynchrone code doorlopen in Chrome 63.

Meerdere opnames in het paneel 'Prestaties'

In het paneel Prestaties kunt u nu maximaal 5 opnames tijdelijk opslaan. De opnames worden verwijderd wanneer u het DevTools-venster sluit. Zie Aan de slag met het analyseren van runtimeprestaties om vertrouwd te raken met het paneel Prestaties .

Afbeelding 12. Selecteren tussen meerdere opnames in het paneel 'Prestatie' .

Bonus: Automatiseer DevTools-acties met Puppeteer 1.0

Versie 1.0 van Puppeteer, een tool voor browserautomatisering die wordt onderhouden door het Chrome DevTools-team, is nu beschikbaar. Je kunt Puppeteer gebruiken om veel taken te automatiseren die voorheen alleen via DevTools beschikbaar waren, zoals het maken van schermafbeeldingen.

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Het beschikt ook over API's voor tal van algemeen nuttige automatiseringstaken, zoals het genereren van PDF's:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Zie Snelstartgids voor meer informatie.

Je kunt Puppeteer ook gebruiken om DevTools-functies beschikbaar te maken tijdens het browsen, zonder DevTools expliciet te hoeven openen. Zie ' DevTools-functies gebruiken zonder DevTools te openen' voor een voorbeeld.

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.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

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