Neuerungen in den Entwicklertools (Chrome 59)

Kayce Basques

Willkommen bei den DevTools-Versionshinweisen. Sehen Sie sich das Video unten an oder lesen Sie weiter, um mehr über die Neuigkeiten in den Chrome-Entwicklertools in Chrome 59 zu erfahren.

Highlights

Neue Funktionen

Abdeckung von CSS- und JS-Code

Auf dem neuen Tab Abdeckung finden Sie nicht verwendeten CSS- und JS-Code. Wenn Sie eine Seite laden oder ausführen, sehen Sie auf dem Tab, wie viel Code verwendet wurde und wie viel. Sie können die Größe Ihrer Seiten reduzieren, indem Sie nur den erforderlichen Code senden.

Tab „Abdeckung“

Wenn Sie auf eine URL klicken, wird die entsprechende Datei im Bereich Quellen mit einer Aufschlüsselung der ausgeführten Codezeilen angezeigt.

Aufschlüsselung der Codeabdeckung im Bereich „Quellen“

Jede Codezeile ist farblich gekennzeichnet:

  • Durchgehend grüne Codezeilen wurden ausgeführt.
  • Ein durchgehend rotes Licht bedeutet, dass die Aktion nicht ausgeführt wurde.
  • Wenn eine Codezeile sowohl rot als auch grün ist, wie Zeile 3 im Screenshot oben, wurde nur ein Teil des Codes in dieser Zeile ausgeführt. Ein Ternärausdruck wie var b = (a > 0) ? a : 0 wird beispielsweise 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.

Screenshots der ganzen Seite

Sehen Sie sich das Video unten an, um zu erfahren, wie Sie einen Screenshot vom oberen bis zum unteren Rand der Seite erstellen.

Anfragen blockieren

Sie möchten sehen, wie sich Ihre Seite verhält, wenn ein bestimmtes Script, 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 seitlichen Menü wird der neue Tab Anfrageblockierung angezeigt, auf dem Sie blockierte Anfragen verwalten können.

Anfrage-URL blockieren

Async/await-Anweisungen überspringen

Bisher war es ziemlich mühsam, Code wie im folgenden Snippet durchzugehen. Sie befinden sich in der Mitte von test(), überspringen eine Zeile und werden dann vom Code für setInterval() unterbrochen. Wenn Sie jetzt asynchronen Code wie test() durchgehen, gehen die Entwicklertools einheitlich von der ersten bis zur letzten Zeile.

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

  // do some work in background.
  setInterval(() => 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);
  }

PS: Möchtest du deine Fähigkeiten im Bereich Debugging verbessern? Sehen Sie sich diese neuen Dokumente an:

Änderungen

Unified Command Menu

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. Dieses Menü ist Befehlstaste + O (Mac) oder Strg + O (Windows, Linux).

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.