Wat is er nieuw in DevTools (Chrome 65)

Kayce Basken

Nieuwe functies voor DevTools in Chrome 65 zijn onder andere:

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

Lokale overschrijvingen

Met lokale overschrijvingen kunt u wijzigingen aanbrengen in DevTools en deze wijzigingen behouden tijdens het laden van de pagina. Voorheen gingen alle wijzigingen die u in DevTools aanbracht verloren wanneer u de pagina opnieuw laadde. Lokale overschrijvingen werken voor de meeste bestandstypen, met een paar uitzonderingen. Zie Beperkingen .

Een CSS-wijziging behouden tijdens het laden van de pagina met behulp van lokale overschrijvingen.

Figuur 1. Een CSS-wijziging behouden tijdens het laden van een pagina met lokale overschrijvingen

Hoe het werkt:

  • U geeft een map op waar DevTools de wijzigingen moet opslaan.
  • Wanneer u wijzigingen aanbrengt in DevTools, slaat DevTools een kopie van het gewijzigde bestand op in uw directory.
  • Wanneer u de pagina opnieuw laadt, serveert DevTools het lokale, gewijzigde bestand in plaats van de netwerkbron.

Om lokale overschrijvingen in te stellen:

  1. Open het paneel Bronnen .

  2. Open het tabblad Overrides .

    Het tabblad Overschrijvingen

    Figuur 2. Het tabblad Overrides

  3. Klik op Overrides instellen .

  4. Selecteer de map waarin u uw wijzigingen wilt opslaan.

  5. Klik boven in het venster 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 Elementenpaneel . Bewerk de HTML in plaats daarvan in het Bronnenpaneel .
  • Als u CSS bewerkt in het deelvenster Stijlen en de bron van die CSS een HTML-bestand is, slaat DevTools de wijziging niet op. Bewerk het HTML-bestand in plaats daarvan in het deelvenster Bronnen.
  • Werkruimten . DevTools koppelt automatisch netwerkbronnen aan een lokale repository. Wanneer u een wijziging aanbrengt in DevTools, wordt die wijziging ook in uw lokale repository opgeslagen.

Het tabblad Wijzigingen

Volg de wijzigingen die u lokaal in DevTools aanbrengt via het nieuwe tabblad Wijzigingen .

Het tabblad Wijzigingen

Figuur 3. Het tabblad Wijzigingen

Nieuwe toegankelijkheidstools

Met het nieuwe deelvenster Toegankelijkheid kunt u de toegankelijkheidseigenschappen van een element inspecteren en de contrastverhouding van tekstelementen in de Kleurenkiezer inspecteren om ervoor te zorgen dat ze toegankelijk zijn voor gebruikers met een visuele beperking of een kleurenblindheid.

Toegankelijkheidspaneel

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

Het paneel Toegankelijkheid

Figuur 4. Het deelvenster Toegankelijkheid toont de ARIA-kenmerken en berekende eigenschappen voor het element dat momenteel is geselecteerd in de DOM-boom op het deelvenster Elementen , evenals de positie ervan in de toegankelijkheidsboom.

Bekijk hieronder Rob Dodson's A11ycast over labelen om het deelvenster Toegankelijkheid 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 site toegankelijker voor gebruikers met een visuele beperking of een kleurenblindheid. Zie Kleur en contrast voor meer informatie over hoe de contrastverhouding de toegankelijkheid beïnvloedt.

Door het kleurcontrast van je tekstelementen te verbeteren, wordt je site bruikbaarder voor alle gebruikers. Met andere woorden: als je tekst grijs is met een witte achtergrond, is die voor iedereen moeilijk te lezen.

Inspectie van de contrastverhouding van het gemarkeerde H1-element.

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 stond, zou dat betekenen dat het voldoet aan de minimale aanbevolen contrastverhouding (AA) .

Klik op Meer weergeven Meer weergeven om het gedeelte Contrastverhouding uit te vouwen. 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 bijvoorbeeld de grijze kleur in Figuur 6 voldoet aan de aanbevelingen, betekent dit dat alle kleuren onder de witte lijn ook voldoen aan de aanbevelingen.

Het uitgebreide gedeelte Contrastverhouding.

Figuur 6. Het uitgebreide gedeelte Contrastverhouding

Het paneel Audits beschikt over een geautomatiseerde toegankelijkheidscontrole om ervoor te zorgen dat elk tekstelement op een pagina een voldoende contrastverhouding heeft.

Zie Run Lighthouse in Chrome DevTools of bekijk de A11ycast hieronder voor meer informatie over het gebruik van het paneel Audits om de toegankelijkheid te testen.

Nieuwe audits

Chrome 65 wordt geleverd met een geheel nieuwe categorie SEO-audits en veel nieuwe prestatie-audits.

Nieuwe SEO-audits

Als u ervoor zorgt dat uw pagina's alle audits in de nieuwe SEO- categorie doorstaan, kunt u uw positie in zoekmachines verbeteren.

De nieuwe SEO-categorie van audits.

Figuur 7. De nieuwe SEO- categorie van audits

Nieuwe prestatie-audits

Chrome 65 wordt ook geleverd met veel nieuwe prestatie-audits:

  • De opstarttijd van JavaScript is hoog
  • Gebruikt inefficiënt cachebeleid op statische activa
  • Vermijdt pagina-omleidingen
  • Document maakt gebruik van plug-ins
  • CSS verkleinen
  • JavaScript verkleinen

Prestaties zijn belangrijk! Nadat Mynet de laadsnelheid van hun pagina's met een factor 4 had verbeterd, brachten gebruikers 43% meer tijd op de site door, bekeken ze 34% meer pagina's, daalden de bouncepercentages met 24% en steeg de omzet per paginaweergave met 25%. Lees meer .

Tip! Als je de laadprestaties van je pagina's wilt verbeteren, maar niet weet waar je moet beginnen, probeer dan het Audits- paneel. Je geeft het een URL en het geeft je een gedetailleerd rapport met vele manieren om die pagina te verbeteren. Aan de slag !

Andere updates

Betrouwbare code-stepping met workers en asynchrone code

Chrome 65 brengt updates voor Step Into Stap in knop bij het stappen in code die berichten tussen threads doorgeeft, en asynchrone code. Als u het vorige stapgedrag wilt behouden, kunt u de nieuwe stap gebruiken. Stap knop.

Stappen in code die berichten tussen threads doorgeeft

Wanneer u code opent die berichten tussen threads doorstuurt, laat DevTools u nu zien wat er in elke thread gebeurt.

De app in Figuur 8 stuurt bijvoorbeeld een bericht door tussen de hoofdthread en de workerthread. Nadat de postMessage() aanroep in de hoofdthread is gestart, pauzeert DevTools in de onmessage handler in de workerthread. De onmessage handler zelf plaatst een bericht terug naar de hoofdthread. Door deze aanroep te starten, pauzeert DevTools weer in de hoofdthread.

Stappen in de berichtdoorgiftecode van Chrome 65.

Figuur 8. Stappen in de code voor het doorgeven van berichten in Chrome 65

Toen u in eerdere versies van Chrome op deze manier code invoerde, toonde Chrome u alleen de kant van de hoofdthread van de code, zoals u in Afbeelding 9 kunt zien.

Stappen in de berichtdoorgiftecode van Chrome 63.

Figuur 9. Stappen in de code voor het doorgeven van berichten in Chrome 63

Stappen in asynchrone code

Wanneer u asynchrone code start, gaat DevTools er nu vanuit dat u wilt pauzeren in de asynchrone code die uiteindelijk wordt uitgevoerd.

In Figuur 10 voert DevTools bijvoorbeeld na het starten van setTimeout() alle code die tot dat punt heeft geleid achter de schermen uit en pauzeert vervolgens in de functie die aan setTimeout() is doorgegeven.

Stappen in asynchrone code in Chrome 65.

Figuur 10. Stappen in asynchrone code in Chrome 65

Wanneer u in Chrome 63 op deze manier code invoerde, pauzeerde DevTools in de code terwijl deze chronologisch werd uitgevoerd, zoals u kunt zien in Afbeelding 11 .

Stap over op asynchrone code in Chrome 63.

Figuur 11. Stappen in asynchrone code in Chrome 63

Meerdere opnamen in het Prestatiepaneel

Met het paneel Prestaties kun je nu tijdelijk maximaal 5 opnamen opslaan. De opnamen worden verwijderd wanneer je je DevTools-venster sluit. Zie Aan de slag met het analyseren van runtimeprestaties om vertrouwd te raken met het paneel Prestaties .

Kiezen tussen meerdere opnamen in het paneel Prestaties.

Figuur 12. Selecteren tussen meerdere opnames in het Prestatiepaneel

Bonus: Automatiseer DevTools-acties met Puppeteer 1.0

Versie 1.0 van Puppeteer, een browserautomatiseringstool die wordt beheerd 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 screenshots:

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 veel 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 Snel starten voor meer informatie.

Je kunt Puppeteer ook gebruiken om DevTools-functies te tonen tijdens het browsen, zonder DevTools ooit expliciet te openen. Zie DevTools-functies gebruiken zonder DevTools te openen voor een voorbeeld.

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.

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.