An Interest In:
Web News this Week
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
A Peek at Internet Explorers Developer Tools
I hate debugging, and have never met any developer who argued otherwise. It's a drag to have to go through your code and figure out why it's broken. And most importantly, it's an admission that my code is broken and that I'm not infallible! Heresy I say!
Seriously though, bugs are simply a natural part of the web development process, and, while we may hate them, we certainly have to deal with them. Front-end developers haven't always had rich debugging tools like other platforms and languages. In the good ole days, alert() was your friend and an important method (excuse the pun) for troubleshooting code. And debugging client-side code has its own unique set of challenges because of the variety of technologies that are in play. If you think about it, debugging pages, especially dynamic ones involves so many moving parts that could affect the rendering. You have the the Document Object Model (DOM), JavaScript, CSS, network traffic, HTTP headers, and many more technologies that all work to produce a page and in many cases interact and affect each other.
Thankfully, times have changed and all the major browsers have built-in tools that greatly increase the troubleshooting features for developers. I give a lot of credit to Joe Hewitt for pushing the tools landscape forward. He created Firebug in 2006. In my opinion, it broke ground on what real browser tools should be.
Since then, we've seen Firebug evolve tremendously and serve as a baseline for others to work from and we now have powerful tools in Chrome, Internet Explorer, Safari and Opera as well.
For this article, I'm going to focus on Internet Explorer's Developer Tools and the functionality it provides. The functionality I'll discuss will be very familiar to anyone who's used a browser-based debugger but I want to bring focus to Internet Explorer's tools to ensure that there's a good understanding of what's actually available.
Where Are We?
Let me begin by admitting that I know that IE is the browser you love to hate. I get it. The fact of the matter is that it's a major browser that's important to many site visitors and that means you'll be targeting it and also need to debug code in it sooner or later. What's kind of surprising is how many developers don't know that IE ships with developer tools or worse that they think they still need to download the Internet Explorer Developer Toolbar.
The developers tools are commonly called the "F12 Developer Tools" because pressing the "F12" key on your keyboard will open them up while you're in Internet Explorer (interestingly enough, pressing F12 also launches Firebug and the Chrome Developer Tools).
The developer tools are also accessible via the "Tools" menu under the label "F12 developer tools".