Debugging of javascript in IE is easy. This tutorial will guide you on how to debug your javascript in IE by using the IE developer tools.

  1. Create a simple html page with javascript for debugging. Let’s call this file — test.html
  2. Open/drag the file from/to IE and your screen should look like the the following: Debugging Javascript in IE
  3. Press F12 or select Tools->Developer Tools from menu bar. The developer tool window should launch now.

  4. Select the “Script” tab from the developer Tools window. You should see the content of the file now.

    Debugging Javascript in IE
  5. Setup a debug breakpoint at line #8 by clicking the left-most column of the line number 8.
    Debugging Javascript in IE
  6. Click the “Start Debugging” button on top top begin debugging. Debugging Javascript in IE
  7. Back to the main browser window and click “Click me!” now.
  8. Notice that the debugging process should stop at the line #8 that we setup a break-point previously.
    Debugging Javascript in IE
  9. Select to “Watch” tab in the right pane of developer tools and add the objects/variables that we wanted to monitor. I’m added x and total. Debugging Javascript in IE
  10. Press F10 or Debugging Javascript in IE to step over the javascript. You will notice that the value in x and total will be updated now.
    Debugging Javascript in IE
  11. To stop debugging, click the “Stop Debuggin” button.
    Debugging Javascript in IE