Friday, January 25, 2013

Internet Explorer's Developer Tools (F12) Overview

Developing a web page is not always a simple matter of creating code on your computer, uploading it to the server and it works.  The interaction of your page, CSS stylesheets, javascript code (sometimes yours, sometimes external) and the framework of other files that may wrap around your code often produce odd results that you need to debug within the browser itself to figure out.  Until browser-based developer tools like Microsoft's F12 Developer Tools or Firebug came along, all you could do was view the source of your page and stare until you went cross-eyed.  Now that these tools exist, by all means use them!  I plan to write a series of posts about developer tools, starting with this overview of Microsoft's F12 Developer Tool.

The F12 Developer tool was available as a download in Internet Explorer 7, and became standard as of IE8.  To open it, just press the F12 key as the name implies.  The browsing window will split, displaying the tools below your page, like so:


There are many nooks and crannies to explore in the tool, but for now I'll focus on some of the more common ones.  Looking across the tabs, you will see:
  • HTML
  • CSS
  • Script
  • Profiler

HTML Tab

On the left side of the tool, you will see a representation of your page's HTML in a tree structure.  I say a representation because it is not the actual code you wrote, but IE's interpretation of it as it exists in the DOM.  Because of this, if you are using any code that dynamically changes the contents of the DOM you will need to refresh this view occasionally by pressing the 4th icon in - the 2 blue arrows - or clicking within the DOM view and pressing F5.  (If your focus were within the page itself, pressing F5 would reload the page)  

To inspect a certain element, you can either browse through the tree by expanding each node, or press the arrow icon below the tab (or CTRL-B) and click on the element within the rendered web page.  Either will bring the focus of the tool to that element.  Then in the right pane, you will see various properties assigned to that element:
  • Style - The current styles associated with the element, in the order they were applied.  Any that were assigned by one CSS rule or javascript call, but then overwritten by another rule are crossed out.  You can selectively enable or disable any rule by setting or clearing the checkbox next to it.
  • Trace Styles - Each of the current styles for that element will be displayed, grouped by style.  By expanding each node, you can see that CSS rules were applied to result in the current style.  For instance, the BODY may declare that all text on a page is black, but later in the CSS a rule for ".greenText" would override that and set the text to be green.
  • Layout - Draws a diagram of the object itself, surrounded by its padding, border, margin and offset to give a representation of where the object sits and what spacing it wrapped around it.
  • Attributes - Lists (with the option to add, edit and remove) any attributes assigned to the object, such as id, class, title, href, and so on.


CSS Tab

The CSS tab allows you to browse, inspect and optionally edit all CSS attached to the current page.  Editing this in place lets you experiment with settings live, rather than needing to save your changes, upload to the server and refresh your page to see each change.  This experimentation happens within the browser, greatly improving your efficiency, since you can make and undo changes much faster.

Script Tab

The script tab has 2 panes - on the left you can select a script from the dropdown to view its contents, and on the right you can interact with the browser through javascript (including any libraries you have loaded, like jQuery).  The most commonly used feature here is the console.  By entering javascript commands in the input field and either pressing Enter or the Run Script button, your command is sent to the browser, and its results, including any error messages) are returned in the Console window.

The Console window is also very useful for writing debug information to the log instead of having it displayed as a dialog box through a series of alert() calls.  In some cases, using alert to show you the value of a variable, or letting you know your code has reached a certain spot in the routine can be enough to help you debug the code.  The act of popping up an alert box pauses the script until you press OK, and can interrupt the flow of the code by changing the focus.  Instead, a common technique is to use console.log to write yourself notes at certain points within the code.  A script like this one can make it easier, and reduce errors:
There are many other tools within the Script tab, mostly focused on step-by-step debugging.  Because of the detail involved in interactive debugging, I'll be writing that up as its own post soon rather than make this overview too long.  (Tip: Look for posts with the label "F12")

Profiler Tab

If you are interested in the speed and performance of your javascript, the Profiler tab can help you see what functions are being run, how many times, how much time they take, and where they are being called from (file and line number).  This information can point you towards functions that are slowing down the performance of you page.  Once you've found the culprit, you can use the Script tab to step through the code and see what's causing the delays.   Because of the detail involved in profiling scripts, I'll be writing that up as its own post soon rather than make this overview too long.  (Tip: Look for posts with the label "F12")

Conclusion

Many people don't know the F12 tool exists, and those who do know about it may not be using it to its fullest potential simply because they haven't taken the time to figure out how it works.  Hopefully this post and the ones to follow will take some of the fear out of using the tool, allowing you to find, improve and fix your pages with ease.  Even using some of the more basic features can save you a lot of programming pain!  Keep an eye out for further posts in the "F12" series, as well as similar tools for other browsers like the FireBug tool for Firefox.  (One of my personal favorites, but we don't always get the luxury of being able to debug in a given browser... sometimes the bug only happens in another browser and you need to know the tools available)

15 comments:

  1. I obey the conclusion of this site.Because the conclusion is perfectly correct.It seemed to say as like review from the users.
    Best Website Design Bangalore

    ReplyDelete
  2. I knew all the necessary things of internet explorer in the field of website development from this blog.Its really interesting.
    Website Development Bangalore

    ReplyDelete
  3. You have shared a useful information about Internet Explorer's Developers tools,thanks for the post.
    Website Designing Companies India | Website Development Company

    ReplyDelete
  4. The most important feature that you have to have when it comes to web design is that your site has to be easy for people to read.
    Outsource Web Designers | Outsource Site Development

    ReplyDelete
  5. Most of people using internet explorer browser while they were browsing the information.Because it is easy to handle and maintain.
    Outsource Website Design | Outsource Web Developer

    ReplyDelete
  6. The over view of Internet Explorer's Developer Tools (F12) is really good.It explained all the things about it.
    Top Web Design Company | Website Development Company

    ReplyDelete
  7. Thank you for sharing the information about Internet Explorer developer tools.very useful for beginners of Web Development.
    Web Development Company Bangalore | Web Design Company Bangalore

    ReplyDelete
  8. Web Development provides more number of development platforms, choose the better platform which suits to build business.
    Web Development Companies in Bangalore | Web Design Company in Bangalore

    ReplyDelete
  9. Some website structure does not appear as fixed on internet explorer browser.So responsive web design is the best one to view the website with proper structure on all devices and browsers.
    Website Design Company | Web Designing Company Bangalore

    ReplyDelete
  10. Off-shore professionals to help pro-actively monitor your website and act within minutes of being alerted of any outages in any time zone. Our support services mean we promptly respond to your requests and help you resolve any issues as quickly as possible.

    Website Designing Company | Web Development Company

    ReplyDelete
  11. An estimated 17,000 crores worth of online business is anticipated during the financial year 2014-2015 within India and this could be only more and not less by any standards.
    Web Design Companies in Coimbatore | kovai e solutions

    ReplyDelete
  12. Very nice blog and looks great to see and thanks for sharing the information with us.
    Villas in Kovaipudur

    ReplyDelete
  13. Internet Explorer Developer Tools formerly known as Internet Explorer Developer Toolbar, is a web development tool built into Microsoft Internet Explorer that aids in design and debugging of web pages.
    Web Designing Company in Bangalore, Web Development Company Bangalore

    ReplyDelete
  14. The blog is absolutely truly incredible. Lots of large information and inspiration, both of which we all need.
    UI Design Companies in Bangalore, Web Application Development Companies in Bangalore

    ReplyDelete
  15. Looking for
    best selenium training in Chennai, Credo Systemz is the no 1 selenium Training institute in Chennai offering professional selenium course by selenium experts.

    ReplyDelete