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 . Het deelvenster Toegankelijkheid toont de ARIA-attributen en berekende eigenschappen 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 Laat meer zien 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. Kom meer te weten .

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. Begin .

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 terug 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 prestatiepaneel

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 het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .

Chroom 126

Chroom 125

Chroom 124

Chroom 123

Chroom 122

Chroom 121

Chroom 120

Chroom 119

Chroom 118

Chroom 117

Chroom 116

Chroom 115

Chroom 114

Chroom 113

Chroom 112

Chroom 111

Chroom 110

Chroom 109

Chroom 108

Chroom 107

Chroom 106

Chroom 105

Chroom 104

Chroom 103

Chroom 102

Chroom 101

Chroom 100

Chroom 99

Chroom 98

Chroom 97

Chroom 96

Chroom 95

Chroom 94

Chroom 93

Chroom 92

Chroom 91

Chroom 90

Chroom 89

Chroom 88

Chroom 87

Chroom 86

Chroom 85

Chroom 84

Chroom 83

Chroom 82

Chrome 82 is geannuleerd .

Chroom 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59

,

Kayce Basques

Nieuwe functies die naar Devtools komen in Chrome 65 omvatten:

Lees verder of bekijk hieronder de videoverversie van deze release -notities.

Lokale overschrijvingen

Lokale overschrijvingen laten u wijzigingen aanbrengen in Devtools en die wijzigingen tussen pagina -laden bewaren. Eerder zouden alle wijzigingen die u in Devtools hebt aangebracht verloren gaan wanneer u de pagina opnieuw laadde. Lokale overschrijvingen werken voor de meeste bestandstypen, met een paar uitzonderingen na. Zie beperkingen .

Het aanhouden van een CSS -wijziging over pagina -lading met lokale overrijden.

Figuur 1 . Het aanhouden van een CSS -wijziging over pagina -lading met lokale overrijden

Hoe het werkt:

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

Om lokale overbruggen op te zetten:

  1. Open het paneel Bronnen .

  2. Open het tabblad Verhogen .

    Het tabblad overschrijvingen

    Figuur 2 . Het tabblad overschrijvingen

  3. Klik op Setup -overschrijvingen .

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

  5. Bovenaan uw viewport, klikt u op Toestaan ​​om Devtools lees- en schrijftoegang tot de map te geven.

  6. Breng uw wijzigingen aan.

Beperkingen

  • DevTools bewaart geen wijzigingen die zijn aangebracht in de DOM -boom van het elementenpaneel . Bewerk in plaats daarvan HTML in het bronnenpaneel .
  • Als u CSS in het Styles -deelvenster bewerkt en de bron van dat CSS een HTML -bestand is, wordt Devtools de wijziging niet opslaan. Bewerk het HTML -bestand in plaats daarvan in het bronnenpaneel .
  • Workspaces . DevTools brengt automatisch netwerkbronnen toe aan een lokale repository. Wanneer u een verandering in Devtools aanbrengt, wordt die verandering ook opgeslagen in uw lokale repository.

Het tabblad Wijzigingen

Volg wijzigingen die u lokaal aanbrengt in Devtools via het tabblad Nieuwe wijzigingen .

Het tabblad Wijzigingen

Figuur 3 . Het tabblad Wijzigingen

Nieuwe toegankelijkheidstools

Gebruik het nieuwe toegankelijkheidsvenster om de toegankelijkheidseigenschappen van een element te inspecteren en inspecteer de contrastverhouding van tekstelementen in de kleurenkiezer om ervoor te zorgen dat ze toegankelijk zijn voor gebruikers met low-vision-stoornissen of kleurafhankelijke tekortkomingen.

Toegankelijkheidsvenster

Gebruik het toegankelijkheidsvenster op het elementenpaneel om de toegankelijkheidseigenschappen van het momenteel geselecteerde element te onderzoeken.

Het toegankelijkheidsvenster

Figuur 4 . Het toegankelijkheidsvenster toont de ARIA -attributen en berekende eigenschappen voor het element dat momenteel is geselecteerd in de DOM -boom op het elementenpaneel , evenals de positie in de toegankelijkheidsboom

Bekijk hieronder de A11ycast van Rob Dodson op het labelen om het toegankelijkheidsvenster in actie te zien.

Contrastverhouding in de kleurenkiezer

De kleurenkiezer toont nu de contrastverhouding van tekstelementen. Door de contrastverhouding van tekstelementen te vergroten, wordt uw site toegankelijker voor gebruikers met low-visie beperkingen of tekortkomingen in de kleurvisie. Zie kleur en contrast om meer te weten te komen over hoe de contrastverhouding de toegankelijkheid beïnvloedt.

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

Inspecteren van de contrastverhouding van het gemarkeerde H1 -element.

Figuur 5 . De contrastverhouding van het gemarkeerde h1 -element inspecteren

In figuur 5 betekent de twee vinkjes naast 4.61 dat dit element voldoet aan de verbeterde aanbevolen contrastverhouding (AAA) . Als het maar één vinkje had, zou dat betekenen dat het de minimale aanbevolen contrastverhouding (AA) had voldaan.

Klik op meer weergeven Laat meer zien om de sectie Contrastverhouding uit te breiden. De witte lijn in het kleurspectrumbox vertegenwoordigt de grens tussen kleuren die voldoen aan de aanbevolen contrastverhouding, en die die dat niet doen. Omdat de grijze kleur in figuur 6 bijvoorbeeld aan aanbevelingen voldoet, betekent dit dat alle kleuren onder de witte lijn ook voldoen aan aanbevelingen.

De sectie Contrast Ratio.

Figuur 6 . De sectie Expanded Contrast Ratio

Het auditspaneel heeft een geautomatiseerde toegankelijkheidsaudit 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 om te leren hoe u het auditspaneel kunt gebruiken om de toegankelijkheid te testen.

Nieuwe audits

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

Nieuwe SEO -audits

Ervoor zorgen dat uw pagina's elk van de audits in de nieuwe SEO -categorie doorgeven, kan helpen bij het verbeteren van uw zoekmachine -ranglijsten.

De nieuwe SEO -categorie audits.

Figuur 7 . De nieuwe SEO -categorie audits

Nieuwe prestatie -audits

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

  • JavaScript-opstarttijd is hoog
  • Gebruikt inefficiënt cachebeleid voor statische activa
  • Vermijdt pagina omleidingen
  • Document gebruikt plug -ins
  • Minify CSS
  • Minify JavaScript

PERF Matters! Nadat MyNet hun pagina -laadsnelheid met 4X had verbeterd, brachten gebruikers 43% meer tijd aan de site door, bekeken 34% meer pagina's, de bouncepercentages daalden met 24% en de omzet stegen met 25% per artikel PageView. Kom meer te weten .

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

Andere updates

Betrouwbare code die stappen met werknemers en asynchrone code

Chrome 65 brengt updates voor de stap in Stappen in knop bij het stappen in code die berichten tussen threads en asynchrone code doorgeeft. Als u het vorige stappengedrag wilt, kunt u de nieuwe stap gebruiken Stap knop, in plaats daarvan.

Stappen in code die berichten tussen threads doorgeeft

Wanneer u in code stapt 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 hij de oproep na de postMessage() op de hoofdthread heeft ingestapt, pauzeert Devtools in de onmessage -handler in de werknemersdraad. De onmessage -handler plaatst zelf een bericht terug naar de hoofdthread. In die oproep stappen pauzeert Devtools terug in de hoofdthread.

Instappen in het passerende code in Chrome 65.

Figuur 8 . Instappen in het passerende code in Chrome 65

Toen je in eerdere versies van Chrome in code stapte, liet Chrome je alleen de hoofdthread-side van de code zien, zoals je kunt zien in figuur 9 .

Instappen in het passerende code in Chrome 63.

Figuur 9 . Instappen in het passerende code in Chrome 63

Stap in asynchrone code

Bij het stappen in asynchrone code, gaat Devtools nu aan dat je wilt pauzeren in de asynchrone code die uiteindelijk loopt.

Bijvoorbeeld, in figuur 10 na het stappen in setTimeout() , voert DevTools alle code uit die tot dat punt achter de schermen voorafgaat en pauzeert vervolgens in de functie die wordt doorgegeven aan setTimeout() .

Stap in asynchrone code in Chrome 65.

Figuur 10 . Stap in asynchrone code in Chrome 65

Toen je in Code zoals deze in Chrome 63 stapte, pauzeerde Devtools in code terwijl het chronologisch liep, zoals je kunt zien in figuur 11 .

Stap in asynchrone code in Chrome 63.

Figuur 11 . Stap in asynchrone code in Chrome 63

Meerdere opnames in het prestatiepaneel

Met het prestatiepaneel kunt u nu tijdelijk maximaal 5 opnames besparen. De opnames worden verwijderd wanneer u uw devTools -venster sluit. Zie Aan de slag gaan met het analyseren van runtime -prestaties om comfortabel te worden met het prestatiepaneel .

Selecteren tussen meerdere opnames in het prestatiepaneel.

Figuur 12 . Selecteren tussen meerdere opnames in het prestatiepaneel

Bonus: Automate Devtools -acties met Puppeteer 1.0

Versie 1.0 van Puppeteer, een browserautomatiseringstool dat 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 vastleggen 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 heeft ook API's voor veel over het 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 om meer te leren.

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

Download de voorbeeldkanalen

Overweeg het gebruik van de Chrome Canary , Dev of Beta als uw standaardontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, test geavanceerde webplatform-API's en vinden problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome Devtools -team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders dat verband houdt met Devtools.

  • Dien een suggestie of feedback aan ons via CRBUG.com .
  • Meld een probleem met DevTools met behulp van de meer optiesMeer > Help > melden een devTools -problemen in devtools.
  • Tweet op @chromedevtools .
  • Laat reacties achter op ons wat nieuw is in devtools YouTube -video's of devtools tips YouTube -video's .

Wat is er nieuw in Devtools

Een lijst van alles wat is behandeld in de serie What's New in Devtools .

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled .

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59