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 können Sie nicht verwendeten 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 senden, der erforderlich ist.

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.
  • Durchgehend rot 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

Im Video unten sehen Sie, wie Sie einen Screenshot von oben nach unten 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 sehr mühsam, Code wie das folgende Snippet Schritt für Schritt 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 konsequent 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öchten Sie Ihre Fähigkeiten im Bereich Debugging verbessern? Hier sind einige neuere Dokumente:

Änderungen

Unified Command Menu

Wenn Sie jetzt das Befehlsmenü öffnen, wird vor dem Befehl ein „Größer als“-Zeichen (>) eingefügt. Das liegt daran, dass das Befehlsmenü mit dem Menü Datei öffnen zusammengeführt wurde. Dieses Menü wird mit der Tastenkombination Befehlstaste + O (Mac) oder Strg + O (Windows, Linux) geöffnet.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, 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 den DevTools

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