Browser Debugging Tools to Help Debug ASP.Net Applications

ASP.NET has helped us produce rapid rich web applications for close to a decade now. ASP.Net web forms, as the webpages are officially known, can become cumbersome to handle when they grow richer. The first line of defense, in such cases, is offered by the Browser Debugging Tools. Read on to find out more about such tools and how they help.

I believe Firebug - the first in the race - created this phenomenal evolution of Browser Debugging Tools. Firebug is the most famous extension that runs on the Firefox web browser. It resides on Firefox, who probably owes most of its success to this cute extension. Modern day browsers, like IE (8 and above) and Chrome now have developer tools as the default standard.

The browser debugging tools offer a variety of useful features, which help you track down page and element behavior. They help you analyze, apply and visualize, all at few mouse clicks.

Let's look at the features that are available for the common browsers today with respect to the tools that help you debug scripts, css and play with html.

  1. Chrome
    • Dom Inspector
    • JavaScript console JavaScript debugger Memory usage tool
  2. Firefox
    • The default Javascript console
    • The new Console extension
    • The JavaScript debugger - popularly known as "Venkman"
    • Firebug - an extension
    • Webdeveloper - an extension
  3. Internet Explorer
    • Internet Explorer Developer Tools - a comprehensive suite

Chrome impresses on the go, due to its speed and its quick availability to the user. To see the features, just follow the instructions below:

  1. Open any webpage in Chrome.
  2. Open a webpage in Chrome
    Figure 1: Open a webpage in Chrome

  3. Right-click on any element that you want to know about - and choose "Inspect Element" on the menu. I chose to right-click on the magnifying glass icon next to each result and then chose to inspect the element. It opens the DOM Inspector for you with the element selected. You can view the styles used on the element instantly with the CSS style description to the right.
  4. The Chrome 'Inspect Element' Menu
    Figure 2: The Chrome "Inspect Element" Menu

  5. On the far right in the new window that appeared is the Console button. Click on the button and type a letter to be presented with the world's most innovative intellisense. This window lets you view the errors in JavaScript execution and also execute other useful commands.

    You can view Document, Screen and various other objects and their properties. You can also execute JavaScript commands on the JavaScript code that is currently in the scope of the page.

  6. Resources usage lets you see the resource usage compared with time and size. This section provides us rich tooltips with good information to help us understand the render process.

    Chrome Resources Usage
    Figure 3: Chrome Resources Usage

  7. Audits: Run the audits on the page, and you will be presented with a set of optimization techniques for sure.

    Chrome Audits
    Figure 4: Chrome Audits

IE joined the race with the release of a tool suite called Internet Explorer Developer Tools. This is a great tool in terms of the following impressive and unique features:

  1. It allows you to profile the script code faster.
  2. It allows you to test your web page in different document modes and different browser modes.
  3. Extensive support to control cache, and browser objects like cookies.

Hit F12 when you have opened your ASP.NET web page to open the developer tools. There are a bunch of features that can save you some time.

  1. If you are working on a webpage that you haven't created, then this tip will be helpful to you. Hit F12 to open the Developer Tools. Select the HTML element in the HTML tab. To your right, select "Layout". This will help you understand the placement of HTML elements on the page.

    Chrome Developer Tools: HTML Element
    Figure 5: Chrome Developer Tools: HTML Element

  2. Look at the options in the Cache Menu. It helps you debug issues with "Browser Cache" and "Cookies".

    Debugging Browser Cache and Cookies
    Figure 6: Debugging Browser Cache and Cookies

  3. Script Debugging: You can debug your script and fix many of the script errors with ease. Look at the Script tab to see the scripts loaded for the page. Select a script, and place breakpoints as your normal server code.

A comprehensive explanation of Internet Explorer's Developer tools can be found at the MSDN site (linked above).

Most of our ASP.Net web applications also follow rich CSS and scripts to produce an interactive and flashy page to clients. The features highlighted above can be found in all major browser development tools.



About the Author

Srinath M S

I would love to leave a footprint in this flat world

Related Articles

Comments

  • oakley sunglasses cheap

    Posted by olexpenueMoxjef on 03/29/2013 11:28pm

    [url=http://www.bestwholesalehats.com]wholesale snapbacks[/url]wholesale hats [url=http://www.bestcheapsnapbacks.com]cheap snapbacks from china[/url]wholesale hats [url=http://www.bestwholesalehats.com]wholesale snapbacks[/url]cheap sunglasses [url=http://www.bestwholesalehats.com]wholesale snapback hats[/url]wholesale snapbacks [url=http://www.cheapforsunglasses.com]cheap oakley[/url]cheap snapbacks from china

    Reply
  • wholesale hats

    Posted by rxexpenueMoxjef on 03/29/2013 11:17pm

    [url=http://www.cheapforsunglasses.com]cheap sunglasses[/url]cheap snapbacks from china [url=http://www.cheapforsunglasses.com]cheap sunglasses[/url]cheap snapbacks free shipping [url=http://www.bestcheapsnapbacks.com]cheap snapbacks free shipping[/url]snapback hats wholesale [url=http://www.bestwholesalehats.com]wholesale snapback hats[/url]oakley sunglasses cheap [url=http://www.cheapforsunglasses.com]cheap oakley[/url]cheap snapbacks

    Reply
  • wholesale snapback hats

    Posted by xuexpenueMoxjef on 03/29/2013 11:04pm

    [url=http://www.bestwholesalehats.com]snapback hats wholesale[/url]snapback hats wholesale [url=http://www.bestcheapsnapbacks.com]cheap snapbacks from china[/url]cheap sunglasses [url=http://www.bestwholesalehats.com]snapback hats wholesale[/url]oakleys cheap [url=http://www.bestcheapsnapbacks.com]cheap snapbacks[/url]wholesale snapback hats [url=http://www.bestcheapsnapbacks.com]cheap snapbacks free shipping[/url]wholesale snapback hats

    Reply
  • wholesale sunglasses

    Posted by ogliliImpumpgym on 03/29/2013 10:50am

    cheap sunglasses [url=http://guccisunglassescheap.webs.com]cheap sunglasses[/url] replica oakleys oakleys for cheap [url=http://sunglasswholesaleofgucci.webs.com]oakleys for cheap[/url] cheap ray ban,,,, fake ray ban [url=http://fakeGucciwayfarer.webs.com]fake ray ban[/url] cheap ray ban wayfarer sunglasses cheap [url=http://onlineguciisunglass.webs.com]wayfarer sunglasses cheap[/url] wholesale designer sunglasses cheap oakley [url=http://qualityguccisunglass.webs.com]cheap oakley[/url] discount sunglasses discount ray ban [url=http://discountsunglasseshoo.webs.com]discount ray ban[/url] cheap ray ban sunglasses wholesale oakley sunglasses [url=http://wholesalesunglassescool.webs.com]wholesale oakley sunglasses[/url] wholesale designer sunglasses cheap ray ban [url=http://guccisunglassescheap.webs.com]cheap ray ban[/url] discount ray ban

    Reply
  • Wholesale Sexy Dress

    Posted by Fishnettp1031 on 03/29/2013 10:37am

    http://SexyChemise.webs.com - Lace ChemiseBy listing an auction for your services, you will allow others to compete for your business One more suggestion – browse the website in general http://sexystockings.webs.com - Sexy BodyStockingss wear and even foreplay essentials, toy chest and other romantic gifts Not only is it saving him money, it is saving him time http://G-string.webs.com - Lingerie TeddiesThe adult mermaid costume styles vary from beautiful, to glamorous, to stunning, to sexy They involve inviting friends, family and other guests to an evening get together where you would provide samples, take product orders and offer snacks and refreshments http://SexyChemise.webs.com - silk chemiseYou are no longer Jennifer, the accountant Having said that, it does not mean that the wholesale lingerie will be of poorer quality http://babydollnightgowns.webs.com - babydoll nightgownss most popular costume store They have lingerie from bustiers, corsets and babydolls

    Reply
  • Secretary Lingerie

    Posted by Fishnetcb1014 on 03/29/2013 09:00am

    http://sexycostumesboutique.webs.com - Sexy Rear Admiral CostumeGowns are full-length forms of the babydollFor yellow, it is a bright and cheerful color http://spicylingeries.webs.com - sexy lingerie for womenInvite your co-workers, family and friends to join youBarbie in a Mermaid Tale? that was released in March of 2009 http://womenssexyclothes.webs.com - sexy adult costumesThey have lingerie from bustiers, corsets and babydollsIf you happen to be really hunting for lingerie to spice up your love life, be sure to visit Frederick's of Hollywood (accessible online) http://wholesalesexylingerie.webs.com - Wholesale Sexy DressSimilar to a corset in design, a teddy is a one piece suit that starts out as a bustier, extends down between the legs as a thong, and ends up fastening to the back of the bodice Babydolls have a brief but interesting history, of which many fans are unaware http://Lingeriesv.webs.com - red LingerieThey have lingerie from bustiers, corsets and babydolls  Along with the lingerie why not put another small gift into the package such as some jewellery or perfume

    Reply
  • Lingerie on Clearance

    Posted by Fishnethg1010 on 03/29/2013 08:20am

    http://G-string.webs.com - cheap clubwearCarroll Baker was in the lead role Also some websites have coupons and discount codes category http://babydolllingeriee.webs.com - womens babydollSizing is an issue that must be dealt with, and a good lingerie site will have size charts easily accessible This alone is paying for the systems http://spicylingeries.webs.com - womens lingerieLet’s look a bit deeper into the colors In contrast of black, there is white which portrays a pure, clean and innocent image http://sexycostumesa.webs.com - Naughty School Girl Uniform4  Unfortunately if you get this item wrong it isn’t going to be something that she will enjoy wearing http://SexyTeddies.webs.com - sexy teddyIn this way, October 31st is not only a gateway to the realm of ghosts, ghouls, and goblins, but it's also a gateway to the realm of increased sex appeal and sexual confidences sex appeal

    Reply
  • Fishnet Babydoll

    Posted by Fishnetkw1042 on 03/29/2013 08:11am

    http://sexylingeriecostumese.webs.com - Maid LingerieApart from that, you can choose from a wide range of colors these wholesale lingerie pieces are available in including red, white, yellow, black and blue You have no inventory or shipping costs to worry about http://sexystockings.webs.com - Fishnet BodystockingSome websites give detail description including the percentage of components of the material it was made of Many teddies come with garter belts attached, adding endless possibilities for some naughty, bad little girls' psychopathic imagination to run wild with http://cheapspicylingerie.webs.com - plus size corsets cheapBrowse through their catalogs and you're sure to find something that stirs your, um As the name implies, Three Wishes is an online dreamgirl lingerie retailer who aims at giving all the lingerie wishes of a purchaser, from sexy costumes to sexy lingerie down to all the basics of lingerie http://wholesalesexylingerie.webs.com - china wholesale clothingThis is an online dreamgirl lingerie retailer which offers free shipping for orders that are above $75 I fix one or two things at a time, and the bottom line results are outstanding http://lingeriemall.webs.com - lace babydoll lingerieShe may be flattered if she wears a large and you get her a small, but if she wears a small and you buy her a large, you could find yourself in troubleThe costume's sea colors of mostly blue-green along with some turquoise and sequin patterns will have you looking like a mesmerizing mermaid of the deep seas

    Reply
  • sexy teddy

    Posted by Fishnetdj1097 on 03/29/2013 08:09am

    http://SexyTeddies.webs.com - sexy lingerie teddiesThis is because colors depict different meanings for different cultures If you're not sure what to do, consult a child http://sexycostumesboutique.webs.com - Nurse CostumesDreamgirl lingerie retailers are ably available in the net, each of them offering wide variety of products from the dreamgirl line Babydolls have a brief but interesting history, of which many fans are unaware http://sexylingeriecostumes.webs.com - Sexy UnderwearTherefore, you should choose a wholesale lingerie dress as per your body type and size and the style that suits your personality As their tagline says, it is the sexiest online superstore http://sexylingeriecostumese.webs.com - Nurse LingerieDreamgirl lingerie retailers are ably available in the net, each of them offering wide variety of products from the dreamgirl line Babydolls have a brief but interesting history, of which many fans are unaware http://sexylingeriecostumese.webs.com - School Girl LingerieWhen you are buying a bra and panty set, always check out what she has in her drawer beforehand and definitely notice the size - of both the bra and panties By listing an auction for your services, you will allow others to compete for your business

    Reply
  • Lingerie Costumes

    Posted by Fishnetwi1044 on 03/29/2013 08:03am

    http://sexylingeriecostumes.webs.com - womens sexy clothes  What you should never do is purchase clothes that you think that they should be wearing to make you happy It is usually made of silken material that makes it shiny and captivating http://sexycostumesboutique.webs.com - Sexy CostumesDark blue conveys wisdom, trust and seriousness Different options of lingerie dresses include bras, panties, gowns, garter belts and camisoles http://sexystockings.webs.com - Fishnet BodystockingThe child mermaid costumes, like the adult mermaid costumes, also come in a variety of sea-green-blue colors and designs), colors, and above all, size http://sexycostumesboutique.webs.com - Sexy Rear Admiral CostumeGowns are full-length forms of the babydollFor yellow, it is a bright and cheerful color http://SexyChemise.webs.com - womens chemiseDestining this costume to turn into a favorite amongst the mermaid Halloween costumes These types of lingerie emphasize your assets and mask your body imperfections to give you a look of your choice

    Reply
  • Loading, Please Wait ...

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: September 17, 2014 Another day, another end-of-support deadline. You've heard enough about the hazards of not migrating to Windows Server 2008 or 2012. What you may not know is that there's plenty in it for you and your business, like increased automation and performance, time-saving technical features, and a lower total cost of ownership. Check out this webcast and join Rich Holmes, Pomeroy's practice director of virtualization, as he discusses the future state of your servers, …

  • As mobile devices have pushed their way into the enterprise, they have brought cloud apps along with them. This app explosion means account passwords are multiplying, which exposes corporate data and leads to help desk calls from frustrated users. This paper will discover how IT can improve user productivity, gain visibility and control over SaaS and mobile apps, and stop password sprawl. Download this white paper to learn: How you can leverage your existing AD to manage app access. Key capabilities to …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds