Wat is er nieuw in DevTools (Chrome 65)

Kayce Basken

Nieuwe functies die naar DevTools komen in Chrome 65 zijn onder meer:

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

Lokale overschrijvingen

Met lokale overschrijvingen kunt u wijzigingen aanbrengen in DevTools en deze wijzigingen behouden tijdens het laden van pagina's. 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 doorzetten bij het laden van pagina's met lokale overschrijvingen.

Figuur 1 . Een CSS-wijziging doorzetten bij het laden van pagina's met lokale overschrijvingen

Hoe het werkt:

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

Lokale overschrijvingen instellen:

  1. Open het paneel Bronnen .

  2. Open het tabblad Overschrijvingen .

    Het tabblad Overschrijvingen

    Figuur 2 . Het tabblad Overschrijvingen

  3. Klik op Instellingsoverschrijvingen .

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

  5. Klik bovenaan uw viewport 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 in plaats daarvan HTML in het paneel Bronnen .
  • 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 in plaats daarvan het HTML-bestand in het deelvenster Bronnen.
  • Werkruimtes . DevTools wijst netwerkbronnen automatisch toe aan een lokale opslagplaats. Telkens wanneer u een wijziging aanbrengt in DevTools, wordt die wijziging ook opgeslagen in uw lokale repository.

Het tabblad Wijzigingen

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

Het tabblad Wijzigingen

Figuur 3 . Het tabblad Wijzigingen

Nieuwe toegankelijkheidstools

Gebruik het nieuwe deelvenster Toegankelijkheid om de toegankelijkheidseigenschappen van een element te inspecteren, en inspecteer de contrastverhouding van tekstelementen in de Kleurkiezer om er zeker van te zijn dat ze toegankelijk zijn voor gebruikers met een visuele beperking of een gebrek aan kleurenzicht.

Toegankelijkheidsvenster

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

Het deelvenster Toegankelijkheid

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

Bekijk Rob Dodson's A11ycast over labeling hieronder om het deelvenster Toegankelijkheid in actie te zien.

Contrastverhouding in de Kleurkiezer

De Kleurkiezer toont u nu de contrastverhouding van tekstelementen. Door de contrastverhouding van tekstelementen te vergroten, wordt uw site toegankelijker voor gebruikers met een visuele beperking of een tekort aan kleurenzicht. Zie Kleur en contrast voor meer informatie over hoe de contrastverhouding de toegankelijkheid beïnvloedt.

Door het kleurcontrast van uw tekstelementen te verbeteren, wordt uw site beter bruikbaar voor alle gebruikers. Met andere woorden: als uw tekst grijs is met een witte achtergrond, is deze 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 maar één vinkje stond, zou dat betekenen dat het voldeed aan de minimaal aanbevolen contrastverhouding (AA) .

Klik op Meer weergeven Toon meer om de sectie Contrastverhouding uit te vouwen. De witte lijn in het vak Kleurspectrum geeft de grens weer tussen kleuren die aan de aanbevolen contrastverhouding voldoen, en kleuren die dat niet doen. Omdat de grijze kleur in Figuur 6 bijvoorbeeld aan de aanbevelingen voldoet, betekent dit dat alle kleuren onder de witte lijn ook aan de aanbevelingen voldoen.

De uitgebreide sectie Contrastverhouding.

Figuur 6 . De uitgebreide sectie Contrastverhouding

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

Zie Lighthouse uitvoeren in Chrome DevTools , of bekijk de A11ycast hieronder, om te leren hoe u het deelvenster Audits kunt gebruiken 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
  • Maakt gebruik van inefficiënt cachebeleid voor statische assets
  • Vermijdt pagina-omleidingen
  • Document gebruikt 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 met 25% per artikelpaginaweergave. Meer informatie .

Tip! Als u de laadprestaties van uw pagina's wilt verbeteren, maar niet weet waar u moet beginnen, probeer dan het paneel Audits . U geeft het een URL en het geeft u een gedetailleerd rapport over veel verschillende manieren waarop u die pagina kunt verbeteren. Ga aan de slag .

Andere updates

Betrouwbare code-stepping met werkers en asynchrone code

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

In code stappen die berichten tussen threads doorgeeft

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

De app in Figuur 8 geeft bijvoorbeeld een bericht door tussen de hoofdthread en de werkthread. Nadat DevTools in de postMessage() aanroep op de hoofdthread is gestapt, pauzeert DevTools in de onmessage handler in de worker-thread. De onmessage handler zelf plaatst een bericht terug in de hoofdthread. Als u in dat gesprek stapt, wordt DevTools weer in de hoofdthread gepauzeerd.

Code voor het doorgeven van berichten invoeren in Chrome 65.

Figuur 8 . Code voor het doorgeven van berichten invoeren in Chrome 65

Toen u in eerdere versies van Chrome in een dergelijke code stapte, liet Chrome u alleen de hoofdthreadzijde van de code zien, zoals u kunt zien in Figuur 9 .

In Chrome 63 overstappen op code voor het doorgeven van berichten.

Figuur 9 . In Chrome 63 overstappen op code voor het doorgeven van berichten

In asynchrone code stappen

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

In Figuur 10 voert DevTools bijvoorbeeld, nadat hij in setTimeout() is gestapt, alle code uit die naar dat punt leidt, achter de schermen, en pauzeert vervolgens in de functie die wordt doorgegeven aan setTimeout() .

Asynchrone code invoeren in Chrome 65.

Figuur 10 . Asynchrone code invoeren in Chrome 65

Toen je in Chrome 63 in een dergelijke code stapte, pauzeerde DevTools in de code terwijl deze chronologisch werd uitgevoerd, zoals je kunt zien in Figuur 11 .

Asynchrone code invoeren in Chrome 63.

Figuur 11 . Asynchrone code invoeren in Chrome 63

Meerdere opnames in het paneel Prestaties

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

Kiezen tussen meerdere opnames in het paneel Prestaties.

Figuur 12 . Kiezen tussen meerdere opnames in het paneel Prestaties

Bonus: automatiseer DevTools-acties met Puppeteer 1.0

Versie 1.0 van Puppeteer, een browserautomatiseringstool die wordt onderhouden door het Chrome DevTools-team, is nu uit. U kunt Puppeteer gebruiken om veel taken te automatiseren die voorheen alleen beschikbaar waren via DevTools, 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 heeft ook 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 Snelle start voor meer informatie.

U kunt Puppeteer ook gebruiken om DevTools-functies bloot te leggen tijdens het browsen zonder DevTools ooit expliciet te openen. Zie DevTools-functies gebruiken zonder DevTools te openen voor een voorbeeld.

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 .