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 2009-04-14 08:40:54

garethjmsaunders
New member

Alphabetical order in Style and Computed Style tabs

I've just discovered DebugBar for IE and it's really useful thanks. I'm currently using DebugBar within IETester 0.3.2.

One thing that I'd find *really* helpful and would help speed up debugging is listing the declarations in the "Style" and "Comp. Style" tabs in alphabetical order.

For example, I'm examining a < > TABLE tag and in the Comp. Style tab I see something like this:

BORDER-LEFT-WIDTH: 0px;
WIDTH: 500px;
FONT-SIZE: 180;
MARGIN-RIGHT: 0px;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM-WIDTH: 0px;
FONT-FAMILY: Verdana;
BORDER-TOP-WIDTH: 0px;
LINE-HEIGHT: 1.5;
BACKGROUND-COLOR: transparent;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: 0px;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 1.4em;
COLOR: #222;
TEXT-ALIGN: left;
MARGIN: 0px 0px 1.4em;
PADDING-BOTTOM: 0px;

It's really hard to quickly scan through the list and pick out what padding has been set, for example, as those declarations are scattered throughout the list.  Arranging it alphabetically, however, makes it much easier:

BACKGROUND-COLOR: transparent;
BORDER-BOTTOM-WIDTH: 0px;
BORDER-COLLAPSE: separate;
BORDER-LEFT-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px;
BORDER-TOP-WIDTH: 0px;
COLOR: #222;
DISPLAY: block;
FONT-FAMILY: Verdana;
FONT-SIZE: 180;
LINE-HEIGHT: 1.5;
MARGIN-BOTTOM: 1.4em;
MARGIN-RIGHT: 0px;
MARGIN: 0px 0px 1.4em;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
TEXT-ALIGN: left;
VERTICAL-ALIGN: middle;
WIDTH: 500px;

I'd also prefer to see the declarations displayed in all-lowercase (or at least an option that allows me to select whether these declarations are shown as upper- or lowercase) as it's much easier to read (less shout-y) and while I recognise that CSS is case-insensitive it's generally written in all-lowercase.

Thanks

Gareth

Offline

 

#2 2009-04-14 08:52:02

fabrice
DebugBar Support

Re: Alphabetical order in Style and Computed Style tabs

Good point. I will try to improve this part in a future DebugBar release.

Don't forget that DebugBar is not free for professional usage :-O.

Offline

 

#3 2009-04-14 18:09:04

garethjmsaunders
New member

Re: Alphabetical order in Style and Computed Style tabs

fabrice :

Don't forget that DebugBar is not free for professional usage :-O.

I've just checked your registration page.  It says "If you are using the Debugbar for private use or educational use, it is free to use."

I'd like clarification on what you mean by "educational use", because I work within the Web team at the University of St Andrews (wwwst-andrews.ac.uk) which is obviously an educational establishment and not strictly commercial.

I look forward to hearing from you.

Gareth

Offline

 

#4 2009-04-15 07:11:19

fabrice
DebugBar Support

Re: Alphabetical order in Style and Computed Style tabs

I'd like clarification on what you mean by "educational use", because I work within the Web team at the University of St Andrews (wwwst-andrews.ac.uk) which is obviously an educational establishment and not strictly commercial.

In your case, you are not using DebugBar for educational purpose, but to develop the university web site. Is that right ?
In this case, you should buy a license in order to use DebugBar.

"educational use" means that you are using DebugBar to teach students.

Offline

 

#5 2009-04-15 09:54:41

garethjmsaunders
New member

Re: Alphabetical order in Style and Computed Style tabs

Excellent. Thanks for the clarification -- much appreciated.

Gareth

Offline