Keep track of all the latest news and events on developer tools and technologies you care about
In IE9 we have added a few new features so you can now:
To start the developer tools either just hit F12 or start them from the ‘F12 developer tools’ menu item.
The tools will load up nested at the bottom of the page and you can un-nest them and have them as a separate window.
The tools are relatively self-explanatory but there are tutorials over on MSDN if you want to get a better grasp of the basics. For the remainder of the article I will take a look a couple of the newer editions to the Developer Tools.
In a recent blog Mike Taulty showed how easy it was to use the tools to inspect traffic in a project he was working on. You can log all the network requests the browser makes simply by choosing the Network Tab and clicking ‘Start Capturing’. This can be useful to track down 404 errors, or unearth elements that are taking a long time to load and slowing your site.
You can also drill into each of these requests and get more details such as:
You can then save this information to a CSV or XML file to view later of compare against other results by clicking the save icon in the top left toolbar.
Developers often minimise code which reduces whitespace, and shortens variable names to improve performance. However, it can cause issues for developers when they are testing because it is less readable.
These new features make is easier than ever to find and fix bugs in IE. If you fancy trying out the new tools, head over to the network monitoring test on IE test Drive and see how many issues you can find. Let us know in the comments how you get on.
No mention of why the menu reads "F12 developer tools" instead of the more obvious "Developer tools (F12)"? :o)