Neuerungen in den Entwicklertools (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub

Willkommen zu einer weiteren Ausgabe der DevTools-Versionshinweise. Im folgenden Video oder im Text darunter erfahren Sie, was es in den Chrome-Entwicklertools in Chrome 59 Neues gibt.

Highlights

Neue Funktionen

CSS- und JS-Codeabdeckung

Mit dem neuen Tab Abdeckung können Sie ungenutzten CSS- und JS-Code finden. Wenn Sie eine Seite laden oder ausführen, sehen Sie auf dem Tab, wie viel Code verwendet und wie viel geladen wurde. Sie können die Größe Ihrer Seiten reduzieren, indem Sie nur den Code bereitstellen, den Sie benötigen.

Tab „Abdeckung“

Wenn Sie auf eine URL klicken, wird die Datei im Bereich Quellen angezeigt. Außerdem sehen Sie, welche Codezeilen ausgeführt wurden.

Aufschlüsselung der Codeabdeckung im Quellenbereich

Jede Zeile des Codes ist farblich gekennzeichnet:

  • Durchgehend grün bedeutet, dass die Codezeile ausgeführt wurde.
  • Durchgehend rot bedeutet, dass die Ausführung nicht erfolgt ist.
  • Eine Codezeile, die sowohl rot als auch grün ist, z. B. Zeile 3 im Screenshot oben, bedeutet, dass nur ein Teil des Codes in dieser Zeile ausgeführt wurde. Beispielsweise wird ein ternärer Ausdruck wie var b = (a > 0) ? a : 0 sowohl rot als auch grün dargestellt.

So öffnen Sie den Tab Abdeckung:

  1. Öffnen Sie das Befehlsmenü.
  2. Geben Sie Coverage ein und wählen Sie Abdeckung anzeigen aus.

Ganzseitige Screenshots

Im folgenden Video erfahren Sie, wie Sie einen Screenshot von oben bis unten aufnehmen.

Anfragen blockieren

Möchten Sie sehen, wie sich Ihre Seite verhält, wenn ein bestimmtes Skript, Stylesheet oder eine andere Ressource nicht verfügbar ist? Klicken Sie im Bereich Netzwerk mit der rechten Maustaste auf die Anfrage und wählen Sie Anfrage-URL blockieren aus. Im Drawer wird ein neuer Tab Anfrage blockieren eingeblendet, auf dem Sie blockierte Anfragen verwalten können.

Anfrage-URL blockieren

„async/await“ überspringen

Bisher war es mühsam, Code wie das Snippet unten zu durchlaufen. Sie wären mitten in test(), würden eine Zeile überspringen und dann von setInterval() unterbrochen werden. Wenn Sie jetzt asynchronen Code wie test() durchgehen, werden die Zeilen in den Entwicklertools konsistent vom Anfang bis zum Ende durchlaufen.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInt>erval(() = 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

P.S.: Möchten Sie Ihre Debugging-Fähigkeiten verbessern? Sehen Sie sich diese relativ neuen Dokumente an:

Änderungen

Vereinheitlichtes Befehlsmenü

Wenn Sie jetzt das Befehlsmenü öffnen, sehen Sie, dass Ihrem Befehl ein Größer-als-Zeichen (>) vorangestellt ist. Das liegt daran, dass das Befehlsmenü mit dem Menü Datei öffnen zusammengeführt wurde, das über die Tastenkombination Befehl+O (Mac) oder Strg+O (Windows, Linux) aufgerufen wird.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.