Internet Explorer/F12 Developer Tools

From Wikibooks, open books for an open world
Jump to navigation Jump to search

Developer Tools of Internet Explorer is an important tool for developers.

This feature, which was introduced in Internet Explorer 8, allows developers to test their webpages, maintain compartability and fix errors.

Changes introduced with Internet Explorer 11[edit]

Internet Explorer 11 has changed the UI and features of Developer Tools substantically. The UI interface of Developer Tools in IE10 and IE11 is greatly different. We'll be covering both types of Developer Tools here.

Additionally, version 11.0.15(IE11) has changed the base UI into a more menu-like layout, though not similar to pre IE11.
Also, note that as we progress in the guide, some features may be unavailable in your IE version.

Opening Developer Tools[edit]

Developer Tools can be opened by pressing the F12 key on your keyboard.

Otherwise, you can open the Tools menu and click F12 Developer Tools.

Developer Tools UI[edit]

Developer Tools on IE9
Developer Tools on IE11 and Microsoft Edge

The picture on the right shows IE after the 11.0.15 update which gives Developer Tools a facelift. The pciture on the bottom shows the original Developer Tools in IE11. The picture on the left shows Developer Tools in the older pre IE11 version(here IE9). Note that the features have not changed between the IE11 update.

We'll be seeing the features in the next section.

Developer Tools on pre-facelift IE11

Features of Developer Tools[edit]

DOM Explorer[edit]

This feature allows you to see the basic HTML of the webpage. You can even modify some of them to create temporary changes.

For instance, you can change the title or parts(text) of the webpage, but you cannot change JavaScript code, make this code permanant or access sub-parts(like jsquery in separate files)

For instance, here we'll change the title of Wikimedia Commons. Locate the <title> part of the webpage(this's where the title of the webpage is taken from) and change it to whatever you like.

We're changing it to 'TEST PAGE' in this example. Once you're done, you can see the changes immediately. The modified Wikimedia page is at the background. This change is not permanent. IE11 Developer Tools(DOM Explorer).png

Clicking on Select Element( Select Element pointer in IE11.png )will send you back to the webpage where you can click on any main part(indicated by the borders which move according to the location of the mouse) and then it will shows the HTML code for that part. Select Element example in IE11.png
The equivalent to DOM Explorer in IE11 is the HTML tab in IE10 and below. It works similar, but the UL layout is similar. Here we're editing a part of the Wikibooks text(look at the 'Questions???' and 'Using TEST PAGE'):- HTML modification in IE9

Note that if you click Edit(Edit icon in Developer Tools in IE9.jpeg), then the HTML tab content changes into loose and freely editable HTML, though only for that file(no accompanying files).
If you click Element Source with Style(Element Source with Style icon in Developer Tools in IE9.jpeg) and you've selected a part within the body tag, then it shows the full HTML code for that section.
If you click Select Element by Click( Select Element icon in Developer Tools in IE9.jpeg ), then it sends you back to the webpage, where you can click on any main part (indicated by the rectangles which move according to the location of the mouse) and it'll do the same thing as if you've click Select Element in IE11.
To clear the browser cache, click Clear the Browser Cache( Clear browser cache icon in IE9.jpeg ).

Styles, layout and attributes[edit]

These allow you to view the style of the selected part of the webpage. This set of tabs is located on the right of DOM Explorer/HTML tab .

The Style tab allows you to test changes to different style properties of the webpage. This includes font, colour etc. However, as before you cannot make the change permanent. Here, we're changing the colour of the Wikibooks sidebar to aquamarine.

Styles tab in DOM Explorer in Developer Tools for IE11.png

The purpose of the Computed tab is similar.
The Layout tab shows the position of the object with respect to the webpage.
The Events tab shows the events that occurred.
The Changes tab details the changes occurred since you opened Developer Tools for that webpage.


Console
[edit]

The screenshot below should explain everything.

Console feature in IE11 Developer Tools
Console feature in IE11 Developer Tools
Console feature in IE9 Developer Tools
Console feature in IE9 Developer Tools

This feature is generally used for testing webpages using JavaScript. You can enter commands, which is a useful feature. Developer Tools can then report whether the command contains an error. It can also be used to check for website errors, that is, it acts as a log.

For the pre-IE11 version (see right), it is similar to IE11's Console feature, but with the inability to show only a particular type of information(eg - only errors) on the console.

Debugger[edit]

Multi-file(different file) selection in Developer Tools in IE11

This is one of the most important Developer Tools feature of Internet Explorer. As the picture shows, this feature allows users to have full debugging controls over webpages. You can individually select web parts(like JS files) and debug, but the changes(if any) that you make cannot be permanent.

Breakpoints[edit]

As you may have seen from the IDE's of programming languages like Visual Basic, breakpoints allows you to stop executing the webpage when an error occurs.

  1. This option stops Developer Tools to break on any exception.
  2. This option allows Developer Tools to break, but only on exceptions that are not handled.
  3. The option allow Developer Tools to break on any exception.

Selecting different webpage files to debug[edit]

Clicking (4) allows you to select other web files to analyse and debug. This could be something like JavaScript files. You can also multi task with multiple files in a tab like format.

On the toolbar[edit]

  1. (5) starts debugging the webpage.
  2. (6) stops debugging the webpage.
  3. (8) changes the layout of the code to something that is more printer-friendly. This allows you to print in a better layout.
  4. (9) wraps the code, in a way similar to what you've seen in programs such as w:Notepad.

Call Stacks and Watches[edit]

Now, here we aren't talking about any wearable watch! These are simply developer functions available in Internet Explorer.

Network[edit]

Another important feature, when enabled, this shows the delay, responding time and loading time of each and every element in the webpage. It could be JavaScript files, images, just about anything. Clicking on the element details shows more details about it.

Generally, this feature is best enabled before reloading or clicking the link you want to analyse. This feature can help developers because it allows them to identify what could cause delays in the rendering and loading time of their webpage.

The picture on the right should explain everything.

  1. This disables the Network feature
  2. This saves the data collected by the feature into a file.
  3. It forces the data to be refreshed from the server.
  4. It clears the browser cache
  5. It clears the cookies for the main domain.
  6. It clears the data collected by the feature.

As it can be seen from the picture, hovering your mouse pointer over the graphical boxes of any entry shows you the approximate time taken to

  1. Wait for the element to be needed.
  2. Start the element
  3. Time taken to request the element
  4. Time taken to respond to the request
  5. Gap time.

Also, some events may not be completed yet or may have been automatically(or otherwise) been aborted by the webpage or by manual stopping. These are indicated as (Pending) or (Aborted). You can, using the search box, search for events.

If you click an element, it goes into a detailed view. The screenshot below shows it.

Network detailed feature in Developer Tools in IE11.png

  1. This shows the link of the element.
  2. This are the 7 sub sections of the detailed page. While we're covering the first section here, the other 6 will also be covered.
  3. The request for the element.
  4. The acceptance code of the element is shown here.
  5. From where is all this going on? The link of the main page is shown here.
  6. The language in which the acceptance was sent.
  7. The user agent of the browser selected. Here, it is the default user agent of IE11.
  8. Encodings which have been accepted by the webpage.
  9. Main host of the webpage.
  10. Connection status for the webpage.
  11. Cookie details. The details have been blacked out because they reveal the IP address and geolocation data.