Der Titel sagt schon alles über das, was ich suche. Im Grunde soll es eine Software sein, die alle Styles einer Webseite sammelt, damit ich sie bearbeiten und speichern kann.
Bitte lesen Sie die Frage sorgfältig durch, da ich möchte, dass alle genannten Bedingungen erfüllt werden.
BEARBEITEN:Ich möchte hier deutlicher sein oder vielmehr meinen gewünschten Workflow beschreiben. Die Ausgangssituation ist, dass Sie die Quellen der Website auf Ihrem lokalen Rechner haben.
Nun möchte ich die einfachen Quellen (HTML/CSS) in meinem Editor/IDE/was auch immer öffnen (kein WYSIWYG!). Und ich möchte eine Live-Vorschau direkt daneben oder in einem anderen Fenster (nicht in einem anderen Tab!), die ich sehen möchte, während ich die Quelle bearbeite. Die Vorschau sollte automatisch aktualisiert werden (oder wenn ich die Datei speichere, was im Wesentlichen dasselbe wäre, da STRG+S eine Art Reflex ist :P).
Außerdem sollte es einen Inspektor geben, der wie die in Firebug oder Chrom(e|ium) funktioniert. Wenn ich in diesem Inspektor auf einen CSS-Selektor klicke, sollte der Cursor in der jeweiligen Quelldatei direkt dorthin springen.
NOCH EINE BEARBEITUNG:Ich habe es gefundenhttps://stackoverflow.com/q/4680109/220652. Fast das gleiche Problem.
Antwort1
Es gibt einige Optionen.
Momentan verwende ich einfachEntwicklertools von Google Chrome(Aktionsvideo), da es eine breite Palette an Überprüfungen, detaillierten Berichten und Überschreibungen ermöglicht. Nachdem ich meine Änderungen vorgenommen habe, kopiere ich einfach das aktualisierte CSS und überschreibe die relevanten Abschnitte der CSS-Datei, aktualisiere und mache weiter.
Hier habe ich eine Definition im Chrome Developer Tool bearbeitet
Ich kann den Dateinamen und die Zeilennummer (nach dem Kopieren der Änderungen) verfolgen und sie einfach in den Editor einfügen
Darüber hinaus gibt es ein kürzlich eingeführtes Tool namensWebPuttydas Ihr beschriebenes Problem lindern soll. Obwohl ich es noch nicht persönlich verwendet habe, wurde es entwickelt vonJoel Spolsky's UnternehmenFog Creek Software(Joel ist auch Mitbegründer von StackOverflow) Ich würde also wetten, dass es ein relativ stabiles, einfaches und effektives Produkt ist.
Antwort2
Diese Frage scheint bereits diskutiert worden zu sein, aber Sie sprechen genauer über einen CSS-Editor. Und ich bin sicher, dass Ihre Frage deshalb nicht als Duplikat markiert wurde.
Ich kann Ihnen jedoch die Verwendung mehrerer Tools vorschlagen, die ich in Antworten auf andere Fragen gepostet habe, wie dieses:Dreamweaver-Alternative in Ubuntu?, und obwohl ich wetten kann, dass Sie es bereits gesehen haben, fasse ich es hier zu Ihrer Bequemlichkeit zusammen:
Ihre Frage scheint ein wenig zweideutig zu sein.
Zunächst einmal und in Bezug auf die Alternative zu Dreamweaver fand ich alle Vorschläge aller anderen Antworten ausgezeichnet, aber als ich nach einer Alternative zu Dreamweaver suchte, war die für mich am nächsten liegende Anwendung dieAmayaProjekt. Das scheint umfangreicher zu sein als andere Alternativen und etwas ausgefeilter als der Kompozer.
Hier ist ein Screenshot von der offiziellen Website, damit Sie es in Aktion sehen können:
Weitere Screenshots können durch Klicken auf den nächsten Link aufgerufen werden: http://www.w3.org/Amaya/screenshots/Overview.html
Möglicherweise finden Sie es ein wenig instabil (zumindest war es das bei mir), aber es könnte auch Ihren Anforderungen entsprechen.
Nachdem ich mit WYSIWYG-Editoren herumgespielt hatte, bevorzugte ich die direkte Kodierung mit BlueFish, aber es ist kein WYSIWYG-Editor.
Und zu den Vorschlägen für dein Problem mit dem Firebug kann ich leider nichts sagen.
Bitte lassen Sie uns wissen, wie es Ihnen ergangen ist, wenn Sie Amaya eine Chance geben.
Viel Glück!
Bearbeiten == Nach der Installation von Amaya finde ich, dass es noch lange nicht stabil ist, aber irgendwie scheint es bessere Funktionen als andere Anwendungen zu haben, wenn man bedenkt, dass andere Software einfache Texteditoren sind und Amaya wie ein WYSIWYG-Editor ist.
Ich habe getestet, was Sie in Ihrem Kommentar gesagt haben, und festgestellt, dass Amaya nicht einmal bemerkt, dass sich etwas an der Struktur/den Namen der Dateien/Ordner geändert hat. Das entspricht Ihren diesbezüglichen Anforderungen nicht.
Im nächsten Screenshot können Sie sehen, dass ich den Ordner „resources“ in „resources1“ umbenannt habe und Amaya ihn immer noch als „resources“ anzeigt und es keine Möglichkeit gibt, eine Aktualisierung zu erzwingen. Selbst nach einem Neustart der Software und erneutem Laden des Projekts bemerkt Amaya dies nicht.
Ich werde Ihre Frage aufmerksam verfolgen und hoffe, dass jemand kommt und mir eine gute Alternative anbietet.
Viel Glück!
Außerdem fand ich in den Antworten anderer Benutzer auf die gleichen Fragen das "Blue Griffon Web Editor" scheint der einzige stabile Web-Editor zu sein, der ein Echtzeit-Vorschaufenster bietet, das übrigens im geteilten Modus nicht angezeigt werden kann. Sie können nur den Code oder die WYSIWYG-Vorschau sehen, nicht beides gleichzeitig.
Zu Ihrer Information sind hier Screenshots aufgeführt:
Vorschaubildschirm:
Code-Bildschirm:
Dieses Tool enthält viele nützliche Tools, aber einige der Add-Ons oder Plugins sind möglicherweise nicht kostenlos (kostenpflichtig). Das mindert die Attraktivität.
DerAptana Studio 3, was ich in dieser Antwort empfehle:Grundlegende IDE/Editor für die Webentwicklung wie Dreamweaver?ist für mich das beste Tool zum Programmieren, da ich mit einem Webbrowser auf meinem erweiterten Dual-View-Desktop eine Live-Vorschau anzeigen kann. Was bei Ihnen vielleicht nicht der Fall ist.
Das ist, was ich vorschlagen kann. Tut mir leid, wenn das nicht Ihren Bedürfnissen entspricht und ...
Viel Glück!
Antwort3
Ok, hört alle zu!Geanyist einfach GENIAL! Es hat ein Plugin, das eine Browservorschau hinzufügt. Sie können es in der Seitenleiste, in der "Bottombar" oder in einem zusätzlichen Fenster platzieren. Und jetzt diezweiAls zusätzlichen Bonus gibt es coole Killer-Funktionen.1.Dieser Browser verwendet WebKit. Das heißt, er hat diesen tollen Inspektor!2.Der Browser wird neu geladen, wenn Sie ein geöffnetes Dokument speichern.
Darüber hinaus hat es noch viele andere tolle Funktionen, aber Sie sollten es selbst ausprobieren. Ich für meinen Teil habe mich einfach verliebt. Hier ist ein Screenshot:
Antwort4
Probieren Sie das Firefox-Addon ausFeuerdiff. Es lässt sich in Firebug integrieren und fügt die Registerkarte „Änderungen“ hinzu, die, wie der Zen-artige Name schon sagt, alle Änderungen anzeigt, die Sie an CSS oder DOM vornehmen.
Klicken Sie mit der rechten Maustaste auf eine CSS-Änderung auf der Registerkarte „Änderungen“, um entweder einen Diff oder einen Snapshot Ihrer Änderungen zu speichern.
Es gibt auchCSS-Updater, obwohl ich es nicht verwendet habe.
Was die "Selektorlokalisierung" betrifft, bin ich mir nicht ganz sicher, was Sie meinen, aber es gibtwähleBug, die Sie herunterladen könnenHier.