Post
Ask Question

F12 - Developer Toolbar - Good Rescuer

 
As a web developer, every one will have dealt with Internet Explorer. Since our ultimate final output will render the proper “angle brackets” in browser, in some cases, we may find it difficult to debug the rendered HTML. At that time, F12 developer toolbar comes to the rescue. In this tutorial I have used Internet Explorer Version 10. If you are using the next versions of IE, the look and feel of the toolbar vary slightly, but there is no functional changes that are discussed here.

What is F12 Developer Toolbar:

F12 Developer Toolbar is a built-in add-on with Internet Explorer. It will popup from IE when you press F12 Key on your keyboard. Alternatively you can get it by clicking “Tools –> F12 developer tools”. By default, it will be stick with the bottom of IE. In the following section I have mentioned the uses of F12 Developer toolbar.

 

Using F12 Developer Toolbar:

There are a lot of uses of F12 Developer Toolbar. In this article I am going to highlight a few of them. With F12 Toolbar you can:
  1. Select DOM Elements
  2. Debug JavascriptIdentify the Javascript errors or missing HTML tag errors on your files.
  3. Trace the applied CSS classes.
  4. Analyze the Network Timing
Set up the code:

In order to explain the above functionalities I have used the below HTML markup. It’s a simple ASPX file with a textbox and a button. The text box accepts an integer value and validates it and shows the alert box accordingly.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="SessionDemo.Home" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <link href="Home.css" rel="stylesheet" />  
  7.     <script type="text/javascript">  
  8.         function validateAge()  
  9.         {  
  10.             var age = document.getElementById("txtAge").value;  
  11.             if(isNaN(age))  
  12.             {  
  13.                 alert("You have entered valid age");  
  14.             }  
  15.             else {  
  16.                 alert("You have entered invalid age");  
  17.             }  
  18.         }  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <form id="form1" runat="server">  
  23.         <div>  
  24.             Enter Age:   
  25.             <input type="text" id="txtAge" />  
  26.             <input type="button" id="btnValidate" value="Validate Age" onclick="validateAge();" class="btn"/>  
  27.         </div>  
  28.     </form>  
  29. </body>  
  30. </html> 
Select DOM Elements:

This is an important feature of Developer Toolbar. You can easily navigate the particular DOM elements by clicking on it on the IE so that you can easily spot the respective "piece of markup" for that element in the whole page. This facilitates easily fixing the issues related to design.

In order to select the DOM element, you need to:
  1. Select the Arrow mark icon (Select Element by click) on the top left in Developer toolbar.
  2. Now you can select any element in the page(Elements are highlighted with the rectangle boxes).
  3. When you select the element, soon the IE Developer toolbar will highlight the particular markup. Refer the below screen shot.

 

Debug JS using F12 Toolbar:

In order to debug the JS, just run the above HTML page in IE and follow the steps:
  1. Open F12 Toolbar
  2. Go to “Script” tab, where the entire markup listed.
  3. Place the breakpoint on the javascript. (Please refer the below screen how to set the breakpoint)
  4. Click on the “Start debugging” button.
  5. Since the Js function is triggered when you click the button. Just click the button to start the debugging.




Identify the Javascript errors:

In some case as a developer we may make some mistakes such as a typo error. As an example, refer to the below code at line 10, wrongly typed as value() instead of value (which is get the text box value). There is no such method available in JS. It will be easily identified by IE developer toolbar. The point here is, these type of Javascript related issues are easily identified by IE Developer tool bar.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="SessionDemo.Home" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <link href="Home.css" rel="stylesheet" />  
  7.     <script type="text/javascript">  
  8.         function validateAge()  
  9.         {  
  10.             var age = document.getElementById("txtAge").value();  
  11.             if(isNaN(age))  
  12.             {  
  13.                 alert("You have entered valid age");  
  14.             }  
  15.             else {  
  16.                 alert("You have entered invalid age");  
  17.             }  
  18.         }  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <form id="form1" runat="server">  
  23.         <div>  
  24.             Enter Age:   
  25.             <input type="text" id="txtAge" />  
  26.             <input type="button" id="btnValidate" value="Validate Age" onclick="validateAge();" class="btn"/>  
  27.         </div>  
  28.     </form>  
  29. </body>  
  30. </html> 

In order to identify these kind of issues, you should follow the below steps:

  1. Render you page in IE.
  2. Open F12 toolbar.
  3. Select the “Console” tab.
  4. Since this JS function is called when you hit the button “Validate Age”. So just click on it.
  5. You can see the error messge and when you click on the hyper link detail it will point out the repective line that causes the error.



Identify missing HTML tag errors:

Most of the time we may not close the end tag of the HTML element. Most of the time it will not cause any issues luckily. In some worst cases, it will collapse all the design of your page. IE Developer tool bar is very much helpful in this case also. It will throw a warning message in the “Console” if your markup missed out anything like missing closing tag.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="SessionDemo.Home" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <link href="Home.css" rel="stylesheet" />  
  7.     <script type="text/javascript">  
  8.         function validateAge()  
  9.         {  
  10.             var age = document.getElementById("txtAge").value();  
  11.             if(isNaN(age))  
  12.             {  
  13.                 alert("You have entered valid age");  
  14.             }  
  15.             else {  
  16.                 alert("You have entered invalid age");  
  17.             }  
  18.         }  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <form id="form1" runat="server">  
  23.         <div>  
  24.             Enter Age:   
  25.             <input type="text" id="txtAge" />  
  26.             <span><span>  
  27.             <input type="button" id="btnValidate" value="Validate Age" onclick="validateAge();" class="btn"/>  
  28.         </div>  
  29.     </form>  
  30. </body>  
  31. </html> 

As you see the above code is missing a closing tag in the “span” element at the line no 26. When you run the page you can see the warning message in the console like below:


Trace CSS:

In some cases, we may require the to change the applied css, in the page to achieve the exact design as per requirement we have. Normally, as a developer we render the page in browser and come to the source code and adjust the CSS classes then again go to and run the page in browser to check the changes. In these kind of scenarios, F12 developer tool bar plays a vital role to save developer’s time. With the help of F12 developer tool bar, you can edit your applied CSS classes and see the result immeditately in the browser.This feature always helps a lot in terms of saves our time.
For demo purpose, i have used a simple CSS file and included in the ASPX file.In order to edit/trace the applied CSS classes, you need to follow the below steps:
  1. Render you page in IE.
  2. Open F12 toolbar. (by press F12 toolbar)
  3. Select the “CSS” tab, it will list all the CSS elements used in the page.
  4. You can remove the applied style by uncheck the check box. Also, you can create your own rule and apply and view it the browser itself.


Analyze Network Timings:

In some scenarios, you may need to know about the network timings that took for each requests. These kinds of analysis are helpful to do performance related improvements on the browser end. In such case, the "Network" tab in the IE Developer toolbar plays a vital role. You need to follow the below steps to work with network tab: 
  1. Render you page in IE.
  2. Open F12 toolbar. (by press F12 toolbar)
  3. Select the “Network” tab.
  4. Click “Start debugging” (When you click, the button text will be modified as “Stop debugging”).
  5. Then you need reload the page (by pressing F5). This is because whenever the page loads at that time only the files are downloaded from the server.

About Other Browsers:

Other popular browsers also provide these kind of utilities. Chrome offers "Developer Tools" and Firefox provide "Inspect Element". These tools also provide the same kind of facilities like IE Developer Toolbar. 

I hope you enjoyed this tutorial. For beginners it will give some good idea about the IE Developer toolbar. Let me know your thoughts in the comments.
 
Read more articles on Web Development:


Similar Articles