Wednesday, March 2, 2011

Viewing JavaScript Errors in Internet Explorer 9 and 10

With Internet Explorer 10 (IE 10), it is not currently possible to view JavaScript errors when using the metro version of the browser.

The contents of this article still apply to IE 10 but only when using the desktop version.

To switch from the metro version of IE 10 to the desktop version, click on the Settings button in the browser and choose the 'View on the desktop' menu item.

JavaScript error reporting is a bit different in Internet Explorer 9 and 10 compared to previous Internet Explorer browsers since, by default, the Status bar is not visible and depending on your settings this might be the only place that would indicate if there was an error on the page.

You can turn on the Status bar either through the menu system by pressing Alt on your keyboard to show the menu bar and then navigating to the View, Toolbars, Status bar menu item.

Another approach to showing the Status bar is to right-click on title/tab area and choose the Status bar option from the context menu.


JavaScript Errors on the Status Bar

Getting errors to show via the status bar seems to be hit and miss because sometimes it works for me and sometimes it doesn't. It is my guess that Microsoft intends to remove the status bar error log functionality altogether and that it is simply an oversight (bug) that lets us view the error log in the first place.

In my testing if you start the browser normally the Status bar behavior I'm about to describe will not work.

If you launch IE from a pinned site, however, this Status bar behavior usually works.


To pin a site, drag the icon that is on the address bar to the Windows taskbar.

(click to view the image full size)


In your Advanced settings, if you have the 'Display a notification about every script error' option turned off then even if you have the status bar visible, you will not know there was an error.

The only hint of a JavaScript error would be if the page didn't respond properly (something didn't load for example).

The following is a screen shot of a website launched from a pinned site that has thrown an error (the status bar doesn't indicate that there was an error):

(click to view the image full size)

If you double-click anywhere on the status bar, if there was a JavaScript error on the page, the error log will pop-up.

(click to view the image full size)

If you have the 'Display a notification about every script error' option turned on then you will get a bit more feedback when a JavaScript error happens on the page.

Now, when a JavaScript error happens, the error log pops up showing us the error and, when we dismiss it, the status bar tells us there was an error on the page.

(click to view the image full size)


Whether or not the status bar was visible at the time of the JavaScript error doesn't matter. If you show the status bar and then double-click on it, you will see the error log.


Viewing JavaScript Errors from the Developer Tools

Since the status bar is no longer reliable for viewing if there was a JavaScript error on the page there is another approach available for viewing JavaScript errors.

Internet Explorer has a set of tools built in called Developer Tools and they can be displayed by pressing F12. The following is a screen shot of the Developer Tools window:

(click to view the image full size)

In the Developer Tools is a Console tab that shows you a log of all JavaScript errors on the page since the Developer Tools were opened.

The trick with the Console tab of the Developer Tools is that the error log only starts logging errors once the Developer Tools window is opened.

(click to view the image full size)

You will need to repeat the action that triggered the error in the first place to see the error in the Console tab.

The following is a screen shot of the Console tab with a JavaScript error logged:

(click to view the image full size)



In Conclusion

If you think there was a JavaScript error on the page, and the web page was launched from a pinned site, then double-clicking the Status bar usually displays the JavaScript error log if there were errors.

The Console tab of the Developer Tools (F12) will also give you a list of all JavaScript errors that happened on the page regardless of if the web page was launched from a pinned site or not.

The only issue with the Console tab's error logging is that it only starts logging errors once the Developer Tools window has been opened forcing one to repeat the steps to try and trigger the error again.

5 comments:

  1. Thanks for the information. Being able to double-click on the status bar is an interesting trick.

    ReplyDelete
  2. I was hunting down a bug, that only occured when the developer tools weren't open. This instruction, how to display the status bar and JavaScript errors saved my day. Thanks a lot.

    ReplyDelete
  3. Good post, helped resolve a JavaScript issue I had for a while. Thanks!

    ReplyDelete