CSS attributes are not showing in IETester with DebugBar / DebugBar forums

TrevorGerzen · 2009-03-20 18:50:45

I just updated IETester this morning and I am really pumped to use the DebugBar in IETester for IE6.
As of right now it's not doin' for me. I was thinking that this was going to be an awesome alternative to
Firebug, for IE. The screenshots on your site show it doing what I need it to do. If you could help me out
at all I would be greatly appreciative. I'm adding in some screenshots. I'm running Windows Vista Ultimate
in VMWare Fusion on a MBP with OS X 10.5.6

fabrice · 2009-03-20 19:06:13

Hi,

What is your problem exactly ?

When I check your screenshot, it shows the style applied to the element. Then, on the "Attrs" tab, it shows all the user-defined attributes. To have the computed style, that is all the css attributes applied to the element, go to "Comp. Style".

fabrice · 2009-03-20 19:07:25

I see, maybe the problem is with the "Attrs" tab : Maybe it is a little bit evasive, but this tab shows the list of attributes defined by the user in the source code.

TrevorGerzen · 2009-03-20 19:14:29

I was thinking that when I dragged the target over and selected an element that it would give me the list of CSS attributes. The main reason I want to use this tool is for CSS debuggin in IE 6. I found the list of CSS selectors but when I try and edit the values it doesn't change. That's what I do in Firebug (sorry to compare but it's the best tool for what I do).

fabrice · 2009-03-20 19:24:51

The "Comp. Style" is what you want right ? It show the current applied styles to the element.
It is read only so far, but will be editable in a future version so you will be able to do live css editing on the web page.

The "Attrs" tab shows the html attributes applied to the element, so if you have :

<a href="..." target="_blank" style="mystyle">

you will have 3 entries in the "Attrs" tab : Those entries can be edited and pressing "Enter" key will apply the change to the page : It may not work under IETester (it works with standard IE). I will work on this problem and will correct it in a future release.

I try to do my best to implement all the features of Firebug into DebugBar, so stay tuned as new versions are released.

TrevorGerzen · 2009-03-20 19:45:51

TrevorGerzen · 2009-03-20 20:10:29

If that's what you're referring to then I'm stoked. You have a rad product and have done awesome work with it. If that is possible to do with the latest release then I would love to know how cause I just can't seem to figure it out

TrevorGerzen · 2009-03-20 20:16:52

I had a thought. I'll just throw this out there. Is it possible to add something in on right-click? On the Mac using Safari or FF if you right-click on something there is an option to "Inspect Element". In FF if you have Firebug installed it will open Firebug open with that element selected and the same happens in Safari with it's developer tool.

fabrice · 2009-03-20 20:23:11

OK, a lot of questions coming :-O !

If that's what you're referring to then I'm stoked. You have a rad product and have done awesome work with it. If that is possible to do with the latest release then I would love to know how cause I just can't seem to figure it out

I suppose your screenshot is from IE. It looks like the edition does not work under IETester because the "Enter" key is not working. This is a bug, so I will try to correct this asap and release a corrected version.

I had a thought. I'll just throw this out there. Is it possible to add something in on right-click? On the Mac using Safari or FF if you right-click on something there is an option to "Inspect Element". In FF if you have Firebug installed it will open Firebug open with that element selected and the same happens in Safari with it's developer tool.

There is a similar tool in DebugBar : On the "DOM" tab, there is a target icon : Click on it, kep the mouse button down and you can fly over the web page and it will show elements. Release the mouse button and the element will be selected in the DOM tree with all the information for this elements in the subtabs (source code, style, com. style, attrs, ...). Is it what you want ?

TrevorGerzen · 2009-03-20 20:36:02

the very last screenshot I posted was from your homepage.
I have used the target deal to select DOM elements and it works. I was just throwing out there the ability to right-click on an element in an actual web page. That one isn't a big deal.

As for the enter button not working, I understand. Is there any workaround for it right now or will I need to wait for an update?

fabrice · 2009-03-20 20:44:41

the very last screenshot I posted was from your homepage.

Yes I realized this after I posted my answer :-O !

I have used the target deal to select DOM elements and it works. I was just throwing out there the ability to right-click on an element in an actual web page. That one isn't a big deal.

I'll try to add this feature in a future release if possible (but it won't be a priority, live css editing is in the top of my list...)

As for the enter button not working, I understand. Is there any workaround for it right now or will I need to wait for an update?

I have no workaround so far... So I will work hard to provide a correction in the next few days if possible.

fabrice · 2009-03-21 11:12:11

The attribute edition bug will be corrected in the next DebugBar version :

http://www.my-debugbar.com/wiki/Doc/DebugBarChangeLog

KentR · 2009-09-28 05:43:26

I still can't edit CSS attributes. I'm not sure if it's supposed to work that way or not. I can edit the HTML tag attributes (id, class, name, etc), but can't change the actual CSS to try different styles.

Is it supposed to allow editing of CSS like Firebug does?

Using:

- DebugBar v5.3
- IETester 0.4.1

Thanks,

Kent

fabrice · 2009-09-28 16:56:49

Hi,

To change CSS attribute values you can do the following :

* Go to the DOM tree tab.
* Expand "Style Sheets" entry in the tree
* Search for the style you want to change and select it in the tree.
* Then select the "Attrs" subtab and you will have all the attributes associated to this style.
* You can then edit any attribute and press Enter to validate the change and see the result immediately on the page

Note that you can only edit existing attributes, you cannot add or remove attributes.

Hope this helps.

Announcement

#1 2009-03-20 18:50:45

CSS attributes are not showing in IETester with DebugBar

#2 2009-03-20 19:06:13

Re: CSS attributes are not showing in IETester with DebugBar

#3 2009-03-20 19:07:25

Re: CSS attributes are not showing in IETester with DebugBar

#4 2009-03-20 19:14:29

Re: CSS attributes are not showing in IETester with DebugBar

#5 2009-03-20 19:24:51

Re: CSS attributes are not showing in IETester with DebugBar

#6 2009-03-20 19:45:51

Re: CSS attributes are not showing in IETester with DebugBar

#7 2009-03-20 20:10:29

Re: CSS attributes are not showing in IETester with DebugBar

#8 2009-03-20 20:16:52

Re: CSS attributes are not showing in IETester with DebugBar

#9 2009-03-20 20:23:11

Re: CSS attributes are not showing in IETester with DebugBar

#10 2009-03-20 20:36:02

Re: CSS attributes are not showing in IETester with DebugBar

#11 2009-03-20 20:44:41

Re: CSS attributes are not showing in IETester with DebugBar

#12 2009-03-21 11:12:11

Re: CSS attributes are not showing in IETester with DebugBar

#13 2009-09-28 05:43:26

Re: CSS attributes are not showing in IETester with DebugBar

#14 2009-09-28 16:56:49

Re: CSS attributes are not showing in IETester with DebugBar