Mozilla hat diese Woche neue Updates für Firefox DevTools angekündigt. Ihr Entwicklungstool zum Untersuchen, Ändern und Debuggen von HTML, CSS und JavaScript auf Computern oder Mobilgeräten.
Die Updates, die das Firefox DevTools-Team angekündigt hat, beziehen sich hauptsächlich auf das Debuggen mit Firefox DevTools und sie zielen darauf ab, Entwicklern mehr Zuverlässigkeit und Leistung zu bieten, insbesondere beim Erstellen moderner Webanwendungen.
Mit diesem neuen Update Mozilla hat Benutzern von Firefox 67 und höher ein solides Debugging-Erlebnis versprochen.
Das Debuggen von Skripten ist eine der leistungsstärksten und komplexesten Produktivitätsfunktionen in DevTools.
Mit der aktualisierten Version von Firefox DevTools für Firefox 67 können Entwickler ihren Debugging-Prozess schneller und zuverlässiger gestalten und die Leistung verbessern.
Was ist neu in Firefox DevTools?
Nach Angaben des Firefox DevTools-Teams lDie neuen DevTools-Funktionen drehen sich um vier Hauptpunkte: einschließlich
- Schnellste Ladezeit
- Eine umgestaltete Unterstützung für Quellkarten
- Eine Reduzierung des Overheads, wenn der Debugger nicht zielgerichtet ist
- Behebung einiger Probleme im Zusammenhang mit fehlenden Haltepunkten, falschen Skript-Interrupts und vielem mehr.
DevTools Firefox 30% schneller zu öffnen
Die Debugger-Öffnungszeit ist jetzt 30% schneller als in früheren Versionen. Das DevTools Firefox-Team hat dies erklärt Sie haben die schlechteste Leistung entfernt, die der Debugger verursacht hat öffnete sich langsam, Dies hat nach Leistungstests gezeigt, dass der Debugger jetzt 30% schneller ist.
Verbesserte Quellkarte
Dann sagte das Team das eine überarbeitete und schnellere Quellkartenquelle gibt die Illusion, dass Sie Ihren Code debuggen, nicht die kompilierte Ausgabe von Babel, Webpack, TypeScript, view.js usw.
Eine Quellzuordnung ist eine Datei, über die der Debugger ausgeführten Code mit den ursprünglichen Quelldateien verknüpfen kann, sodass der Browser die ursprüngliche Quelle neu erstellen und im Debugger anzeigen kann.
Das Generieren korrekter Kartenquellen kann schwierig sein, erklärte das Team, das Tools (Babel, Vue.js usw.) zum Nutzen des gesamten Ökosystems entwickelt hat.
Dank der schnelleren Unterstützung der Quellzuordnung (und anderer zusätzlicher Arbeiten) werden Vorschauen jetzt viel schneller angezeigt, wenn Sie den Mauszeiger über eine Variable halten, während die Ausführung angehalten wird.
Ferner durch Kombinieren der Kartenquellen mit dem Babel-Parser der Firefox-Debugger Jetzt können Sie eine Vorschau der ursprünglichen Variablen Ihres Interesses anzeigen und verstecken Sie unnötige Informationen vor Compilern und Paketen.
Es kann sogar auf der Konsole funktionieren und die IDs der Benutzer automatisch in ihre tatsächlichen, detaillierten Namen im Hintergrund auflösen. Aufgrund seiner Leistung müssen Sie diese Funktion separat aktivieren, indem Sie das Kontrollkästchen "Map" im Bereich "Scopes" des Debuggers aktivieren.
Davon abgesehen, In diesem Firefox DevTools-Update wurden viele langjährige Fehler in der Debugger-Architektur behoben Lösen einiger der häufigsten und frustrierendsten Probleme im Zusammenhang mit fehlenden Haltepunkten und dem Einbruch in das falsche Skript.
Das Tool wurde ebenfalls erweitert, damit JavaScript-Entwickler transparenter debuggen können.
Wie das DevTools Firefox-Team erklärte, nutzen Webentwickler heute das moderne Web und sollten in der Lage sein, von den erstklassigen Konzepten in DevTools zu profitieren.
Mithilfe des neuen Bedienfelds „Threads“ können Sie zwischen verschiedenen Ausführungskontexten wechseln und diese unabhängig voneinander anhalten. Auf diese Weise können Skripte im selben Debugger-Panel wie in anderen modernen Browsern debuggt werden.
Trotzdem glauben einige, dass das Webentwicklungstool von Firefox bei Chrome immer noch im Rückstand ist.
Demnach fehlen noch einige Firefox DevTools-Funktionen, die in Chrome DevTools angezeigt werden, z. B. das Debuggen von Web-Sockets.
Chrome DevTools ist eine Reihe von Webentwicklungstools, die direkt in den Google Chrome-Browser integriert sind.