Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Was ist neu in DevTools (Chrome 65)

Powered by Google Translate

Zu den neuen Funktionen, die in Chrome 65 zu DevTools gehören, gehören:

Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Versionshinweise unten an.

Local

** Lokale Überschreibungen ** ermöglichen es Ihnen, Änderungen in DevTools vorzunehmen und diese Änderungen beim Laden der Seite beizubehalten. Zuvor gingen alle Änderungen in DevTools beim erneuten Laden der Seite verloren. ** Lokale Überschreibungen ** funktionieren für die meisten Dateitypen mit einigen Ausnahmen. Siehe Limitations .

Persisting a CSS change across page loads with Local Overrides.
Figure 1. Persisting a CSS change across page loads with Local Overrides

Wie es funktioniert:

  • Sie geben ein Verzeichnis an, in dem DevTools Änderungen speichern soll.
  • Wenn Sie Änderungen in DevTools vornehmen, speichert DevTools eine Kopie der modifizierten Datei in Ihrem Verzeichnis.
  • Wenn Sie die Seite neu laden, bedient DevTools die lokale, geänderte Datei und nicht die Netzwerkressource.

So richten Sie ** lokale Überschreibungen ** ein:

  1. Öffnen Sie das Bedienfeld ** Quellen. 1. Öffnen Sie die Registerkarte ** Überschreibungen **.

    The Overrides tab
    Figure 2. The Overrides tab

  2. Klicken Sie auf ** Setup-Überschreibungen **. 1. Wählen Sie das Verzeichnis, in dem Sie Ihre Änderungen speichern möchten. 1. Klicken Sie oben im Ansichtsfenster auf ** Zulassen **, damit DevTools Lese- und Schreibzugriff auf das Verzeichnis erhält. 1. Nehmen Sie Ihre Änderungen vor.

Einschränkungen

  • DevTools speichert keine Änderungen, die in der ** DOM-Struktur ** des Bedienfelds ** Elemente vorgenommen wurden. Bearbeiten Sie stattdessen HTML im Bereich ** Quellen **.
  • Wenn Sie CSS im Bereich ** Stile bearbeiten und die Quelle dieses CSS eine HTML-Datei ist, wird DevTools die Änderung nicht speichern. Bearbeiten Sie stattdessen die HTML-Datei im Bereich ** Quellen **.
  • Workspaces . DevTools ordnet Netzwerkressourcen automatisch einem lokalen Repository zu. Wenn Sie Änderungen in DevTools vornehmen, wird diese Änderung auch in Ihrem lokalen Repository gespeichert.

Die Registerkarte Änderungen

Verfolgen Sie Änderungen, die Sie lokal in DevTools vornehmen, über die neue Registerkarte ** Changes **.

The Changes tab
Figure 3. The Changes tab

Neue

Verwenden Sie den neuen Bereich ** Eingabehilfe **, um die Eingabehilfefunktionen eines Elements zu prüfen, und überprüfen Sie das Kontrastverhältnis der Textelemente im ** Farbwähler **, um sicherzustellen, dass sie für Benutzer mit Sehbehinderung oder Farbe zugänglich sind -vision Mängel.

Zugänglichkeitsfenster

Verwenden Sie den Bereich ** Eingabehilfen ** im Bereich ** Elemente **, um die Eingabehilfefunktionen des aktuell ausgewählten Elements zu untersuchen.

The Accessibility pane shows the ARIA attributes and computed
            properties for the element that's currently selected in the DOM Tree of
            the Elements panel, as well as its position in the accessibility tree.
Figure 4. The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree on the Elements panel, as well as its position in the accessibility tree

Sehen Sie sich die A11ycast-Datei von Rob Dodson an, indem Sie auf die Beschriftung unten klicken, um den Bereich ** Barrierefreiheit ** in Aktion zu sehen.

Kontrastverhältnis im

Der Color Picker zeigt nun das Kontrastverhältnis von Textelementen. Durch die Erhöhung des Kontrastverhältnisses von Textelementen wird Ihre Website für Benutzer mit Sehbehinderungen oder Farbfehlsichtigkeiten besser zugänglich. Unter Color and contrast erfahren Sie mehr darüber, wie sich das Kontrastverhältnis auf die Zugänglichkeit auswirkt.

Durch die Verbesserung des Farbkontrastes Ihrer Textelemente wird Ihre Website für alle Benutzer besser nutzbar. Mit anderen Worten, wenn Ihr Text grau mit einem weißen Hintergrund ist, ist es schwer für jeden zu lesen.

Inspecting the contrast ratio of the highlighted H1 element.
Figure 5. Inspecting the contrast ratio of the highlighted h1 element

In ** Abbildung 5 ** bedeuten die zwei Häkchen neben ** 4.61 **, dass dieses Element die enhanced recommended contrast ratio (AAA) . Wenn es nur ein Häkchen hätte, würde das bedeuten, dass es minimum recommended contrast ratio (AA) .

Klicken Sie auf ** Mehr anzeigen **! Show More zum Erweitern des Abschnitts ** Contrast Ratio **. Die weiße Linie im Feld ** Farbspektrum ** stellt die Grenze zwischen Farben dar, die das empfohlene Kontrastverhältnis erfüllen, und solchen, die dies nicht tun. Zum Beispiel, da die graue Farbe in ** Abbildung 6 ** entspricht den Empfehlungen, dh alle Farben unter der weißen Linie entsprechen auch den Empfehlungen.

The expanded Contrast Ratio section.
Figure 6. The expanded Contrast Ratio section

Das Bedienfeld ** Audits ** verfügt über eine automatische Prüfung der Barrierefreiheit, um dies sicherzustellen * Jedes * Textelement auf einer Seite hat ein ausreichendes Kontrastverhältnis.

Siehe Run Lighthouse in Chrome DevTools oder sehen Sie sich die A11-Sendung an, um zu erfahren, wie Sie mit dem Bedienfeld ** Audits ** die Erreichbarkeit testen.

Neue Audits

Chrome 65 wird mit einer ganz neuen Kategorie von SEO-Audits und vielen neuen Performance-Audits ausgeliefert.

Neue SEO Audits

Wenn Sie sicherstellen, dass Ihre Seiten die einzelnen Prüfungen in der neuen ** SEO ** -Kategorie bestehen, können Sie Ihre Suchmaschinen-Rankings verbessern.

The new SEO category of audits.
Figure 7. The new SEO category of audits

Neue Leistungsaudits

Chrome 65 wird außerdem mit vielen neuen Leistungsprüfungen ausgeliefert:

  • Die Bootzeit von JavaScript ist hoch
  • Verwendet eine ineffiziente Cache-Richtlinie für statische Assets
  • Vermeidet Seitenumleitungen
  • Das Dokument verwendet Plugins
  • CSS reduzieren
  • Reduzieren Sie JavaScript

Andere Updates

Zuverlässiges Code-Stepping mit Arbeitern und asynchronem Code

Chrome 65 bringt Updates zum ** Step Into **! Step Into Schaltfläche beim Step Into in Code, der Nachrichten zwischen Threads und asynchronem Code übergibt. Wenn Sie das vorherige Schrittverhalten möchten, können Sie den neuen ** Schritt ** verwenden! Step Taste stattdessen.

Schritt in Code, der Nachrichten zwischen Threads

Wenn Sie in Code einsteigen, der Nachrichten zwischen Threads weitergibt, zeigt DevTools Ihnen nun an, was in jedem Thread passiert.

Beispielsweise übergibt die App in ** Abbildung 8 ** eine Nachricht zwischen dem Hauptthread und dem Arbeitsthread. Nach dem Einstieg in den postMessage() Aufruf des Hauptthreads hält DevTools im onmessage Handler im Worker-Thread an. Der onmessage Handler selbst onmessage eine Nachricht zurück an den Hauptthread. Wenn Sie in diesen * Anruf * eintreten, wird DevTools im Hauptthread zurückgehalten.

Stepping into message-passing code in Chrome 65.
Figure 8. Stepping into message-passing code in Chrome 65

Wenn Sie in früheren Chrome-Versionen auf Code wie diesen gegriffen haben, zeigte Ihnen Chrome nur die Haupt-Thread-Seite des Codes, wie Sie in ** Abbildung 9 ** sehen können.

Stepping into message-passing code in Chrome 63.
Figure 9. Stepping into message-passing code in Chrome 63

In asynchronen Code

Beim Übergang in asynchronen Code geht DevTools nun davon aus, dass Sie den asynchronen Code, der schließlich ausgeführt wird, anhalten möchten.

Zum Beispiel führt setTimeout() in ** Abbildung 10 ** nach dem Einstieg in setTimeout() gesamten Code aus, der zu diesem Punkt hinter den Kulissen führt, und hält dann die Funktion an, die an setTimeout() .

Stepping into asynchronous code in Chrome 65.
Figure 10. Stepping into asynchronous code in Chrome 65

Wenn Sie in Chrome 63 Code wie diesen eingingen, pausierte DevTools im Code, als er chronologisch lief, wie Sie in ** Abbildung 11 ** sehen können.

Stepping into asynchronous code in Chrome 63.
Figure 11. Stepping into asynchronous code in Chrome 63

Mehrere Aufnahmen im Performance-Panel

Im Panel ** Leistung können Sie jetzt bis zu 5 Aufnahmen speichern. Die Aufnahmen werden gelöscht, wenn Sie Ihr DevTools-Fenster schließen. Siehe Get Started with Analyzing Runtime Performance , um sich mit dem Panel ** Leistung ** Get Started with Analyzing Runtime Performance zu machen.

Selecting between multiple recordings in the Performance panel.
Figure 12. Selecting between multiple recordings in the Performance panel

Bonus: Automatisieren Sie DevTools Aktionen mit Puppeteer 1.0

Version 1.0 von Puppeteer, einem Browser-Automatisierungstool, das vom Chrome DevTools-Team verwaltet wird, ist jetzt verfügbar. Sie können Puppeneer verwenden, um viele Aufgaben zu automatisieren, die zuvor nur über DevTools verfügbar waren, z. B. das Erfassen von 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();
})();

Es hat auch APIs für viele allgemein nützliche Automatisierungsaufgaben, z. B. das Generieren von PDFs:

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();
})();

Siehe Quick Start , um mehr zu erfahren.

Sie können Puppenspieler auch verwenden, um die DevTools-Funktionen beim Browsen freizulegen, ohne DevTools explizit zu öffnen. Ein Beispiel finden Sie in Using DevTools Features Without Opening DevTools .

Eine Anfrage des DevTools-Teams: Betrachten Sie Canary

Wenn Sie auf Mac oder Windows arbeiten, sollten Sie Chrome Canary als Standardentwicklungsbrowser verwenden. Wenn Sie einen Fehler oder eine Änderung melden, die Ihnen nicht gefällt, während sie noch in Canary ist, kann das DevTools-Team Ihr Feedback deutlich schneller ansprechen.

Feedback

Der beste Ort, um die Features oder Änderungen zu besprechen, die Sie hier sehen, ist google-chrome-developer-tools@googlegroups.com mailing list . Sie können uns auch bei @ChromeDevTools twittern, wenn Sie @ChromeDevTools Zeit haben. Wenn Sie sicher sind, dass Sie in DevTools einen Fehler gefunden haben, bitte open an issue .

Im devtools-whatsnew Tag finden Sie Links zu allen früheren DevTools-Versionshinweisen.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!