DOM Inspector

Bei mir ist das Vorgehen praktisch auch so.
Habe das aber auch mit den Firefox Web-Entwickler Tools versucht, es geht, aber nicht so komfortabel
wie mit dem DomInspector. Es ist aber eben auch Gewohnheitssache.
Mfg.
Endor

Hallo zusammen,
genau so mache ich das für Thunderbird und Firefox und früher auch für Sunbird.

Gruß
EDV-Oldi

Grundsätzlich stimme ich Sören zu, dass die Entwicklerwerkzeuge des Fuchs das meiste auch können, eben etwas Umgewöhnung (wobei ich lieber bei dem Alten bleibe, wenn es nicht etwas wirklich besseres gibt). Allerdings finde ich die DOM-Ansicht im DOMi wesentlich übersichtlicher und das Kopieren von Eigenschaften ist wirklich einfacher, wie 2002Andreas schon beschrieben hat. Und eine wesentliche Frage ist für mich noch offen: Wie zeige ich mit den Fuchs-Entwicklerwerkzeugen DOM- und CSS-Eigenschaften von Firefox-Elementen (Buttons, Leisten und vor allem Kontextmenüeinträge) an? Bisher geht da nichts über DOMi und inspectElement.uc.js
Mir kommt gerade ein Vergleich. Vielleicht sind die Entwicklerwerkzeuge tatsächlich für Entwickler (von Webseiten) praktisch, der DOMi ist aber noch unschlagbar für "Schrauber".

Danke für die Antwort / das Thema, Andreas.

Ob man die DOM-Repräsentation des DOMi für übersichtlich hält, das ist sicher eine Geschmacksfrage, ich find's total unübersichtlich. Allerdings, unabhängig von dieser Geschmacksfrage, der Weg ist exakt identisch zu den Entwickler-Werkzeugen von Firefox. Rechtsklick auf ein Element → Untersuchen, das gewünschte Element ist fokussiert. Selektor per Kontextmenü kopieren funktioniert ebenfalls vom Prinzip her ganz genauso (Kopieren → CSS-Selektor). Zu den CSS-Regeln in den Firefox-Werkzeugen muss ich nichts weiter sagen, denn die sind ja sofort sichtbar, ohne dass man was klickt. Das Öffnen der CSS-Dateien ist auch nur einen Klick auf den Dateinamen entfernt. Mit den Werkzeugen von Firefox ist das aber nicht einmal notwendig, weil man den CSS-Code direkt aus der Ansicht herauskopieren kann. Ganze Seite ist ebenfalls kein Problem, da man ja den kompletten DOM-Baum hat und einfach ein anderes Element auswählen kann, wie den body. Das ist im DOMi ja sogar viel umständlicher, denn man sieht nicht, was man auswählt, es gibt überhaupt keine Hervorhebung auf der Webseite. Eine Suchfunktion gibt es selbstverständlich in Firefox auch, und im Gegensatz zum DOMi bietet die eine Autovervollständigung von IDs und Klassen an. Solche Dinge machen die Arbeit mit den Entwicklerwerkzeugen von Firefox einfach wahnsinnig viel effizienter.

Also zusammengefasst lässt sich sagen, dass es für deine Verwendung keinen zwingenden funktionalen Grund für das eine oder das andere gibt, du würdest mit beidem gut zum Ziel kommen. Allerdings empfehle ich dir, dich mit dem Entwickler-Werkzeugen von Firefox vertraut zu machen, weil diese wesentlich mehr können, man schneller ans Ziel gelangt, und weil diese aktiv weiterentwickelt werden. Der DOMi ist ein Projekt des SeaMonkey Councils und die kommen ja nicht mal mit dem Browser hinterher: SeaMonkey auf macOS Sierra startet nicht einmal mehr! Seine letzte wirklich funktionale Erweiterung hat der DOMi 2014 erhalten, das sagt vermutlich alles. Und wie gesagt, auch SeaMonkey nutzt in Zukunft die Werkzeuge von Firefox, das ist bereits in SeaMonkey gelandet:

https://bugzilla.mozilla.org/show_bug.cgi?id=1223341

Das würde ich persönlich als endgültigen Todesstoß für den DOMi sehen. Darum besser noch in der Phase umgewöhnen, wo der DOMi noch halbwegs funktioniert, nicht dass man irgendwann vor vollendeten Tatsachen steht. Übrigens lässt sich mittlerweile selbst Thunderbird (!) mit den Entwickler-Werkzeugen von Firefox verbinden.

Nachtrag: SeaMonkey wird in Zukunft nicht einmal mehr mit dem DOMi ausgeliefert:
https://bugzilla.mozilla.org/show_bug.cgi?id=1273222

Zitat von bege

Und eine wesentliche Frage ist für mich noch offen: Wie zeige ich mit den Fuchs-Entwicklerwerkzeugen DOM- und CSS-Eigenschaften von Firefox-Elementen (Buttons, Leisten und vor allem Kontextmenüeinträge) an? Bisher geht da nichts über DOMi und inspectElement.uc.js

Kontextmenüeinträge habe ich mir noch nicht angesehen, aber grundsätzlich funktionieren die Entwickler-Werkzeuge auch für die Oberfläche von Firefox, dazu öffnet man die Browser-Toolbox aus den Entwickler-Werkzeugen. Man muss vorher nur die Option zum Browser-Chrome-Debugging (und evtl. auch Remote-Debugging, bin ich mir gerade nicht sicher; ich hab immer beide aktiv) aktivieren, dann erscheint der Menüeintrag.

Zitat von Sören Hentzschel

Kontextmenüeinträge habe ich mir noch nicht angesehen, aber grundsätzlich funktionieren die Entwickler-Werkzeuge auch für die Oberfläche von Firefox, dazu öffnet man die Browser-Toolbox aus den Entwickler-Werkzeugen. Man muss vorher nur die Option zum Browser-Chrome-Debugging (und evtl. auch Remote-Debugging, bin ich mir gerade nicht sicher; ich hab immer beide aktiv) aktivieren, dann erscheint der Menüeintrag.

Bitte gib mir eine Schritt-für-Schritt-Anleitung. Ich habe keinen passenden Menüeintrag bei den Browser-Elementen.

Wenn du die Entwickler-Werkzeuge von Firefox öffnest, meinetwegen über Rechtsklick auf ein Element → Untersuchen oder einen der unzähligen anderen Wege, dann hast du rechts ein Zahnrad-Symbol. Dort müssen zwei Optionen aktiviert sein: a) Debugging-Werkzeuge für Browser-Chrome und Add-ons aktivieren, b) Externes Debugging aktivieren. In der deutschen Version von Firefox heißt der Menüpunkt im Entwickler-Menü "Browser-Werkzeuge", den du dann aufrufen kannst. Dann öffnen sich die Werkzeuge in einem eigenen Fenster und wie auf Webseiten kannst du dann mit der Maus über die Oberfläche fahren und so ein Element auswählen.

Zitat von Sören Hentzschel

Wenn du die Entwickler-Werkzeuge von Firefox öffnest, meinetwegen über Rechtsklick auf ein Element → Untersuchen oder einen der unzähligen anderen Wege, dann hast du rechts ein Zahnrad-Symbol. Dort müssen zwei Optionen aktiviert sein: a) Debugging-Werkzeuge für Browser-Chrome und Add-ons aktivieren, b) Externes Debugging aktivieren. In der deutschen Version von Firefox heißt der Menüpunkt im Entwickler-Menü "Browser-Werkzeuge", den du dann aufrufen kannst. Dann öffnen sich die Werkzeuge in einem eigenen Fenster

bis hierhin klappt alles (bekomme eine Anfrage, ob der externe Zugriff auf den Browser erlaubt werden soll, als Dauereinstellung ist das nicht besonders sicher, oder?), aber hier klappt es leider nicht. Das Werkzeuge- und das Browserfenster kommunizieren hier nicht miteinander:

Zitat von Sören Hentzschel

und wie auf Webseiten kannst du dann mit der Maus über die Oberfläche fahren und so ein Element auswählen.

Wenn es mal klappt, ist es verdammt umständlich. In Bezug auf deine Aussagen zur Untersuchung von Webseiteninhalten kann ich dir folgen.
(Bin für den Rest des Tages nicht mehr da. Schönen Abend noch.)

Also bei mir funktioniert die Kommunikation, siehe Screenshot, Adressleiste eingefärbt.

Was das Auswählen eines Elementes per Herüberfahren mit der Maus betrifft, sollte ich vielleicht noch erwähnen, dass das entsprechende Symbol vorher angeklickt werden muss (im Screenshot links von dem "Inspector"-Tab).

Zitat von Sören Hentzschel

Was das Auswählen eines Elementes per Herüberfahren mit der Maus betrifft, sollte ich vielleicht noch erwähnen, dass das entsprechende Symbol vorher angeklickt werden muss (im Screenshot links von dem "Inspector"-Tab).

Ja, so funktioniert es. Aber es ist inakzeptabel umständlich und Menüs lassen sich nicht untersuchen. Da muss noch was passieren, bis die Browser-Werkzeuge den DOMi mit Kontextmenü-Erweiterung oder -Skript bei der Untersuchung von Browserelementen ersetzen können. Hoffentlich geschieht das, bevor der DOMi gar nicht mehr kompatibel ist, oder er wird doch wieder auf den aktuellen Stand gebracht.

Umständlich ist am Klicken eines Buttons ja nun nicht wirklich nichts und der DOMi bietet dieses praktische Feature überhaupt nicht an, oder habe ich was übersehen? Was das Untersuchen des Menüs betrifft, ich nutze macOS und da kann das der DOMi auch nicht, weil das Menü hier Teil des Betriebssystems ist und nicht der Anwendung (Nachtrag: ich habe das aus irgendeinem Grund jetzt auf die Menüleiste bezogen. Aber falls es um das Hamburger-Menü geht, ich vermute ein ähnliches Vorgehen wie im nächsten Satz). Aber ich hab es eben mal anhand eines Kontextmenüeintrags getestet, auch dafür funktionieren die Firefox-internen Werkzeuge. Ja, auf dem Weg per Herüberfahren mit der Maus funktioniert das nicht, da das Kontextmenü wieder verschwindet, aber das macht nichts. Ich hab als Beispiel einfach den Eintrag "Seite speichern unter" genommen und dafür "Seite speichern" in das Suchfeld vom Inspektor eingegeben. Enter gedrückt, und ich war am Ziel und konnte bearbeiten, was ich will, und habe jede Änderung live angewendet gesehen. Funktioniert mit dem Menü unter Windows vermutlich auch so, aber da muss ich spekulieren, da ich meinen Windows-Computer nicht mit habe, wo ich mich derzeit befinde.

Sören, danke für deine Bemühungen, mir/uns die Browser-Werkzeuge verständlich zu machen. Ich steige an dieser Stelle erst mal aus. Ich meinte nicht das Button-Drücken, das umständlich ist, sondern das ganze Ding erst mal zu starten, wenn man nicht ständig den Zugriff von außen auf den Browser aktiviert haben will. Und mit der Suche bin ich erst mal nicht fündig geworden und werde es einstweilen nicht weiter versuchen. Trotzdem Danke nochmal.

Die beiden Checkboxen können dauerhaft aktivert bleiben. Da kann gar nichts passieren, weil eingehende Verbindungen erst durch den Dialog bestätigt werden müssen.