DebugBar forums / Change CSS on-the-fly

mark · 2008-04-04 21:25:00

I'm a bit confused. In the wiki, it says:

DOM Tab : View DOM Tree and modify tags attributes and css attributes on the fly to test your page.

I cannot figure out how to change CSS on-the-fly like it says. Change code on-the-fly is one of the best features of Firebug. I've been trying to find a toolbar for IE to do this.

Any help is appreciated in clearly this up for me.

- Mark

fabrice · 2008-04-04 22:48:59

Hi,

That is right. It is not very clear.

On the "DOM" tab, when you select a tag, you can go the the "Attrs" sub-tab and then modify attribute values by double-clicking on the value.

You can also modify css attributes the same way when selecting a css rule in the dom tree.

This is very limited so far. I plan to add live editing of the rule in the "source" sub-tab in a future release.

SuneR · 2008-06-09 13:52:29

fabrice wrote:
Hi,

That is right. It is not very clear.

On the "DOM" tab, when you select a tag, you can go the the "Attrs" sub-tab and then modify attribute values by double-clicking on the value.

You can also modify css attributes the same way when selecting a css rule in the dom tree.

This is very limited so far. I plan to add live editing of the rule in the "source" sub-tab in a future release.

I hope that this feature will be in soon, because this is also exactly what I need. Debugging CSS is easy in Firebug, but so far, DebugBar is the closest alternative in IE I've found - and on-the-fly CSS changes are very limited in DebugBar.

Am I right in saying, that on-the-fly editing is only available for class definitions, not id and inline styles?

fabrice · 2008-06-09 13:58:21

Am I right in saying, that on-the-fly editing is only available for class definitions, not id and inline styles?

Yes, unfortunately, you are right. Live CSS editing is on my todo with a high priority. I would like to integrate DebugBar into IETester first, but this one may come in second position !

theman777 · 2009-02-11 14:30:19

Is there already anything done?
I am also searching exactly that option. Live CSS editing
So i was wondering if you already could do that?

Ore if there is a other way?

fabrice · 2009-02-11 14:33:19

Not yet done on DebugBar. What you can do is use the console from DebugBar (or from Companion.JS tools) and use a javascript framework (like JQuery) to modify css using javacsript from the console.

theman777 · 2009-02-11 14:40:24

sorry i did not got that. could you explane that again to me?

You tell me, that there is a way to change CSS on the fly, as i know it from FF Firebug, in IE?

Man that would be grate

fabrice · 2009-02-11 15:29:13

If you have a webpage loaded and this webpage has JQuery loaded in it, then you can call jquery methods from the debugbar or companion.JS console.
As JQuery methods allow to change dom and css attributes on the fly, you can change your page on the fly from DebugBar or Companion.JS console.

murugan · 2009-09-04 18:02:00

Is the above feature available on v5.3? If yes could you please explain me how to use it?

fabrice · 2009-09-06 16:06:31

Hi,

Under DebugBar, you can select "Script" tab, and the third panel is an edit box where you can enter javascript code.
You can then click on "Execute Javascript" button and the javascript code will be executed in the currently loaded page.

Under Companion.JS, you can select "Console" tab and you will have a command line where you can enter javascript code and you will get the result, like the FireBug console.

uu234 · 2011-04-16 22:37:17

I hope that this feature will be in soon, because this is also exactly what I need. Debugging CSS is easy in Firebug, but so far, DebugBar is the closest alternative in IE I've found - and on-the-fly CSS changes are very limited in DebugBar.

fabrice · 2012-01-25 21:19:21

Hi,

I'm happy to announce that this feature has been added on DebugBar version 6 !

Regards.

tonyakerman · 2012-02-05 17:17:40

any update....

Announcement

#1 2008-04-04 21:25:00

Change CSS on-the-fly

#2 2008-04-04 22:48:59

Re: Change CSS on-the-fly

#3 2008-06-09 13:52:29

Re: Change CSS on-the-fly

fabrice wrote:

#4 2008-06-09 13:58:21

Re: Change CSS on-the-fly

#5 2009-02-11 14:30:19

Re: Change CSS on-the-fly

#6 2009-02-11 14:33:19

Re: Change CSS on-the-fly

#7 2009-02-11 14:40:24

Re: Change CSS on-the-fly

#8 2009-02-11 15:29:13

Re: Change CSS on-the-fly

#9 2009-09-04 18:02:00

Re: Change CSS on-the-fly

#10 2009-09-06 16:06:31

Re: Change CSS on-the-fly

#11 2011-04-16 22:37:17

Re: Change CSS on-the-fly

#12 2012-01-25 21:19:21

Re: Change CSS on-the-fly

#13 2012-02-05 17:17:40

Re: Change CSS on-the-fly