Ubuntu – CSS editor with real-time preview and selector localization

software-recommendation

The title says everything about what I'm looking for. Basically it should be an software that collects all styles of a website so I can edit them and save them.

Please read the question carefully, because I want all mentioned conditions to be met.

EDIT: I want to be more clear here or rather describe my desired workflow. Starting situation will be that you have the sources of the website on your local machine.
Now I want to open the plain sources (HTML/CSS) in my editor/IDE/whatever (no WYSIWYG!). And I want a live preview right next to it or in different window (not in another tab!), I want to see it as I edit the source. The preview should be updated automatically (or when I save the file which essentially would be the same because CTRL+S is kind of a reflex :P).
Additionally it should have an inspector that works like those in Firebug or Chrom(e|ium). When I click on a CSS selector in that inspector, the cursor should jump right to it in the respective source file.

ANOTHER EDIT: Found this https://stackoverflow.com/q/4680109/220652. Almost the same problem.

Best Answer

There are a few options.

Currently I simply use Google Chrome's Developer Tools (Action Video) as it allows for a wide range of inspection, detailed reporting, and over-riding. After making my changes I just copy the updated CSS and over write the relevant sections of the CSS file, refresh, continue plugging away.

Here I have edited a definition in Chrome's Developer Tool

enter image description here

I can follow the file name and line number (after copying the changes) and just paste them into the editor

enter image description here

Beyond that there is a tool recently launched called WebPutty which is designed to alleviate your described problem. While I haven't used it personally yet it's developed by Joel Spolsky's company Fog Creek Software (Joel is also Co-Founder of StackOverflow) So I'd be willing to bet it's a relatively stable, simple, and effective product.

Related Question