Browser Debugging Tools to Help Debug ASP.Net Applications

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

    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.

More by Author

Must Read