How to debug CSS

["Ionuț G. Stan"]

How do you guys debug CSS given that class names are obfuscated. I'm
using a CellTable and some rows have up to 4-5 class names.

Is there a way to @export all these classes in a certain CSS file? I
don't want to explicitly export them all, even with an automated way of
extracting the class names.

Thanks!
--
Ionuț G. Stan | http://igstan.ro

[jhulford]

You can tell the compiler not to obfuscate the CSS class names in your
module's config file.

Add the following to your module.gwt.xml file:

<set-configuration-property name="CssResource.style" value="pretty"/>

[Jeff Larsen]

I usually just use firebug and I can figure out which styles are which by looking at the content.

[Rob Coops]

I use Google Chrome for this, (CTRL+SHIFT+i) then you can walk the DOM and find the element see exactly which stylesheets are influencing this element and what the computed style is, including inherited styles etc. It really is very very handy, Firebug is pretty much the same trick for Firefox (which I am just not a big fan of hence my usage of Chrome)

In IE I have no idea what you could use I guess that there might be a IE implementaiton of Firebug but I have no idea I try and avoid using IE as much as I can (been using it since version 3 and never really liked it much)

On Thu, Jul 21, 2011 at 3:49 PM, Jeff Larsen <lars...@gmail.com> wrote:

I usually just use firebug and I can figure out which styles are which by looking at the content.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/U1S2x3wocJQJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

["Ionuț G. Stan"]

On Jul/21/2011 16:46, jhulford wrote:
> You can tell the compiler not to obfuscate the CSS class names in your
> module's config file.
>
> Add the following to your module.gwt.xml file:
>
> <set-configuration-property name="CssResource.style" value="pretty"/>
>

Thanks, that's what I was looking for.

Is there a way to have this property interpreted only in development mode?

[Thomas Broyer]

No, but there are workarounds: http://code.google.com/webtoolkit/doc/latest/FAQ_DebuggingAndCompiling.html#Can_I_speed_up_the_GWT_compiler?

(note that setting user.agent or a single locale won't speed up the DevMode, but they are honored anyway, so this can be used to set devmode-only properties: you'll have a "dev" module and a "prod" module, instead of the suggested "firefox" and "all browsers" module; FYI, this is what Apache Wave uses to optimize the compiled code for production but have as much debug info as possible when developping)

["Ionuț G. Stan"]

Thanks Thomas, that should be enough for my needs right now.