CSS-Editor mit Echtzeitvorschau und Selektorlokalisierung

Der Titel sagt alles über das aus, wonach ich suche. Grundsätzlich sollte es eine Software sein, die alle Stile einer Website 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 sind.

EDIT: Ich möchte hier klarer sein oder vielmehr meinen gewünschten Workflow beschreiben. Die Ausgangssituation besteht darin, dass Sie die Quellen der Website auf Ihrem lokalen Computer haben.
Jetzt 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!). Ich möchte sie sehen, wenn ich die Quelle bearbeite. Die Vorschau sollte automatisch aktualisiert werden (oder wenn ich die Datei speichere, was im Wesentlichen dieselbe wäre, da STRG + S eine Art Reflex ist: P).
Außerdem sollte es einen Inspektor geben, der wie 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.

EINE ANDERE BEARBEITUNG: Diese /programming//q/4680109/220652 gefunden . Fast das gleiche Problem.

Es gibt einige Optionen.

Derzeit verwende ich einfach die Entwicklertools ( Action Video ) von Google Chrome, da sie eine breite Palette an Inspektionen, detaillierten Berichten und Übersteuerungen ermöglichen. Nachdem ich meine Änderungen vorgenommen habe, kopiere ich einfach das aktualisierte CSS und überschreibe die relevanten Abschnitte der CSS-Datei, aktualisiere und stecke weiter.

Hier habe ich eine Definition im Chrome Developer Tool bearbeitet

Ich kann dem Dateinamen und der Zeilennummer folgen (nachdem ich die Änderungen kopiert habe) und sie einfach in den Editor einfügen

Darüber hinaus gibt es kürzlich ein Tool namens WebPutty, mit dem Sie das beschriebene Problem beheben können. Obwohl ich es noch nicht persönlich verwendet habe, wurde es von Joel Spolskys Firma Fog Creek Software entwickelt (Joel ist auch Mitbegründer von StackOverflow). Ich würde also wetten, dass es ein relativ stabiles, einfaches und effektives Produkt ist.

Diese Frage scheint bereits diskutiert worden zu sein, aber Sie sprechen genauer über einen CSS-Editor. Und ich bin sicher, deshalb haben sie Ihre Frage nicht als doppelt markiert.

Was ich Ihnen jedoch vorschlagen kann, ist die Verwendung mehrerer Tools, die ich in Antworten auf andere Fragen gepostet habe, wie zum Beispiel: Dreamweaver-Alternative in Ubuntu? und selbst wenn ich wetten kann, dass Sie es bereits gesehen haben, schreibe ich es hier für Ihre Bequemlichkeit:

Ihre Frage scheint etwas mehrdeutig zu sein.

Zuallererst und im Zusammenhang mit der 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 das Amaya- Projekt. Das scheint am reichsten zu sein als andere Alternativen und etwas raffinierter als der Kompozer.

Ein Screenshot aus dem offiziellen Web ist hier, damit Sie ihn in Aktion sehen können:

Weitere Screenshots erhalten Sie, indem Sie auf den nächsten Link klicken: http://www.w3.org/Amaya/screenshots/Overview.html

Sie finden es vielleicht ein bisschen instabil, oder zumindest war es für mich, aber es kann auch Ihren Bedürfnissen entsprechen.

Nachdem ich mit WYSIWYG-Editoren gespielt hatte, bevorzugte ich die direkte Codierung mit BlueFish, aber es ist kein WYSIWYG-Editor.

Und zu den Vorschlägen für Ihr Problem mit dem Firebug kann ich leider nichts sagen.

Bitte lassen Sie uns wissen, wie Sie es gemacht haben, wenn Sie Amaya eine Chance geben.

Viel Glück!

Bearbeiten == Nach der Installation von Amaya finde ich es noch lange nicht stabil, 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 / dem Namen der Dateien / Ordner geändert hat. Welches passt nicht zu Ihren diesbezüglichen Bedürfnissen.

Im nächsten Screenshot sehen Sie, dass ich den Ordner "resources" in "resources1" umbenannt habe und Amaya ihn noch als "resources" anzeigt und es keine Möglichkeit gibt, eine Aktualisierung zu erzwingen. Auch nach dem Neustart der Software und dem erneuten Laden des Projekts wird Amaya dies nicht bemerken.

Ich werde Ihrer Frage genau folgen und hoffe, dass jemand kommt und eine gute Alternative fallen lässt.

Viel Glück!

Außerdem habe ich in den Antworten anderer Benutzer auf dieselben Fragen den " Blue Griffon Web Editor " gefunden, der anscheinend der einzige stabile Webeditor ist, der über ein Echtzeit-Vorschaufenster verfügt, das im geteilten Modus nicht angezeigt werden kann . Sie können nur den Code oder die WYSIWYG-Vorschau sehen, nicht beide gleichzeitig.

Hier platzierte Screenshots für Ihre Bequemlichkeit:

Vorschaubildschirm:

Codebildschirm:

Dieses Tool enthält viele nützliche Tools, aber einige der Add-Ons oder Plugins sind möglicherweise nicht kostenlos (kostenpflichtig). Das reduziert die Anziehungskraft darauf.

Das Aptana Studio 3 , das ich in dieser Antwort empfehle: Grundlegende Webentwicklungs-IDE / Editor wie Dreamweaver? ist für mich das beste Programmierwerkzeug, da ich die Live-Vorschau mit einem Webbrowser auf meinem erweiterten Desktop mit zwei Ansichten anzeigen kann. Welches kann nicht Ihr Fall sein.

Das kann ich vorschlagen. Entschuldigung, wenn dies nicht Ihren Anforderungen entspricht und ...

Viel Glück!

Ok, jeder hört zu! Geany ist einfach super! Es hat ein Plugin, das eine Browser-Vorschau hinzufügt. Sie können es in der Seitenleiste, in der "unteren Leiste" oder in einem zusätzlichen Fenster platzieren. Und jetzt die zwei zusätzlichen Bonus-Bad-Ass-Killer-Features. 1. Dieser Browser verwendet WebKit. Das heißt, es hat diesen großartigen Inspektor! 2. Der Browser wird neu geladen, wenn Sie ein geöffnetes Dokument speichern.

Abgesehen davon hat es so viele andere tolle Funktionen, aber Sie sollten es selbst ausprobieren. Ich jedenfalls habe mich einfach verliebt. Hier haben Sie einen Screenshot:

Sorry Leute, aber ich werde meine eigene Frage beantworten. Ich habe gerade Stylebot gefunden . Es erfüllt fast alle Bedingungen, die ich habe. Es gibt keine automatische Vervollständigung, aber damit kann ich leben.

Hier ist ein Screenshot. Die Seitenleiste ist Stylebot. Sie haben einen grundlegenden Bearbeitungsmodus, in dem Sie schnell einige einfache Eigenschaften bearbeiten können, einen erweiterten Modus, in dem Sie das einfache CSS für das ausgewählte Element bearbeiten können, und mit "CSS bearbeiten" können Sie das gesamte CSS für die Seite bearbeiten.

Probieren Sie das Firefox-Addon Firediff aus . Es lässt sich in Firebug integrieren und fügt die Registerkarte "Änderungen" hinzu, auf der, wie der zenartige Name andeutet, alle Änderungen angezeigt werden, die Sie am CSS oder DOM vorgenommen haben.

Klicken Sie mit der rechten Maustaste auf eine CSS-Änderung auf der Registerkarte "Änderungen", um entweder einen Unterschied oder eine Momentaufnahme Ihrer Änderungen zu speichern.

Es gibt auch cssUpdater , obwohl ich es nicht benutzt habe.

Was die "Selektorlokalisierung" betrifft , bin ich mir nicht ganz sicher, was Sie meinen, aber es gibt selectBug , den Sie hier herunterladen können .

Aptana Studio ist eine großartige IDE, aber wenn ich mich nicht irre, hat es keine Echtzeitvorschau. Wie auch immer, wenn Sie interessiert sind: http://www.aptana.com/products/studio3

PS: Es gibt einen Hotkey für die Vorschau, es ist also keine große Sache.

Keine Software an sich, aber das Stylish Addon (Chrome und Firefox) aktualisiert eine Seite automatisch, wenn Sie ein Override-Stylesheet speichern. Im Gegensatz zu FireBug wird es gespeichert, sodass Sie es kopieren und in eine geeignete .cssDatei einfügen können, wenn Sie zufrieden sind.

Vor ein paar Wochen ist ein neuer Spieler auf diesem Feld aufgewachsen. Ich spreche über den Open Source Code Editor Brackets von Adobe. Alle Informationen, die Sie benötigen, finden Sie hier: https://github.com/adobe/brackets/wiki/Linux-Version

Die Version spring30 wurde erst vor ein paar Tagen veröffentlicht :) Viel Glück!