Feedback for IE Dev Toolbar Beta 3

Summary: Feedback for InternetExplorerDevToolbar

Feature request -Outlining Elements

When wanting to outline elements like ul, li, etc. I have to go to Outline > Any Element.., and add the element i want to outline. if I refresh the page I have to do the same thing again to outline any element other than the predefined ones given under 'Outline'. It would be nice to be to save, or at least temporarily save the custom tags that I want to outline, so I don't have to keep going into 'Any Element..." and re-adding them after the page is refreshed.

Feature request - Extending the properties pane into a watch/locals pane

The property window shows the text "object" when there's a property of the type object. It would be so nice if you could expand the object and see its properties, making it a "Locals" or "Watch" pane as we know it from the Visual Studio script debugger.

Feature request - Hotkey for "Open Debugger at next statement"

A really low hanging feature would be a hotkey that triggers the command "Open Debugger at next statement", because when you're debugging mouse-interactions in the browser you can't use the mouse to open the menu an choose the command - you need a hotkey that you can press on the keyboard to start debugging at the right spot.

Frames - local validation?

Understanding frames are out of fashion, I have no choice and in fact because of the way the site works validation can only be done from the client browser. :-(

So, I am looking for more support of them. Is there a way to do Local Validate on the HTML and/or the CSS of a frame in a frameset? Is there a way to do validations on the generated sources rather than on the original?

Feature Request

Shorter distance to travel with mouse. Right now, to select an item, I must
1. navigate to top-right-menu to click convenient "IE Developer Toolbar" button
2. Navigate to bottom to click same icon for "Select element by click"
3. Find the object I want to click, if it's still visible
Compare with the UI for firebug, which has the icon for opening the control in the bottom toolbar, much nearer the "Inspect" button

Feature Request - Show Comments

FireFox Dev Toolbar has this feature and it is very useful when trying to figure out which jsp you are currently viewing and where the next inserted jsp begins. We use struts and tiles so it can be quite cumbersome trying to figure this out. We place a comment containing the name of the jsp at the top of each file to help alleviate this but it would be nice to have it neatly displayed in the browser rather than searching through the page source. I am sure others can find similar uses for this feature.

How to activate the DOM Explorer

How can I activate the DOM Explorer when all menu's and taskbars are deactivated?

I Just Tried DOM Explorer

Why can't I see the contents of IFRAMEs? After all, the content is an integral part of the page presentation. Specifically I wanted to be able to read the contents so I would know the advertising messages my ads vendor is providing. Once I was sure it worked in DOM Explorer, I was going to write some code to record the ads on a continual basis. If certain ads are shown too often I would go to the vendor and restrict them so I would have fresh material. Does this not work by design? By agreement? By some other reason?

I believe this is due to cross-site scripting security features. You can't access the DOM for a child window with a domain that is different from its parent. I ran into the same problem when trying to script IE. If an IFRAME has the same domain, it is browsable in the DOM explorer.

Feedback on Beta 3

Please bring the toolbar-interface back. As it is now, the panel in the bottom of the window eats way much more screen real estate than the previous toolbar ever did. And much used functionality have been hidden behind a mouse-click.

Feedback Beta 2 and earlier Feedback

Feature request - file/save as

Could a new functionality 'file - save as' (in various formats : XML, text, ...) be developped ?
It could be helpfull to save the DOM document, when it's generated by DHTML.
When I'm prototyping new application, I use pure HTML & Dynamic data binding (with MS-TDC or XML and javascript). But this makes the HTML prototype less readable. Getting the DOM result, it could be used by developers to view the generated HTML.

Thanks in advance.

Feature request (bug?) - HTC ViewLink

Drill down into HTC ViewLink content - currently only the top level document is shown.

Feature Request - Launch Toolbar and "Select element by click" with a hotkey

Use a hotkey to launch the toolbar, diretly into the "Select element by click" option.

Status Request -

Is anyone at Microsoft IE Dev team looking at this site?
So is this tool still being developed? The latest version I can find is from March with a version number of 1.0.1517.0?

Feature Request - Convert POSTs to GETs : 19 October 2006

The Firefox Developer Toolbar has a "Forms" menu with the option to convert POSTs to GETs and GETs to POSTs. Where I work, this feature is critical for debugging. I would like to see this ability added to the IE DevToolBar.

Feature Request - "Drip"-like features

Have the ability to see javascript memory leaks similar to http://outofhanwell.com/ieleak/index.php?title=Main_Page

Feature Request - Populate <FORM> Elements

Populate form elements using predefined configuration options or populate the form elements with their associated ID or NAME propery. In the predefined config, the developer should be able to add form ID or NAME such as "address" and supply "1234 Main Road" as the value pair, and add N ammount of these entries via the config. If the developer populates NAME VALUE pairs via the config and chooses to populate the forms via this method and the parser comes across a FROM element NAME or ID that was not defined in the config, then it should default to using that FROM elements NAME or ID as the value it populates into that FORM elements value parameter. The Firefox tool bar has a basic implimentation of this, but does not allow you to defined NAME VALUE pairs, I think this would be a nicely added touch to the IE Tool Bar.

Feature Request - Http-headers

I would like to have a list of http-headers, booth sent by the client and recieved from the servers.

You should look into Fiddler for doing this... it gives you all this information an more. Check it out at www.fiddlertool.com

Feature Request - compare CSS styles

Create a "compare styles" feature. Often when working on a page, I have two sections/elements that should be exactly alike, yet they display differently. Add a "compare" feature so that I can select two elements, and get a "winmerge" style comparison of the styles. That way, instead of sitting and line by line comparing the styles being applied to the elements, I can quickly see where the style's are differing. This makes finding errors with selectors and inheritance much quicker. Alternatively, a feature to dump an element/node's style to a text file stylesheet would be just as helpful. Then I could dump to textfile each node's style, and then do a winmerge manually on the textfiles.

Feature Request - table cell information

Sometime I have a html page with a lot of nested tables, I wish to select a cell and in the properties get the table number and the cell number, I hope you understand me!.

Feature Requests - multiple element selection

* Select multiple elements and apply changes to all of them at one time
* The ability to copy text from the "Current Style" table and particularly the "Current Value" column

Feature Request

It's a bit lame, but how about a View Source? There are pages that are loaded where I can't use the View...Source from the IE menu. Currently I have to load the page in Firefox and use it to view source. Would be nice if there was a way to force IE to display the source. Would be even nicer if I could get a "rendered" source, like Firefox, but I'd be content with just the view source. Please?

Feature Request - use different media style sheets

I am trying to track down a problem with my style sheet and it would be really nice if I could pretend that my screen was a different media. Something like a menu called 'Media' with options of 'Screen', 'Print', 'all', etc. When an option is selected then the DOM would reflect this page on that media.

Feature Request - delete nodes from DOM Explorer

I'd like to be able to, after selecting a node in the DOM Explorer, delete it completely from the DOM. Like a TD, DIV, etc.

An annoying item needs to be removed!

WHY IS THE DEVtoolbar SO LONG? WHY DOES IT TAKE SO MUCH EXTRA SPACE? I am not sure about other computers but on my computer, I cannot move anything after "show ruler" somewhere in range of 400 pixels. I have a 1152x??? resolution and I have other toolbars that I would like to put right next to the devtoolbar, but I cannot because the toolbar is set to be that long.

If anybody who is developing the toolbar is reading this please put a star at the end of this entry. If you are going to make the change soon, please put a double star. Thanks.

Another vote to get this fixed

Please make this toolbar behave the same way as every other toolbar. It's width is too much and the toolbar name does not need to be displayed. Thanks

My Top 3 Feature Requests

1. bi-directional (Live) DOM-to-Browser interaction. I should be able to click any where on the html document in my browser nad have the DOM update accordingly.
2. Cut-n-paste tag paths from the DOM browser. Wow, I could find this anywhere and it is a must have feature for sure.
3. Managed code please. I need to embed this in a C# application. How do I do it? where can we get programmer documentation on the IE Developer toolbar... lets say we want to embed it in our apps???

cool stuff - albeit a bit long in coming.
-- LaVinci

XML Data Islands

Am I missing something? Is it possible to see the contents of XML data islands?
Thanks, Vinnie

Add "Delete all Cookies", and "Delete Cache and Cookies" and "View Cache" to the bar.

Especially the "View Cache" thing is important, because otherwise we're forced to manually navigate to "Temporary Internet Files"

Inline Javascript Text Area

It would be great to have a javascript text area, that would execute against the current dom. alert('myClientId'); and get back the object as an alert textbox would be great. This would allow for easier dubugging of client side functions. This can already be done with a little javascript and a textbox on your own, but it would be cool to be built into the tool. scott.cate at myKB.com

More CSS features

I feel I spend too much time in the obscure art of fine tuning my CSS. I like the current style pane, but properties are named after DOM and not after CSS. What I would really like to see is something I can directly copy and paste to my CSS. I am not sure but I think the current style pane shows effective style on each element, which is excellent. However, it would also be very useful to get some traceability between the value of each property to the matching CSS selector. I am sure the logic is somewhere in every browser, but I know of no browser that exposes this. Is this too complex to get?

- diegov (diego dot vega dot 1 at gmail dot com)
We've made a few changes to these things toward what you are getting at - jvarga


Great tool. I actually have been looking for something like this. It would be nice to see cookie modifications real time. I downloaded fiddler earlier today, and this is just a great coincidence. Good job and I cant wait to see things improve. - ScaleOvenStove


Had to use IE to download. :(


I downloaded just fine with Firefox; it's only a .msi file.

Speed Improvements

Hi, It is a handy tool, but it is way too slow to use as a proper developer tool. Although I don't use firefox that often, I know one of the plugins that they use which is similar to this is very very fast.

-Paul Kinlan: paul.kinlan at gmail.com (If you would like to email me)

Other

When you show images sizes, if the image is too small then you can't see the image size. I don't know if to classiffy this as a bug, but it makes it pretty useless. :) Check it out on the channel 9 site.

-Paul Kinlan: paul.kinlan at gmail.com (If you would like to email me)

Keyboard shortcut for Show Ruler

Somehow the keyboard shortcut for Refresh page (CtrlR) has been replaced by IE Developer Toolbar for show/hide Ruler. I find this is pretty annoying, because CtrlR is very handy for refreshing page then F5, and when it's get replaced by the Toolbar, I have to restart the IE to reset the mapping.
Can you guys fix this problem?

-Feng Xiao

The Keyboard shortcut for show ruler appears to be Shift-R in my build, which is really irritating - please fix that soon. Feng seems to run into this with Ctrl-R... perhaps it could be Ctrl-Shft-R?? :) Otherwise, I love it.
- corrigan1313

Toolbars appearance in IE

The toolbar itself seems to behave oddly. When I put it on a toolbar line with another toolbar, it seems determined to right align itself, and has an enormous amount of blank space on it right edge (about 40% the width of the text in the tool bar) that you can't reduce. If my IE is much smaller than full screen on a 1024x768 screen, it forces itself over the top of other icons in its shared toolbar line. I'm running XP Professional SP2 and IE 6.0.2900.2180... Besides that, I love it.
-Darren Tracey

Javascript console

We need a Javascript console like in Firefox. The current error reporting dialog often shows the wrong file. For instance if we have an error in the .js file, it shows up as an error on the web page. We can turn on the script debugger, but it annoys us every time there's an error. Firefox's Javascript console actually brings you to the line of the file the error occurred on. Not only that, but in the dialog, we can't even copy the text to clipboard.

Javascript errors are not very helpful.

We need better description of Javascript errors. For instance, "Line 1, char 1, Object expected" is not very helpful when using getURL from Flash to call a javascript function that doesn't exist. Can't you at least write out the name of the object in these cases? Same thing happens if you do javascript:nonexistant(); in the location bar. In Firefox, however, we get "nonexistant is not defined". Can't IE display the same thing?

Microsoft Script Debugger needs to catch every error

I know this isn't specifically about the Dev Toolbar, but it's related. I don't have the script debugger come up on every error, especially when it's an "Object expected, line 1" type error, or an error about a function or member function of an object not existing. This happens enough that Microsoft should be able to reproduce. Not having it come up when I need it gets in the way of debugging pages. I wasn't using javascript exceptions when this happened.

Disable/Change CSS

This is a great feature in Firefox, especially for developers. The ability to disable CSS by stylesheet (or completely) is very helpful for verifying selectors.
-MattL
done! - jvarga

Update CSS display on :hover

It would be very useful if the toolbar's CSS display updated to show the styles applied to a link (hopefully, any element in IE7) via the :hover pseudo-class when one mouseovers over the element.
-NickFitz

Image information in <input type="Image">

I love the information about images (size, dimensions etc) but it is not showing for any input-type images. Is it possible to add the information for these images as well?
-Marrik

JavaScript Object Explorer or better JSON Explorer

It would be very useful if the toolbar provided a JavaScript JSON explorer similar to what we have in the .NET IDE while debugging. This feature would be appreciated a lot with AJAX being used as the primary technology for web apps. Since AJAX creates the JSON returned by the server at the background, we dont have a way to inspect what is actually returned. I like the "Javascript console" idea with which i could achieve this thing, but i would be better off with an explorer where I just type in the JSON variable name and i see the entire tree. I would use the "Javascript console" feature (if provided) for fine-tuned debugging.
-Badri

Feature Requests: Document Attributes and VML

It would be most helpful to be able to see the DOCTYPE and what standards-mode IE is using (and a few other things, like viewport attributes). For a page in a frame, the DOM Explorer shows a #document object--why not a <document>, and for the main document?

When a page has VML, the toolbar's Image functions can't find any of the images and Outline can't find the tags. Makes the Image Report kind of short. I'm sure that no web designer would use VML on purpose (we have MS Word for that!), but it would be helpful if the toolbar had a little more visibility into the content. IE7 supports it, doesn't it? I'm sure that XHTML 1.1 will bring additional namespaces into web pages, so it would be good to find a way to support what the browser handles now (display the parsed attributes, and at least the CSS Behavior).

For the love of God, Montressor!

The problem with the fixed width preventing putting the toolbar on the same line as the address bar or another toolbar was reported on the IE blog by Jie Ren on September 17, 2005. You've released once or twice since then, this is probably a One-Line Fix, but you haven't done anything about it. Using the toolbar's own ruler I estimate that the minimum width is about 675 pixels, and 512 would be more than enough. Do you not dogfood your toolbar? Or is everyone at MS using this either running at 1600x1200 or higher, or puts the developer toolbar on a row of its own? Is the problem that, depending on the user's fonts, etc., 512 pixels might not be enough? Fine, let them resize it bigger if necessary.

I have found only one way to use the toolbar. All its functionality can be accessed from the menus of the DOM explorer. So, turn on the toolbar, pop up the DOM explorer, and turn the toolbar back off. Any other way, and it is just too painful losing so much real estate to it when you aren't using it. Please, please, please, if you can't or won't fix the UI, at least add an entry to the Tools menu so that the DOM explorer can be launched from there, without having to show/hide the toolbar to get to it.

To fix the UI: Eliminate the "DevToolBar" vanity label, set the minimum width to about 100 pixels (let it get clipped at the right if the user wants it to be, why is it your responsibility to stop them?), and perhaps change "View DOM" to "DOM..." and change "Show Ruler" to "Ruler..." Although, those last two act as toggles, too, so it isn't just a case of popping up a dialog, and the "..." may not apply.

Feature Request - hex color value in color picker

Add the hex color value to the color picker, then allow it to be copied to the clipboard. This is a 5 minute change tops :)

Feature Request - MHT download

Please add fully working MHT download, preferably to the IE itself, but if it's not going to work, at least make it available in the toolbar :)

Feature Request -- Don't pin DOM Explorer to new windows

When using the DOM Explorer and a new window pops up, either from the application or from developer toolbar (like the Validate links), the new window shouldn't have the DOM Explorer in it. This is particularly true if the new window isn't the same domain as the old window.

Feature Request - view source 'chart'

How about adding a "Chart" feature, like the firefox extension View Source Chart http://jennifermadden.com/scripts/ViewRenderedSource.html

Feature Request - modal dialog support

I want to use this tool with modal dialogs (opened by window.showModalDialog(...) call), but it's impossible now?

Feature Request - ability to change outline element size

Be able to change size of outline on elements when Outline elements is chosen from the toolbar. It's set to what looks like 2px now - would like to be able to set it to 1px to match Firefox.

Feature Request -- Image report and Image helpers should consider background images, too

It'd be very nice to have the Image report and the other options (where applicable) also consider background images. Since more and more pages are moving to do layouts completely with CSS background-images should become more prevalent and currently most tools simply ignore them.

Feature Request

1. It would be great to have a way to activate pseudo-classes on elements.
2. A method of editing the live version of the stylesheet(s) being applied to the page would be even more helpful.

Color picker palette

With the color picker you can only choose colors in the IE Window. How about the ability to choose colors from a palette (and supply a variety of palettes)? ColorZilla is a good example of how a picker should work.

Behave like a menu

It should behave more like a menu - at the moment, you click on an item (e.g. disable) and it pops up a sub menu. Mousing over the next menu item (view) does not bring up its items (you have to click on it).

View rendered source

If you create add content dynamically to a page (i.e. creating a new about:blank page and using document.write) you cannot view the code when you right-click > view source. You should be able to view the source of any page (including XML documents, but not binary formats like Flash and QuickTime etc).

View JavaScript and CSS

Including embedded and external resources - in the same order as they are on the page

JavaScript/CSS debugging ALA Firebug

So when you get an error it jumps to the correct line that is the cause. An inspector that works in the same way as Firebug would be ideal (where you can navigate the DOM of the rendered HTML and even modify aspects of it).

Cosmetic improvements

Icons for each of the menu items

Tablet PC Resolutions added or ability to add

As a Tablet PC developer, it would be nice to be able to add or have added to the options some of the resolutions while in Tablet mode. ie. 768x1024 and 1050x1400

Web Forms - Overriding the Enabled Property

I just noticed today that I am able to override the Enabled property of a web form control by removing the "disabled" attribute after selecting the control using the developer toolbar. More importantly, I was able to post my changes and did not receive any errors from the server. It seems like a potential security issue that the enabled property can be changed at the client with no exception thrown at the server.