How to view active CSS of current element?

Hi there,

I’m currently testing out Pinegrow and try to decide if I’m gonna opt-in. I’m a professional web developer and my main problem with Pinegrow rightnow is that I cannot see the active CSS of an element I click. I need an overview of rules like in Firebug or Chrome’s dev tools.

I can see that information in Pinegrow, too, but only when I hover over the code icon </> of a specific class. That’s not gonna cut it for me.

So is it possible to display the currently active rules of an element I click on, like in Firebug?


In the current version, the CSS code is - unfortunately- only displayed via MouseOver or in a popup after click on the code-Icon.
But I hope that this will change in already announced version 3.
Try “Bootstrap Studio” or “Pingendo” or the chrome workspaces. These programs are better in this regard, but have many other disadvantages.

Thanks for your reply, fishmi. I wasn’t sure if I had overlooked an option.

Pinegrow would have been my go-to application, but this feature is for me the most important. In freelancing web development I need to work fast, finding e.g. which element in the tree has the border-bottom property needs to be a matter of seconds. I cannot look around for that for minutes, that would break my workflow completely.

Too bad there’s a sale right now, I’d loved to buy Pinegrow right away but I guess now I’ll wait until the feature is there. I need to consider, run some more test with Firefox / Pinegrow side-by-side maybe.

Also thanks for the recommendations, I’ll check em out.

I can confirm that: this feature is also the most important for me and therefore I can not work productively with PG.
But for the other features I find PG simply the best for rapid prototyping and therefore I put all hope on version 3 :slight_smile:
For proper web development I prefer Sublime or sometimes Brackets.

@maGeissin why not just purchase Pinegrow Pro? It’s worth purchasing for master pages and components (update instances), as once you a grip of these features, they improve your workflow, especially if you’re building from scratch.

If you think of all the powerful features Pinegrow has, seems silly to ignore them.

@Jack_Clarity I actually wanted to purchase PG Pro. Like I said, it would be my go-to application.
The reason I won’t buy it right now is, PG would have to replace my current workflow. Right now I’m very fast with my tools, Notepad++ and plugins, Firebug, blank themes etc. but I have a lot of overhead, a lot of manual work that eats time.

When I attempt to replace my current workflow, the new workflow got to have less overhead and not more. Because that wouldn’t make sense. Besides it would take me quite a while to learn the new application. I have to justify that investment, not money-wise but time-wise, by having a better workflow than before eventually. Without the discussed feature I wont have that. Please understand that it makes no sense for my to work with PG and my current workflow side-by-side, at least I cannot see that right now. Like I said before I’ll have to make some more test-runs to find out, but I’m pretty busy atm.

I’m a freelancer and have to do everything by myself, HTML, CSS, JavaScript, PHP, linux webservers, graphics design, customer communication, consulting, advertisement strategy, taxes, you-name-it and at the end of the day I have to clean my office all by myself. Being efficient means life or death for me.

Ok @maGeissin , hopefully @MhdAljuboori @matjaz and @Emmanuel are watching and will include this feature in Pinegrow 3.0

Active CSS view will be one of PG 3.0 features :slight_smile:


Brand new CSS editor, including viewing active styles, is coming to PG 3.


I’ve just started using It has a feature I’ve always wanted in Pinegrow, CSS snippets (although seems you can’t add your own custom sniippets, so not as good as I first thought)

But @matjaz & @MhdAljuboori I think you should include this feature in PInegrow 3.0 with the ability to add your own snippets, that can be pasted into the css editor with a single click from searching your custom snippet library or drop-down menu.