Was ist neu in DevTools: Cross-Browser-Edition

Browser-Entwicklertools entwickeln sich ständig weiter, wobei ständig neue und verbesserte Funktionen hinzugefügt werden. Es ist schwer, den Überblick zu behalten, besonders wenn Sie mehr als einen Browser verwenden. Bei so viel Angebot ist es nicht verwunderlich, dass wir uns überfordert fühlen und die Funktionen nutzen, die wir bereits kennen, anstatt mit den Neuheiten Schritt zu halten.

Es ist jedoch eine Schande, da einige von ihnen uns viel produktiver machen können.

Mein Ziel mit diesem Artikel ist es also, das Bewusstsein für einige der neuesten Funktionen in Chrome, Microsoft Edge, Firefox und Safari zu schärfen. Hoffentlich wird es Sie dazu bringen, sie auszuprobieren, und vielleicht hilft es Ihnen, sich das nächste Mal wohler zu fühlen, wenn Sie ein browserspezifisches Problem debuggen müssen.

Wenn das gesagt ist, lass uns gleich einsteigen.

Chrome-Entwicklungstools

Das Chrome DevTools-Team hat hart daran gearbeitet, seine (inzwischen 13 Jahre alte) Codebasis zu modernisieren. Sie waren damit beschäftigt, das Build-System zu verbessern, zu TypeScript zu migrieren, neue WebComponents einzuführen, ihre Theme-Infrastruktur neu aufzubauen und vieles mehr. Dadurch lassen sich die Werkzeuge jetzt einfacher erweitern und wechseln.

Aber zusätzlich zu dieser weniger benutzerorientierten Arbeit hat das Team auch viele Funktionen ausgeliefert. Lassen Sie mich hier auf einige davon eingehen, die sich auf das CSS-Debugging beziehen.

Scroll-Schnappen

CSS-Scroll-Snapping bietet Webentwicklern eine Möglichkeit, die Position zu steuern, an der ein scrollbarer Container aufhört zu scrollen. Dies ist eine nützliche Funktion zB für lange Fotolisten, bei denen Sie möchten, dass der Browser jedes Foto automatisch sauber in seinem scrollbaren Container für Sie positioniert.

Wenn Sie mehr über Scroll-Snapping erfahren möchten, können Sie diese MDN-Dokumentation lesen und sich hier die Demos von Adam Argyle ansehen.

Die wichtigsten Eigenschaften von Scroll-Snapping sind:

• scroll-snap-type , das dem Browser mitteilt, in welche Richtung das Einrasten erfolgt und wie es geschieht;
• scroll-snap-align , das dem Browser mitteilt, wo er einrasten soll.

Chrome DevTools hat neue Funktionen eingeführt, die beim Debuggen dieser Schlüsseleigenschaften helfen:

• Wenn ein Element Scroll-Snapping mithilfe von scroll-snap-type definiert, wird im Bedienfeld „Elemente“ daneben ein Badge angezeigt.

• Sie können auf das Scroll-Snap-Badge klicken, um ein neues Overlay zu aktivieren. Wenn Sie dies tun, werden mehrere Dinge auf der Seite hervorgehoben:
  • der Scroll-Container,
  • die Elemente, die innerhalb des Containers scrollen,
  • die Position, an der Elemente ausgerichtet sind (durch einen blauen Punkt gekennzeichnet).

Diese Überlagerung macht es einfach zu verstehen, ob und wie die Dinge nach dem Scrollen einrasten. Dies kann sehr nützlich sein, wenn Ihre Objekte zB keinen Hintergrund haben und die Grenzen zwischen ihnen schwer zu erkennen sind.

Während Scroll-Snapping keine neue CSS-Funktion ist, ist die Akzeptanz eher gering (weniger als 4 % laut chromestatus.com), und da sich die Spezifikation geändert hat, wird es nicht von jedem Browser auf die gleiche Weise unterstützt.

Ich hoffe, dass dieses DevTools-Feature die Leute dazu bringen wird, mehr damit zu spielen und es letztendlich für ihre Websites zu übernehmen.

Containerabfragen

Wenn Sie in den letzten Jahren irgendeine Art von Webentwicklung betrieben haben, haben Sie wahrscheinlich schon von Containerabfragen gehört. Es ist seit langem eines der am häufigsten nachgefragten CSS-Features und war ein sehr komplexes Problem, das Browserhersteller und Spezifikationsschreiber lösen mussten.

Wenn Sie nicht wissen, was Containerabfragen sind, würde ich vorschlagen, zuerst den Artikel Primer On CSS Container Queries von Stephanie Eckles durchzugehen.

Kurz gesagt, sie sind eine Möglichkeit für Entwickler, das Layout und den Stil von Elementen abhängig von der Größe ihres Containers zu definieren. Diese Fähigkeit ist ein großer Vorteil beim Erstellen wiederverwendbarer Komponenten, da wir sie an den Ort anpassen können, an dem sie verwendet werden (anstatt sich nur an die Größe des Darstellungsbereichs anzupassen, für die Medienabfragen gut sind).

Glücklicherweise bewegen sich die Dinge in diesem Bereich und Chromium unterstützt jetzt Containerabfragen, und das Chrome DevTools-Team hat damit begonnen, Tools hinzuzufügen, die den Einstieg erleichtern.

Containerabfragen sind in Chromium noch nicht standardmäßig aktiviert (um sie zu aktivieren, gehen Sie zu chrome://flags und suchen Sie nach „Containerabfragen“), und es kann noch eine Weile dauern, bis dies der Fall ist. Darüber hinaus steckt die DevTools-Arbeit zum Debuggen noch in den Anfängen. Aber einige frühe Features sind bereits gelandet.

• Wenn Sie in DevTools ein Element auswählen, das Stile aus einer @container -at-Regel enthält, wird diese Regel in der Seitenleiste „Stile“ des Bedienfelds „Elemente“ angezeigt. Dies ähnelt der Darstellung von Stilen für Medienabfragen in devtools und macht es einfach, zu wissen, woher ein bestimmter Stil kommt.

Wie der obige Screenshot zeigt, zeigt die Stil-Seitenleiste 2 Regeln an, die für das aktuelle Element gelten. Der untere gilt immer für das .media Element und stellt seinen Standardstil bereit. Und die obere ist in einer @container (max-width:300px) verschachtelt, die nur wirksam wird, wenn der Container schmaler als 300px ist.

• Darüber hinaus zeigt der Bereich Stile direkt über der @container at-Regel einen Link zu dem Element an, auf das sich die Regel bezieht, und wenn Sie den Mauszeiger darüber bewegen, werden zusätzliche Informationen zu seiner Größe angezeigt. Auf diese Weise wissen Sie genau, warum die Containerabfrage zutrifft.

Das Chrome DevTools-Team arbeitet aktiv an dieser Funktion und Sie können in Zukunft noch viel mehr erwarten.

Chromium-Zusammenarbeit

Bevor wir auf Funktionen eingehen, die andere Browser haben, lassen Sie uns ein wenig über Chromium sprechen. Chromium ist ein Open-Source-Projekt, auf dem Chrome, Edge, Brave und andere Browser aufbauen. Das bedeutet, dass alle diese Browser Zugriff auf die Funktionen von Chromium haben.

Zwei der aktivsten Mitwirkenden an diesem Projekt sind Google und Microsoft, und wenn es um DevTools geht, haben sie an einigen interessanten Funktionen zusammengearbeitet, auf die ich jetzt eingehen möchte.

CSS-Layout-Debugging-Tools

Vor einigen Jahren hat Firefox in diesem Bereich eine Innovation eingeführt und die allerersten Grid- und Flexbox-Inspektoren ausgeliefert. Chromium-basierte Browser ermöglichen es nun auch Webentwicklern, Grid und Flexbox einfach zu debuggen.

An diesem Gemeinschaftsprojekt waren Ingenieure, Produktmanager und Designer von Microsoft und Google beteiligt, die auf ein gemeinsames Ziel hinarbeiteten (erfahren Sie mehr über das Projekt selbst in meinem BlinkOn-Vortrag).

Unter anderem verfügt DevTools jetzt über die folgenden Layout-Debugging-Funktionen:

• Heben Sie mehrere Raster- und Flex-Layouts auf der Seite hervor und passen Sie sie an, wenn Sie Rasterliniennamen oder -nummern, Rasterbereiche usw. sehen möchten.

• Flex- und Grid-Editoren, um visuell mit den verschiedenen Eigenschaften herumzuspielen.

• Ausrichtungssymbole in der CSS-Autovervollständigung erleichtern die Auswahl von Eigenschaften und Werten.

• Heben Sie den Mauszeiger auf eine Eigenschaft hervor, um zu verstehen, für welche Teile der Seite eine Eigenschaft gilt.

Weitere Informationen hierzu finden Sie auf den Dokumentationsseiten von Microsoft und Google.

Lokalisierung

Dies war ein weiteres Gemeinschaftsprojekt von Microsoft und Google, das es nun ermöglicht, alle Chromium-basierten DevTools in andere Sprachen als Englisch zu übersetzen.

Ursprünglich war nie geplant, DevTools zu lokalisieren, was bedeutet, dass dies ein enormer Aufwand war. Es ging darum, die gesamte Codebasis durchzugehen und UI-Strings lokalisierbar zu machen.

Das Ergebnis hat sich aber gelohnt. Wenn Englisch nicht Ihre Muttersprache ist und Sie sich bei der Verwendung von DevTools in einer anderen wohler fühlen, gehen Sie zu den Einstellungen ( F1 ) und suchen Sie das Dropdown-Menü „Sprache“.

Hier ist ein Screenshot, wie es in Chrome DevTools aussieht:

Und so sieht Edge auf Japanisch aus:

Edge-DevTools

Microsoft ist vor mehr als 2 Jahren auf Chromium umgestiegen, um Edge zu entwickeln. Während es damals in der Web-Community für viele Diskussionen sorgte, wurde seitdem nicht viel darüber geschrieben oder gesagt. Die Leute, die an Edge (einschließlich seiner DevTools) arbeiten, waren jedoch beschäftigt, und der Browser verfügt jetzt über viele einzigartige Funktionen.

Da Edge auf dem Open-Source-Projekt Chromium basiert, profitiert es von all seinen Funktionen und Fehlerbehebungen. Praktisch nimmt das Edge-Team die im Chromium-Repository vorgenommenen Änderungen in sein eigenes Repository auf.

Aber im Laufe des letzten Jahres hat das Team begonnen, Edge-spezifische Funktionen basierend auf den Bedürfnissen der Edge-Benutzer und dem Feedback zu erstellen. Edge DevTools verfügt jetzt über eine Reihe einzigartiger Funktionen, auf die ich eingehen werde.

Werkzeuge zum Öffnen, Schließen und Verschieben

Mit fast 30 verschiedenen Panels ist DevTools eine wirklich komplizierte Software in jedem Browser. Aber Sie brauchen nie wirklich Zugriff auf alle Tools gleichzeitig. Tatsächlich sind beim erstmaligen Starten von DevTools nur wenige Bereiche sichtbar, und Sie können später weitere hinzufügen.

Auf der anderen Seite ist es jedoch schwierig, die Panels zu entdecken, die standardmäßig nicht angezeigt werden, auch wenn sie für Sie sehr nützlich sein könnten.

Edge hat 3 kleine, aber leistungsstarke Funktionen hinzugefügt, um dies zu beheben:

• eine Schließen-Schaltfläche auf Registerkarten, um die Tools zu schließen, die Sie nicht mehr benötigen,
• eine + (Plus)-Schaltfläche am Ende der Registerkartenleiste, um ein beliebiges Werkzeug zu öffnen,
• eine Kontextmenüoption zum Verschieben von Werkzeugen.

Das folgende GIF zeigt, wie Schließ- und Öffnungswerkzeuge sowohl im Haupt- als auch im Schubladenbereich in Edge ausgeführt werden können.

Sie können auch Werkzeuge zwischen dem Hauptbereich und dem Schubladenbereich verschieben:

• Wenn Sie mit der rechten Maustaste auf eine Registerkarte oben klicken, wird ein Element "Nach unten verschieben" angezeigt, und
• Wenn Sie mit der rechten Maustaste auf eine Registerkarte in der Schublade klicken, wird ein Element „Nach oben verschieben“ angezeigt.

Abrufen von Kontexthilfe mit den DevTools-QuickInfos

Sowohl für Anfänger als auch für erfahrene Entwickler ist es schwierig, alles über DevTools zu wissen. Wie ich bereits erwähnt habe, gibt es so viele Panels, dass es unwahrscheinlich ist, dass Sie sie alle kennen.

Um dies zu beheben, hat Edge eine Möglichkeit hinzugefügt, direkt von den Tools zu ihrer Dokumentation auf der Microsoft-Website zu gelangen.

Diese neue Tooltips-Funktion fungiert als umschaltbares Overlay, das die Tools abdeckt. Wenn diese aktiviert sind, werden die Bedienfelder hervorgehoben, und für jedes wird Kontexthilfe mit Links zur Dokumentation bereitgestellt.

Sie können die Tooltips auf 3 verschiedene Arten starten:

• mit der Tastenkombination Strg + Umschalt + H unter Windows/Linux ( Cmd + Umschalt + H auf Mac);
• indem Sie in das Hauptmenü ( ... ) gehen, dann in die Hilfe gehen und „Toggle the DevTools Tooltips“ auswählen;
• indem Sie das Befehlsmenü verwenden und „Tooltips“ eingeben.

Farben anpassen

In Codebearbeitungsumgebungen lieben es Entwickler, ihre Farbthemen anzupassen, um den Code leichter lesbar und angenehmer anzusehen. Da auch Webentwickler viel Zeit in DevTools verbringen, ist es sinnvoll, auch anpassbare Farben zu haben.

Edge hat gerade eine Reihe neuer Designs zu DevTools hinzugefügt, zusätzlich zu den bereits verfügbaren dunklen und hellen Designs. Insgesamt wurden 9 neue Themen hinzugefügt. Diese stammen aus VS Code und sind daher Benutzern dieses Editors vertraut.

Sie können das Design auswählen, das Sie verwenden möchten, indem Sie zu den Einstellungen gehen (mit F1 oder dem Zahnradsymbol in der oberen rechten Ecke) oder indem Sie das Befehlsmenü verwenden und theme eingeben.

Firefox-DevTools

Ähnlich wie das Chrome DevTools-Team waren die Leute, die an Firefox DevTools arbeiten, mit einer großen Architekturaktualisierung beschäftigt, die darauf abzielte, ihre Codebasis zu modernisieren. Außerdem ist ihr Team heutzutage etwas kleiner, da sich Mozilla in letzter Zeit neu konzentrieren musste. Aber obwohl das bedeutet, dass sie weniger Zeit hatten, neue Funktionen hinzuzufügen, haben sie es dennoch geschafft, ein paar wirklich interessante zu veröffentlichen, die ich jetzt durchgehen werde.

Debuggen unerwünschter Bildlaufleisten

Haben Sie sich schon einmal gefragt: „Woher kommt diese Bildlaufleiste?“ Ich weiß, dass ich das habe, und jetzt hat Firefox ein Tool, um genau dieses Problem zu debuggen.

Im Inspector-Panel haben alle Elemente, die scrollen, ein scroll Badge neben sich, was bereits nützlich ist, wenn es um tief verschachtelte DOM-Bäume geht. Darüber hinaus können Sie auf dieses Abzeichen klicken, um das Element (oder die Elemente) anzuzeigen, das/die das Erscheinen der Bildlaufleiste verursacht hat/haben.

Weitere Dokumentation dazu finden Sie hier.

Tab-Reihenfolge visualisieren

Das Navigieren auf einer Webseite mit der Tastatur erfordert die Verwendung der tab , um sich nacheinander durch die fokussierbaren Elemente zu bewegen. Die Reihenfolge, in der fokussierbare Elemente fokussiert werden, während die tab verwendet wird, ist ein wichtiger Aspekt der Zugänglichkeit Ihrer Website, und eine falsche Reihenfolge kann für Benutzer verwirrend sein. Es ist besonders wichtig, darauf zu achten, da moderne Layout-CSS-Techniken es Webentwicklern ermöglichen, Elemente auf einer Seite sehr einfach neu anzuordnen.

Firefox verfügt über ein nützliches Accessibility Inspector-Panel, das Informationen über den Barrierefreiheitsbaum bereitstellt, verschiedene Barrierefreiheitsprobleme automatisch findet und meldet und Sie verschiedene Farbsehschwächen simulieren lässt.

Zusätzlich zu diesen Funktionen bietet das Bedienfeld jetzt ein neues Seiten-Overlay, das die Tab-Reihenfolge für fokussierbare Elemente anzeigt.

Verwenden Sie zum Aktivieren das Kontrollkästchen „Tab-Reihenfolge anzeigen“ in der Symbolleiste.

Weitere Dokumentation dazu finden Sie hier.

Ein brandneues Performance-Tool

Nicht viele Bereiche der Webentwicklung hängen so sehr von Tools ab wie die Leistungsoptimierung. In diesem Bereich ist das Performance-Panel von Chrome DevTools das beste seiner Klasse.

In den letzten Jahren haben sich die Firefox-Ingenieure darauf konzentriert, die Leistung des Browsers selbst zu verbessern, und um ihnen dabei zu helfen, haben sie ein Performance-Profiler-Tool entwickelt. Das Tool wurde ursprünglich entwickelt, um den nativen Code der Engine zu optimieren, unterstützte aber auch die Analyse der JavaScript-Leistung von Anfang an.

Heute ersetzt dieses neue Performance-Tool das alte Firefox DevTools-Performance-Panel in Vorabversionen (Nightly und Developer Edition). Probieren Sie es aus, wenn Sie die Gelegenheit dazu haben.

Unter anderem unterstützt der neue Firefox-Profiler das Teilen von Profilen mit anderen, damit diese Ihnen helfen können, die Leistung Ihres aufgezeichneten Anwendungsfalls zu verbessern.

Sie können die Dokumentation dazu hier lesen und mehr über das Projekt in ihrem GitHub-Repository erfahren.

Safari-Webinspektor

Lassen Sie uns zu guter Letzt einige der neuesten Safari-Funktionen durchgehen.

Das kleine Team von Apple hat sich mit einer Vielzahl von Verbesserungen und Korrekturen rund um die Tools sehr beschäftigt. Wenn Sie mehr über den Safari Web Inspector erfahren, können Sie beim Debuggen Ihrer Websites auf iOS- oder tvOS-Geräten produktiver sein. Darüber hinaus verfügt es über eine Reihe von Funktionen, die andere DevTools nicht haben und von denen nicht viele Leute wissen.

CSS-Grid-Debugging

Da Firefox, Chrome und Edge (und alle Chromium-basierten Browser) über dedizierte Tools zum Visualisieren und Debuggen von CSS-Grids verfügen, war Safari der letzte große Browser, der dies nicht hatte. Nun, jetzt tut es das!

Grundsätzlich verfügt Safari in diesem Bereich jetzt über die gleichen Funktionen wie die DevTools anderer Browser. Das ist großartig, denn es bedeutet, dass es einfach ist, von einem Browser zum nächsten zu wechseln und trotzdem produktiv zu sein.

• Raster-Badges werden im Bedienfeld „Elemente“ angezeigt, um Raster schnell zu finden.
• Durch Klicken auf das Abzeichen wird die Visualisierungsüberlagerung auf der Seite umgeschaltet.
• In der Seitenleiste wird jetzt ein neues Layout-Panel angezeigt. Es ermöglicht Ihnen, das Raster-Overlay zu konfigurieren, die Liste aller Raster auf der Seite anzuzeigen und das Overlay für sie umzuschalten.

Interessant an der Implementierung von Safari ist jedoch, dass sie den Leistungsaspekt des Tools wirklich auf den Punkt gebracht haben. Sie können viele verschiedene Overlays gleichzeitig aktivieren und auf der Seite scrollen, ohne dass es zu Leistungsproblemen kommt.

Die andere interessante Sache ist, dass Safari ein 3-Fenster-Elemente-Bedienfeld eingeführt hat, genau wie Firefox, mit dem Sie das DOM, die CSS-Regeln für das ausgewählte Element und das Layout-Bedienfeld auf einmal sehen können.

Erfahren Sie mehr über den CSS Grid Inspector in diesem WebKit-Blogbeitrag.

Eine Reihe von Debugger-Verbesserungen

Safari hatte früher ein separates Ressourcen- und Debugger-Fenster. Sie haben sie in einem einzigen Quellenbereich zusammengeführt, der es einfacher macht, alles zu finden, was Sie beim Debuggen Ihres Codes benötigen. Darüber hinaus macht dies das Tool konsistenter mit Chromium, an das viele Leute gewöhnt sind.

Konsistenz für allgemeine Aufgaben ist in einer browserübergreifenden Welt wichtig. Webentwickler müssen bereits über mehrere Browser hinweg testen. Wenn sie also ein völlig neues Paradigma lernen müssen, wenn sie die DevTools eines anderen Browsers verwenden, kann dies die Dinge schwieriger machen, als sie sein müssen.

Aber Safari hat sich kürzlich auch darauf konzentriert, seinem Debugger innovative Funktionen hinzuzufügen, die andere DevTools nicht haben.

Bootstrap-Skript:
Mit Safari können Sie JavaScript-Code schreiben, der garantiert zuerst vor allen Skripten auf der Seite ausgeführt wird. Dies ist sehr nützlich, um integrierte Funktionen zum Beispiel zum Hinzufügen von debugger -Anweisungen oder zum Protokollieren zu instrumentieren.

Neue Breakpoint-Konfigurationen:
Alle Browser unterstützen mehrere Arten von Breakpoints wie bedingte Breakpoints, DOM-Breakpoints, Event-Breakpoints und mehr.

Safari hat kürzlich seine gesamte Suite von Breakpoint-Typen verbessert, indem es ihnen allen eine Möglichkeit gegeben hat, sie umfassend zu konfigurieren. Mit dieser neuen Breakpoint-Funktion können Sie entscheiden:

• wenn Sie möchten, dass ein Haltepunkt nur erreicht wird, wenn eine bestimmte Bedingung wahr ist,
• Wenn Sie möchten, dass der Haltepunkt die Ausführung überhaupt anhält oder nur Code ausführt,
• oder spielen Sie sogar einen Audio-Piepton ab, damit Sie wissen, dass eine Codezeile ausgeführt wurde.

queryInstances und queryHolders Konsolenfunktionen:
Diese beiden Funktionen sind wirklich nützlich, wenn Ihre Site anfängt, viele JavaScript-Objekte zu verwenden. In einigen Situationen kann es schwierig werden, die Abhängigkeiten zwischen diesen Objekten zu verfolgen, und es können auch Speicherlecks auftreten.

Safari verfügt über ein Memory-Tool, mit dem Sie diese Probleme lösen können, indem Sie Speicherheap-Snapshots untersuchen können. Aber manchmal wissen Sie bereits, welche Klasse oder welches Objekt das Problem verursacht, und möchten herausfinden, welche Instanzen existieren oder was darauf verweist.

Wenn Animal eine JavaScript-Klasse in Ihrer Anwendung ist, queryInstances(Animal) ein Array aller seiner Instanzen zurück.

Wenn foo ein Objekt in Ihrer Anwendung ist, queryHolders(foo) ein Array aller anderen Objekte zurück, die Verweise auf foo haben.

Abschließende Gedanken

Ich hoffe, dass diese Funktionen für Sie nützlich sind. Ich kann nur empfehlen, mehrere Browser zu verwenden und sich mit ihren DevTools vertraut zu machen. Eine bessere Vertrautheit mit anderen DevTools kann sich als nützlich erweisen, wenn Sie ein Problem in einem Browser debuggen müssen, den Sie nicht regelmäßig verwenden.

Beachten Sie, dass die Unternehmen, die Browser herstellen, alle Teams haben, die aktiv an DevTools arbeiten. Sie investieren darin, sie besser, weniger fehlerhaft und leistungsfähiger zu machen. Diese Teams sind auf Ihr Feedback angewiesen, um die richtigen Dinge zu entwickeln. Ohne zu hören, mit welchen Problemen Sie konfrontiert sind oder welche Funktionen Ihnen fehlen, ist es für sie schwieriger, die richtigen Entscheidungen darüber zu treffen, was sie bauen sollen.

Das Melden von Fehlern an ein DevTools-Team hilft Ihnen nicht nur, wenn der Fix kommt, sondern kann auch vielen anderen helfen, die mit demselben Problem konfrontiert waren.

Es ist wichtig zu wissen, dass die DevTools-Teams bei Microsoft, Mozilla, Apple und Google normalerweise ziemlich klein sind und viel Feedback erhalten. Das Melden eines Problems bedeutet also nicht, dass es schnell behoben wird, aber es hilft, und diese Teams hören zu .

Hier sind einige Möglichkeiten, wie Sie Fehler melden, Fragen stellen oder Funktionen anfordern können:

• Firefox-DevTools
  • Firefox verwendet Bugzilla als öffentlichen Bugtracker und jeder kann gerne Bugs melden oder nach neuen Funktionen fragen, indem er dort einen neuen Eintrag erstellt. Alles, was Sie brauchen, ist ein GitHub-Konto, um sich anzumelden.
  • Die Kontaktaufnahme mit dem Team kann entweder über Twitter erfolgen, indem Sie das @FirefoxDevTools-Konto verwenden oder sich beim Mozilla-Chat anmelden (Dokumentation zum Chat finden Sie hier).
• Safari-Webinspektor
  • Safari verwendet auch öffentliches Bug-Tracking für seine WebKit-Fehler. Hier ist eine Dokumentation darüber, wie man nach Fehlern sucht und neue meldet.
  • Sie können das Team auch auf Twitter mit @webkit kontaktieren.
  • Schließlich können Sie auch Bugs zu Safari und dem Safari Web Inspector über den Feedback-Assistenten melden.
• Edge-DevTools
  • Der einfachste Weg, ein Problem zu melden oder nach einem Feature zu fragen, ist die Verwendung der Feedback-Schaltfläche in DevTools (das kleine Strichmännchen in der oberen rechten Ecke der Tools).
  • Das Stellen von Fragen an das Team funktioniert am besten über Twitter, indem Sie das @EdgeDevTools-Konto erwähnen.
• Chrome-Entwicklungstools
  • Das Team wartet auf Feedback auf der devtools-dev-Mailingliste sowie auf Twitter unter @ChromeDevTools.
• Chrom
  • Da Chromium das Open-Source-Projekt ist, das Google Chrome und Microsoft Edge (und andere) antreibt, können Sie Probleme auch über den Bug-Tracker von Chromium melden.

In diesem Sinne danke fürs Lesen!