Neuerungen in den Entwicklertools (Chrome 59)

Kayce Basques

Willkommen bei einer weiteren Ausgabe der Versionshinweise für die Entwicklertools. Video ansehen oder lesen Sie weiter, um zu erfahren, was es bei den Chrome-Entwicklertools in Chrome 59 Neues gibt.

Highlights

Neue Funktionen

Abdeckung des CSS- und JS-Codes

Auf dem neuen Tab Abdeckung finden Sie nicht verwendeten CSS- und JS-Code. Beim Laden oder eine Seite ausführen, sehen Sie auf dem Tab, wie viel Code verwendet wurde und wie viel Code geladen. 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:

  • Eine grün durchgehende Linie 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, 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. Beginnen Sie mit der Eingabe von Coverage und wählen Sie Abdeckung anzeigen aus.

Ganzseitige Screenshots

Im Video unten erfährst du, wie du einen Screenshot von oben erstellst. bis zum Ende der Seite.

Anfragen blockieren

Sie möchten wissen, wie sich Ihre Seite verhält, wenn ein bestimmtes Skript, Stylesheet oder andere Ressource nicht verfügbar ist? Klicken Sie im Netzwerk mit der rechten Maustaste auf die Anfrage. und wählen Sie Anfrage-URL blockieren aus. Neuer Tab Blockierung der Anfrage erscheint in der Leiste, in der du blockierte Anfragen verwalten kannst.

Anfrage-URL blockieren

Über „async Await“ wechseln

Bisher war der Versuch, Code wie im Snippet unten zu durchlaufen, Kopfzerbrechen. Du würdest mitten in test() sein, über eine Linie gehen und dann würden Sie vom Code 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 Debugging- fähigkeiten verbessern? Sehen Sie sich diese neuen Dokumente an:

Änderungen

Einheitliches Befehlsmenü

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 kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools