Random Musings

April 27, 2009

IE 8 : Script Debugger

Filed under: IE Developer Toolbar — haditeo @ 10:30 pm

How to debug a page using IE 8 Script Debugger feature ?

1) First of all load the page containing javascript properly

2) Press “F12” to load the IE 8 Developer Tools

3) Choose the “Script” tab, beside the “Start Debugging” button, you can select the file that contains the javascript that will be debugged. In my example, it’s loading the “webform1.aspx”.

select-a-file-to-be-debugged

4) In the top right corner, there is a textbox containing the text “Search Script”. Search a particular method to be debugged by inserting the method name into the textbox and click the forward icon button

5) Place a breakpoint properly and click “Start Debugging”

start-debugging

6) Invoke an action that will trigger the method to be invoked by the javascript engine. In my example, i click an image button to trigger the invocation of the “LaunchLookup” method.

debugger-hit

7) When javascript engine hit the correct intended method, it will highlight the particular line. It’s very convenient to use the IE 8 Script Debugger. Previously, i need to place a “debugger” line to trigger the Visual Studio 2005/2008 IDE to hook into the particular method.

8 ) In the “Locals” tab, the relevant variables are shown here

local-window

9) Developer can also check the value of the custom variable in the “Watch” window

watch-variable

10) Here i would like to check the value of the sender parameter, as well as invoke a method (sender.get_id()) to check what is the instance name that trigger this method

sender-get-id

Advertisements

April 26, 2009

IE 8 Tips : Add new attribute on the fly

Filed under: IE Developer Toolbar — haditeo @ 9:03 am

Recently most of my tasks are revolving against modifying CSS style either by using CSS or by using Javascript. I used to utilize IE 7 with IE developer toolbar until i found out IE 8 with the built in IE Developer Toolbar. I was so fascinated with the IE Developer Toolbar of IE 8. For your information, in IE 7, there is no built in IE Developer Toolbar.

I will show you how to add a custom attribute for the particular HTML tag on the fly.

1) I load up http://www.csszengarden.com . By the way, i like this site very much because it shows the powerful feature of changing the site design with just using CSS

add-new-attribute

2) Once you open a site, press “F12” and you will be presented with the Toolbar window.
3) Click on the “CSS” tab. There are 4 tabs which are “HTML”, “CSS”, “Script”, “Profiler”
4) Let’s try to give a “box” around the “P” tag. Now this is the difficult part.  In the screenshot, there are 3 attributes of the “P” tag, try to right click in one of the attribute. If you are succeed,  you will be presented with the small window containing “Add Attribute”

right-click
5)Just now i add the custom attribute “border-style:solid”. Make sure that it’s checked and you will instantly see that your custom attribute is directly applied on the page itself.

Summary
This toolbar is very useful for the testing purposes. Let’s say you would like to test whether some CSS style rules or attributes can be applied correctly to certain HTML tag, you can use this toolbar to test it further.

You can even change the existing attribute by just directly edit the attribute and you can even temporarily disable certain CSS rule or attribute.

March 19, 2009

IE Developer Toolbar in IE 7

Filed under: IE Developer Toolbar — haditeo @ 1:54 pm

This is the first time i use IE Developer Toolbar in IE 7.

Some setting needs to be configured :

*) show the IE Developer toolbar from Tools -> Toolbars -> Explorer Toolbar -> Show IE Developer Toolbar

*) configure Tools -> Internet Options -> check the “Enable third- party browser extensions”

Blog at WordPress.com.