Welche Tools/Entwicklungswerkzeuge nutzt ihr?

**conta1234** · 25.07.2011, 10:44

Liebe Contaoianer,

bisher nutzte ich für die Webentwicklung immer die gängigen Firefox-Tools wie z.B. Firebug und die Developer-Toolbar. Da der Firefox aber ständig updaten möchte und die Plugins dann meist garnicht mehr funktionieren, suche ich nun nach alternativen. Daher die Frage:

Welche Tools/Entwicklungswerkzeuge nutzt ihr fürs Webdesign/Webentwicklung?

Ich bin gespannt auf eure Antworten.

LG

**Ale** · 25.07.2011, 11:22

Opera Dragonfly

Ziemlich lange habe ich mit Firebug gearbeitet. Mittlerweile finde ich, dass Opera eine echte Alternative darstellt und finde Dragonfly viel besser zumal er in Opera integriert dh dass man das Problem mit nicht-kompatiblen Erweiterungen nicht mehr hat.

**schman** · 25.07.2011, 11:35

Ich verwende häufig auch das interne Plugin von Google Chrome

**wiese** · 25.07.2011, 15:22

Das interne Tool von Google Chrome / Safari. (Opera hab ich mir noch nie angeschaut und optimiere meine Seiten auch nicht für den Browser.)

**psren** · 25.07.2011, 15:32

Ich habe EWIG FF + Firebug genutzt und bin jetzt auf Chrome umgestiegen, weil das interne Plugin echt gut ist. Und im Vergleich zu Firebug den Browser nicht dermaßen ausbremst.

**dominik.zogg@gmail.com** · 25.07.2011, 16:26

Ich nutze auch immer öfter das interne Werkzeug von Webkit (Chrome, Safari...), leider finde ich das HTML Rendering von Gecko (FF) noch immer besser.

Sent from my Desire HD using Tapatalk

**pmmueller** · 26.07.2011, 07:51

Zitat von Ale

Opera Dragonfly

Sind in Dragonfly denn Änderungen am HTML/CSS live im Browserfenster sichtbar? Das vermisse ich bei den Chrome/Safari-Erweiterungen noch.

**planepix** · 26.07.2011, 07:59

Hallo Peter,

ich teste das hier im Moment für Chrome:
https://chrome.google.com/webstore/d...bfifipaofnmnkn

**arnoldB** · 26.07.2011, 08:43

Zitat von pmmueller

Sind in Dragonfly denn Änderungen am HTML/CSS live im Browserfenster sichtbar?

Ja sind sie

**psren** · 26.07.2011, 09:19

Zitat von pmmueller

Sind in Dragonfly denn Änderungen am HTML/CSS live im Browserfenster sichtbar? Das vermisse ich bei den Chrome/Safari-Erweiterungen noch.

Sind sie doch im Chrome auch?! Musst nur ENTER drücken

**thepixture** · 26.07.2011, 12:02

Bis jetzt hab ich auch immer auf Firebug im FF zurückgegriffen.

Die internen Entwicklertools bei Chrome waren mir auch noch nicht bekannt, muss ich gestehen, aber sieht schon mal sehr interessant aus. Code Cola für Chrome, das Planepix erwähnt werd ich auch mal testen.

**soweit_ok** · 26.07.2011, 20:29

Nach wie vor Firebug und Webdeveloper. Bisweilen auch die genannten Tools der anderen Browser, wenn ich mit denen gerade am Testen bin. Sogar die Javaconsole des IE, obwohl ich den IE hasse und ihn auch nur noch ab Vers. 8 unterstütze. Aber die Fehlermeldungen unterscheiden sich teilweise und man muss sich ggf. auch darum kümmern. Den Opera mag ich auch nicht besonders, deshalb verwende ich auch das Plugin nur selten. Der hat mich schon zu oft auch mit Rumzicken genervt und ich empfinde es deshalb nicht als solide zum Entwickeln. FF ist halt nach meiner Erfahrung die beste Ausgangsbasis, weil er so gut wie immer problemlos alles genau so macht, wie ich es erwarte. Um die anderen Browser kümmere ich mich beim Testen dann nur notgedrungen.

Das Updateproblem des FF habe ich nicht. Ich entwickele vorwiegend in VM-Umgebungen und mache die normalen Updates nur auf dem Host-PC. In den verschiedenen VMs hab ich hingegen verschiedene Browserversionen, die ich nicht aktualisiere. Man muss ja auch schauen, wie die Seiten aussehenin den älteren Versionen, soweit man die noch unterstützen will.

Hab mir kürzlich auch die Fire-PHP Erweiterung installiert, aber noch nicht in Contao integriert. Möchte ich mal ausprobieren.

**pmmueller** · 26.07.2011, 20:37

Zitat von psren

Sind sie doch im Chrome auch?! Musst nur ENTER drücken

Ja, und genau der Tastendruck ist im Firefox nicht nötig, sodass man live mit den Pfeiltasten die Werte verändern und dabei zuschauen kann, wie sich das auf der Seite auswirkt.

Aber ich habe letztens gelesen, dass der Chefentwickler von Firebug zu Google wechselt. Und Google ist wohl auch einer der wichtigsten Geldgeber für die Mozilla-Stiftung. Vielleicht wird das ja alles mal eins

**pmmueller** · 26.07.2011, 20:38

Zitat von arnoldB

[Änderungen im Dragonfly sofort sichtbar?] -- Ja sind sie

Ohne ENTER drücken zu müssen?

**pmmueller** · 26.07.2011, 20:40

Zitat von planepix

ich teste das hier im Moment für Chrome:
--- Code Cola

Sieht auf den ersten Blick sehr schick aus, halte mich doch mal auf dem Laufenden, ob das bei dir den Praxistest besteht oder wieder rausfliegt.

**planepix** · 26.07.2011, 20:43

Ja mach ich gerne, schick ist ja nicht alles

Es sind eher die Gewohnheiten die einen den (möglichen) Umstieg erschweren

**Ale** · 27.07.2011, 08:51

Zitat von pmmueller

Ohne ENTER drücken zu müssen?

Jepp. Ich finde auch das Erscheinungsbild von Dragonfly hübscher. Einzig Google Page Speed fehlt noch...

Chrome lehne ich halt aus Prinzip ab; ich weiß auch nicht wie die Websiten dort dann aussehen, aber gut.

**Berliner** · 27.08.2013, 17:45

Hallo,

ich habe den Beitrag mit Interesse gelesen, allerdings hierzu Rückfragen.

Folgende Ausgangspunkte sollten hierbei betrachtet werden:

1. ich bin ein CMS-Anfänger, der sich aus der Vielfalt der CMS-Systeme eben für Contao entschieden hat,
2. Für die FE-Vorschau und auch zum Live-Testen verwende ich Chrome, FF und IE,
3. "Früher" hab ich alles per Dreamweaver gemacht *gg*
4. und das ist wohl das wichtigste: Derzeit benutze ich ausschliesslich Firebug - komme hier allerdings nicht klar, was genaue Zuordnungen der Angaben zur basic.css oder default.css betrifft (z.B. Eintragungen in den Css-Dateien, die geladen werden - also die Zuordnungen), da bei mir die system-erzeugten CSS geladen werden (hängt lt dem, was ich hier irgendwo gelesen habe, mit dem System zusammen, um Traffic und Ladezeiten zu sparen).

Somit stellt sich für mich, als Anfänger, die Frage, welches Tool das sinnvollste für Anfänger, wie mich, wäre. (Ich denke, dass gerade sehr viele Contao-Anfänger die Standard-Einstellungen im System nutzen und somit das gleiche Problem haben könnten.)

Vielen Dank für eure Antworten im Voraus, Beste Grüße, Berliner

**pmmueller** · 27.08.2013, 19:46

Es ist ehrlich gesagt völlig egal, ob du die Entwicklertools von Chrome, Firefox oder sonstwas nimmst. Bleib bei dem, was du am einleuchtenden findest.

Um die Zuordnung in der komprimierten Datei zu finden, einfach auf den kryptischen Stylesheet-Dateinamen klicken und schauen, wo die Stelle auftaucht. Man kann notfalls auch danach suchen. Das ist dann zwar alles in einer Zeile, aber die Zuordnung kriegst du so raus.

**Berliner** · 27.08.2013, 19:54

Zitat von pmmueller

Es ist ehrlich gesagt völlig egal, ob du die Entwicklertools von Chrome, Firefox oder sonstwas nimmst. Bleib bei dem, was du am einleuchtenden findest.

Um die Zuordnung in der komprimierten Datei zu finden, einfach auf den kryptischen Stylesheet-Dateinamen klicken und schauen, wo die Stelle auftaucht. Man kann notfalls auch danach suchen. Das ist dann zwar alles in einer Zeile, aber die Zuordnung kriegst du so raus.

Vielen Dank für die schnelle Antwort.

Habe mir gerade mal das "mitgelieferte Tool" von Chrome angeschaut - ideal ist hier, dass man relativ übersichtlich in den Code kann und Änderungen auch gleich sichtbar sind.
Allerdings ist auch hier das Problem, dass anscheinend keine "speziellen Einstellungen", wie bsp. für "back" oder ähnliches schnell zu finden sind, sondern nur "globale" Einstellungen, auch wenn man auf die entsprechenden Passus (wie beispielsweise genannt, das "zurück") in der angezeigten Seite klickt.

Beste Grüße aus Berlin

**pmmueller** · 27.08.2013, 20:21

Zitat von Berliner

Habe mir gerade mal das "mitgelieferte Tool" von Chrome angeschaut - ideal ist hier, dass man relativ übersichtlich in den Code kann und Änderungen auch gleich sichtbar sind.

Das ist doch bei allen Entwicklertools so, oder meinst du irgendwas anderes?

Zitat von Berliner

Allerdings ist auch hier das Problem, dass anscheinend keine "speziellen Einstellungen", wie bsp. für "back" oder ähnliches schnell zu finden sind, sondern nur "globale" Einstellungen, auch wenn man auf die entsprechenden Passus (wie beispielsweise genannt, das "zurück") in der angezeigten Seite klickt.

Da verstehe ich nicht wirklich, was du damit meinst. Wenn du einen "Zurück"-Link meinst: Wenn du links im DOM-Baum einen Absatz <p class="back"> markierst, dann wird rechts angezeigt, welche Styles diesen Absatz formatieren. Und zwar alle Styles im Rahmen der Kaskade. Ich weiß nicht, was du dabei mit "speziell" oder "global" meinst.

**thepixture** · 27.08.2013, 23:30

Also ich nutze nach wie vor den Firebug. Komme damit irgendwie am besten klar. Den Firefox eigenen Inspektor (rechts Klick "Element untersuchen") hin und wieder.

Damit Du weißt, wo welche CSS-Definition steht, kann ich Dir nur theme_plus wärmstens empfehlen. Solange du im Backend angemeldet bist, bekommst du damit in der Frontend-Vorschau auch die einzelnen CSS-Dateien angezeigt.

**Berliner** · 28.08.2013, 13:12

Zitat von pmmueller

Das ist doch bei allen Entwicklertools so, oder meinst du irgendwas anderes?

*lächel* ja, mag wohl bei allen Entwickler-Tools so sein, mir ist es nur beim Tool in Chrome sehr schnell aufgefallen, dass es intuitiv bedienbar ist - bei Firebug musste ich mich erst einmal grob "reinwurschteln" (aber es ist eben meine Erfahrung)

Zitat von pmmueller

Da verstehe ich nicht wirklich, was du damit meinst. Wenn du einen "Zurück"-Link meinst: Wenn du links im DOM-Baum einen Absatz <p class="back"> markierst, dann wird rechts angezeigt, welche Styles diesen Absatz formatieren. Und zwar alle Styles im Rahmen der Kaskade. Ich weiß nicht, was du dabei mit "speziell" oder "global" meinst.

Ich hab mich da wahrscheinlich wirklich etwas umständlich ausgedrückt: Ja, ich meinte beispielsweise den "Zurück"-Link, der als <p class="back" dargestellt wird.
Mit global meinte ich, dass es systemerzeugte CSS-Dateien sind, mit "speziell" meinte ich beispielsweise die basic.css oder die default.css, welche im BE bearbeitet werden können - und es eben in einer der beiden keine vordefinierten Einträge in der CSS bei bspw. "zurück" gibt.
Auf diese beiden Sachen bezog sich meine Aussage, dass die in den Tools dargestellten Einträge eben aus den system-erzeugten CSS kommen und somit keine Rückschlüsse auf die festen, im BE editierbaren Css-Dateien, zulassen, was ich sehr schade finde..

Ich hoffe, meine Ausführungen waren diesmal nicht so verwirrend.

Beste Grüße

**Berliner** · 28.08.2013, 13:18

Zitat von thepixture

Also ich nutze nach wie vor den Firebug. Komme damit irgendwie am besten klar. Den Firefox eigenen Inspektor (rechts Klick "Element untersuchen") hin und wieder.

Damit Du weißt, wo welche CSS-Definition steht, kann ich Dir nur theme_plus wärmstens empfehlen. Solange du im Backend angemeldet bist, bekommst du damit in der Frontend-Vorschau auch die einzelnen CSS-Dateien angezeigt.

Vielen Dank für deine Empfehlung - ich gehe davon aus, dass du damit arbeitest, bzw. schon damit gearbeitet hast?
Für mich war leider nicht genau erkennbar, ob es sich als Extension auf ein laufendes Contao 3.1.1 aufsetzen lässt, da stable nur auf 3.1.0. steht? Gibt es hierzu schon Erfahrungen?

Beste Grüße