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 die Sie brauchen.

Tab „Abdeckung“

Wenn Sie auf eine URL klicken, wird die Datei im Bereich Quellen mit einer Aufschlüsselung angezeigt. welche Codezeilen ausgeführt wurden.

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.
  • Eine Codezeile, die sowohl rot als auch grün ist, wie Zeile 3 im Screenshot oben, bedeutet, dass nur ein Teil des Codes in dieser Zeile ausgeführt wird. Beispiel: Eine ternäre ist Ausdruck wie var b = (a > 0) ? a : 0 sowohl rot als auch grün.

So öffnen Sie den Tab Abdeckung:

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

Ganzseitige Screenshots

Im Video unten wird gezeigt, 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 der Versuch, Code wie im Snippet unten zu durchlaufen, Kopfzerbrechen. Sie befinden sich in der Mitte von test(), überspringen eine Zeile und werden dann vom Code für setInterval() unterbrochen. Wenn Sie sich nun asynchronem Code wie test() verwendet, führt die Entwicklertools von der ersten bis zur letzten Zeile Einheitlichkeit.

  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, werden Sie feststellen, wird ein Größer-als-Zeichen (>) vorangestellt. Das liegt daran, dass der Befehl Das Menü wurde mit dem Menü Open File (Datei öffnen) zusammengeführt. Befehlstaste + O (Mac) oder Strg + O (Windows, Linux)

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen können Sie über die neuen Funktionen und Änderungen im Beitrag oder über andere Themen im Zusammenhang mit den Entwicklertools diskutieren.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools