CSS-Editor mit Echtzeitvorschau und Selektorlokalisierung


9

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.


2
Firebug und die Webentwickler-Symbolleiste können beide CSS direkt bearbeiten, letzteres kann es auch speichern.
Lekensteyn

1
@Lekensteyn: Ja, aber Firebug kann nicht speichern und Web Developer kann keine Selektoren finden. Sie sind also nicht das, wonach ich suche. Es tut uns leid.
dAnjou

Antworten:


12

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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.


Wie genau kopieren Sie das CSS? Und können Sie es pro Datei tun? WebPutty scheint nicht in der Lage zu sein, lokale Websites zu verarbeiten, aber danke für den Hinweis.
dAnjou

1
@jAnjou Ich habe versucht, ein paar Screenshots bereitzustellen, um Ihnen zu zeigen, wie der Workflow ablaufen würde.
Marco Ceppi

Ah, ok. Dieser Workflow ist also fast der gleiche wie bei Stylebot. Größter Unterschied: Stylebot speichert das CSS, damit Sie die Seite neu laden oder andere Seiten auf dieser Website aufrufen können. Wie auch immer, das ist eine Gegenstimme.
dAnjou

5

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:

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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: Geben Sie hier die Bildbeschreibung ein

Codebildschirm: Geben Sie hier die Bildbeschreibung ein

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!


5

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:

Geany


Ich wünschte nur, es würde geöffnet, damit das Browserfenster in einem neuen "Tab" angezeigt wird. Das würde das Testen ohne CSS erheblich verbessern.
Nemo

Ich bin nicht sicher, ob ich Sie verstehe, aber Sie können in fast jeder anderen IDE eine Browser-Vorschau auf einem anderen Tab haben. Aber genau das wollte ich nicht.
dAnjou


Ah ... hmm. Leider ist es in Geany nicht möglich, die Browser-Vorschau (bei der es sich um einen voll ausgestatteten Browser handelt) in einer Registerkarte neben den Editor-Registerkarten zu haben. Aber Sie können es in einem zusätzlichen Fenster haben. Sie können es also mit mehreren Monitoren oder mit einem Breitbildmonitor (ein halber Browser, ein halber Editor) verwenden.
dAnjou

4

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.

Geben Sie hier die Bildbeschreibung ein


2

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.

gefeuerter Screenshot

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 .


Firediff scheint hier auf Natty und Fx 6.0.2 nicht zu funktionieren. Ich habe hier und da einige Änderungen vorgenommen, aber es gibt keine Änderungen auf der Registerkarte "Änderungen". Ich bin mir fast sicher, dass cssUpdater das ist, wonach ich suche, aber es ist nicht für Linux verfügbar. Mit "Auswahlposition" meine ich die CSS-Selektoren. Wenn ich mit der rechten Maustaste irgendwo auf die Website klicke und auf "Element überprüfen" klicke, zeigen mir Firebug oder der Chrom (e | ium) -Inspektor das entsprechende Element und sein CSS.
dAnjou

Es funktioniert, ich benutze es gerade in Natty und dem neuesten Firefox. Stellen Sie sicher, dass alle Änderungen angezeigt werden (klicken Sie auf den kleinen Abwärtspfeil auf der Registerkarte Änderungen).
Scottl

Ok, jetzt arbeitet Firediff plötzlich, aber es ist ein bisschen chaotisch und der Workflow damit ist nicht wirklich schön.
dAnjou

0

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.


Ich sehe nicht, wie Aptana eine meiner Bedingungen erfüllt (?).
dAnjou

0

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.


Ich verstehe nicht Kann es Selektoren finden?
dAnjou

0

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!

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.