DebugBar Forums
 
 HOME 
 DOWNLOAD 
 BUY 
 DOC / WIKI 
 FORUM 
 CONTACT 
Stay tuned : rss feed

Forum Home


advanced search

You are not logged in.

Announcement

Forums are now closed as we moved them to google groups. You can use the following Google Groups to discuss about DebugBar and IETester products:

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

mark
New member

Change CSS on-the-fly

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

Offline

 

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

fabrice
DebugBar Support

Re: Change CSS on-the-fly

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.

Offline

 

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

SuneR
New member

Re: Change CSS on-the-fly

fabrice :

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?

Offline

 

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

fabrice
DebugBar Support

Re: Change CSS on-the-fly

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 !

Offline

 

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

theman777
New member

Re: Change CSS on-the-fly

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?

Offline

 

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

fabrice
DebugBar Support

Re: Change CSS on-the-fly

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.

Offline

 

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

theman777
New member

Re: Change CSS on-the-fly

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

Offline

 

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

fabrice
DebugBar Support

Re: Change CSS on-the-fly

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.

Offline

 

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

murugan
New member

Re: Change CSS on-the-fly

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

Offline

 

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

fabrice
DebugBar Support

Re: Change CSS on-the-fly

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.

Offline

 

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

uu234
New member

Re: Change CSS on-the-fly

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.

Offline

 

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

fabrice
DebugBar Support

Re: Change CSS on-the-fly

Hi,

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

Regards.

Offline

 

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

tonyakerman
New member

Re: Change CSS on-the-fly

any update....

Offline

 

#14 2012-11-24 03:37:14

nylaine0416
New member

Re: Change CSS on-the-fly

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.

Offline

 

#15 2012-12-11 11:08:19

patrickatm4
New member

Re: Change CSS on-the-fly

I figured out how to do this:

DOM tab, used the drag/target to select and element on the page
Clicked the "Comp. Style" tab
Edit the CSS in there
Click the green tick to apply.

- - please let me know if there is  quicker/more efficient way

What would be fantastic if this could be done from DOM - Style Sheets, select sheet, "Source" tab. Edit the style sheet then apply (or realtime update) -> I'm used to using Web Developer Tool bar on Firefox and that's the single most useful feature of it, I was hoping I could do something similar with this.

Offline

 

#16 2013-04-10 18:34:37

fabrice
DebugBar Support

Re: Change CSS on-the-fly

patrickatm4 :

What would be fantastic if this could be done from DOM - Style Sheets, select sheet, "Source" tab. Edit the style sheet then apply (or realtime update) -> I'm used to using Web Developer Tool bar on Firefox and that's the single most useful feature of it, I was hoping I could do something similar with this.

I am planning to add this in a future DebugBar version!

Offline