15

Is there a way or tool that could let me step through the painting of CSS rules, one by one?

Similar as one would do in an IDE with program code, but with CSS. (But I wouldn't preferably want to do it by taking the browser's source code and stepping through its underlying functions - I just mean stepping throug "updates" by CSS rules, in a form similar to a Web Developer Toolbar.)

I expect this is usually more tedious than useful, but in some cases it would really help, in web development, like debugging cats and owls or finding out how a particular effect is achieved.

edit to clarify, by "stepping through" I mean sg. like: potentially stopping the browser from painting another rule, after each end every rule I choose, before the next one is applied (each before the "final paint" of the page is finished), for inspection of what happens.

edit 2 after BoltClock's comment, I replaced the word 'render' with 'paint', to be more clear. Removed original to be uncluttered.

Community
  • 1
  • 1
n611x007
  • 8,952
  • 8
  • 59
  • 102
  • If I'm not mistaken, upcoming versions of browser developer tools will have such a feature. – BoltClock Nov 18 '13 at 08:30
  • All browsers webtools do this. When you choose element you have all CSS rules applied on selected element in oder (most important on top) – Volvox Nov 18 '13 at 08:59
  • @Volvox you misunderstand me. The CSS rules are *listed* but I cannot *stop the browser after each end every rule before the next one is applied*. – n611x007 Nov 18 '13 at 09:23
  • 1
    In chrome you can tick and untick the rules you wish to apply/not apply – aBhijit Nov 18 '13 at 09:31
  • 1
    I guess people aren't understanding the meaning of "rendering". Another word for it is painting. – BoltClock Nov 18 '13 at 10:21
  • @BoltClock thanks, I've edited my question in an attempt to make it more clear. – n611x007 Nov 18 '13 at 11:11
  • 1
    The browser isn't painting the page, then painting the overrides, then painting over that, all behind the scenes before it shows it to you. It steps through the cascade, then paints the result. Chrome has something akin to what you're asking for, in that you can see the logic after the fact, and check/uncheck boxes next to rules to show/hide their effects. –  Nov 18 '13 at 12:57
  • @aBhijit I guess so but that's a bit different. for example when ticking I choose the order of 'execution', when debugging the underlying code does have its own order. – n611x007 Nov 20 '13 at 11:58

1 Answers1

2

Beside already mentioned webtools i guess this is only possible if the complete source code of the browser is available so its possible to either locally debug or remote debug the browser application itself with breakpoints set to the interesting "toplevel" functions.

It is for example no problem to download the source of the Java based open source browser Lobo which can then be debugged like any other application directly from your IDE like eclipse, intellij etc.

I however dont think the complete source of products like the MS Internet Explorer will ever be fully available to allow you to debug its deepest magic (which in case of MS Internet Explorer probably also takes a livetime...).

So coming back to a browser that has source code available you can either:

  • Have the browser beeing compiled/ run inside a IDE and directly debug your local code
  • Have the browser running as application allowing remote debugging and the according source code as source for a remote debugger (mostly as well from within your IDE).

This way you can analyse the deep magic of such a browser where you see how the different resources like images, css etc. etc. are collected, validated, parsed, processed and in the end displayed.

Once the interesting functions are located and a good set of (conditional) breaktpoints is set this could be very useful when it comes to the behaviour of a specific browser.

If that however is too detailed for your context i guess there is no other possibility but to rely on the already given functionality regarding analysing the browsers behaviour like with chromes devTools or the Mozilla plugin Firebug. No doubt this will more and more be integrated in such plugins/ tools like the comment of user BoltClock suggests and it is always worthy to study the functionality of such plugins/ tools to take the biggest possible advance of them.

JBA
  • 2,769
  • 5
  • 24
  • 40