|
Forum Home
|
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:
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
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.
Re: Change CSS on-the-fly
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?
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 !
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?
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.
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
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.
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?
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.
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.
Re: Change CSS on-the-fly
Hi,
I'm happy to announce that this feature has been added on DebugBar version 6 !
Regards.
Re: Change CSS on-the-fly
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.
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.
Re: Change CSS on-the-fly
patrickatm4 wrote: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!
|
