IE - Debugging

https://msdn.microsoft.com/en-us/library/gg589512%28v=vs.85%29.aspx - done reading
https://msdn.microsoft.com/en-us/library/gg589500%28v=vs.85%29.aspx - done reading
https://msdn.microsoft.com/en-us/library/gg699336%28v=vs.85%29.aspx - done reading
https://msdn.microsoft.com/en-us/library/hh180764%28v=vs.85%29.aspx - done reading
https://msdn.microsoft.com/en-us/library/gg699337%28v=vs.85%29.aspx - done reading
https://msdn.microsoft.com/en-us/library/gg699341%28v=vs.85%29.aspx - done reading
https://msdn.microsoft.com/library/bg182326%28v=vs.85%29
http://msdn.microsoft.com/en-us/library/gg699341%28v=vs.85%29.aspx
http://stackoverflow.com/questions/690251/what-happened-to-console-log-in-ie8
https://msdn.microsoft.com/en-us/library/dd565628%28v=vs.85%29.aspx
https://msdn.microsoft.com/en-us/library/gg589507%28v=vs.85%29.aspx
https://www.youtube.com/watch?v=GbbjL_Uir24
http://www.htmlgoodies.com/html5/tutorials/script-debugging-using-the-internet-explorer-developer-tools.html#fbid=nxlsObgeCDX
http://www.sitepoint.com/debug-faster-with-f12-developer-tools-in-internet-explorer-9/
http://code.tutsplus.com/tutorials/a-peek-at-internet-explorers-developer-tools--net-29638
https://msdn.microsoft.com/en-us/library/bg182326%28v=vs.85%29.aspx
https://msdn.microsoft.com/en-us/library/dn255007%28v=vs.85%29.aspx
https://msdn.microsoft.com/en-us/library/hh968260%28v=vs.85%29.aspx
https://blogs.windows.com/msedgedev/2015/07/21/announcing-the-latest-improvements-for-the-f12-developer-tools-in-windows-10/
http://stackoverflow.com/questions/22380864/view-css-style-sheets-in-ie11-f12-developer-tools
http://blogs.msdn.com/b/ie/archive/2013/07/29/debugging-and-tuning-web-sites-and-apps-with-f12-developer-tools-in-ie11.aspx
http://code.tutsplus.com/articles/the-new-ie11-f12-tools--net-34039
https://channel9.msdn.com/Events/WebPlatformSummit/2015/Whats-new-in-the-F12-Developer-Tools
http://www.infoq.com/news/2015/04/EdgeDevTools
https://dev.modern.ie/platform/documentation/f12-devtools-guide/
http://scottge.net/2015/07/28/a-complete-list-of-web-development-tools/
http://www.htmlgoodies.com/html5/tutorials/script-debugging-using-the-internet-explorer-developer-tools.html

http://blogs.msdn.com/b/ie/archive/2015/04/02/introducing-the-ie-diagnostics-adapter-for-third-party-developer-tools.aspx

If IE complains about a function that is clearly define, what may be the problem?

If you have an onLoad function, and it is associated with the onload event handler of the body element, and IE complains:

The value of the property 'onLoad' is null or undefined, not a Function object

It may be that you are missing a comma or a closing curly brace, or you may be having an extra comma in your JSON. Make sure that you run all your loaded code through a syntax checker. If you have an extra comma in your JSON, JavaScript syntax checker may not detect this problem, try various JSON lint service, eye-ball your JSON, or deliberately comment out various portion of your code / JSON to isolate where the problem may be.

How to launch the Microsoft Developer Tool?

F12

How to start debugging?

  1. Switch to the Script tab
  2. Select appropriate file
  3. Find the appropriate function that you want to debug
  4. Click on the left margin to set a break point
  5. Click on Start Debugging

How to set a conditional break point?

After you set the break point, right click on the the break point

How to inspect or run code that are in a frame?

cd(top.frames[1])

Now the window and document objects refer to that of the specific frame instead of the main frame.

Is Developer Tools open-sourced?

Need research. Related questions:

  • How can I developer a JavaScript debugger?
  • Can I reuse the code from Venkman or Firebug?

What features do I want from Developer Tools?

  • When I step through the code, it should not lock the UI. As I step through the code, each statement should have immediate effect on the UI. Right now, when I step through the code, I cannot see the changes reflected in the UI until I finish debugging or hit the continue button.
  • On the Layout tab, it should clearly mark which dimension is height and which dimension is width.

What is the shortcut for pinning the Developer Tools to the page?

By default, the Developer Tools opens in a separate window, but you can pin it to the page that you are working with by clicking on the pin button or pressing CTRL+P. It cannot be pinned while debugging on the Script tab.

What is the shortcut to minimize the Developer Tools?

CTRL+M

What is the shortcut for Select Element by Click?

CTRL+B

How can we clear the console programmatically?

if (window.console) {
    window.console.clear();
}

How can we start and stop profiling programmatically?

if (window.console) {
    // Start recording profile information under the title of "My profile report".
    // This command is equivalent to clicking the Start profiling button on the
    // Profile tab
    window.console.profile("My profile report"); 
    ...

    // Stop recording profile information under the last report title.  This command
    // is equivalent to clicking the Stop profiling button on the Profile tab.  The
    // profile report can be viewed on the Profile tab.
    window.console.profileEnd()
}

How can we use the Developer Tools to inspect the DOM element?

  • Launch the Developer Tools by pressing F12 (if it is not already running)
  • Click on the HTML tab
  • Click on the Find elements by click icon

How can we use the Developer Tools to debug JavaScript?

  • Launch the Developer Tools by pressing F12 (if it is not already running)
  • Click on the Script tab
  • Click on the Start Debugging button

The page will be reloaded. In the Developer Tools, in the Script tab, you can click on the gray area in the left pane to set a break point. If you only want the debugger to stop on this breakpoint on some condition, you can right click on the breakpoint and select the Condition option, and enter the condition to be evaluated.

What is the shortcut for Continue?

F5

What is the shortcut for Step Into?

F11

What is the shortcut for Step Over?

F10

What is the shortcut for Step Out?

Shift+F11

What is the shortcut for Stop Debugging?

Shift+F5

What is the shortcut for Start Debugging?

F5

How can we use Developer Tools to profile JavaScript performance?

Click the Profiler tab. The profiler lets you start and stop profiling and offers several views or reports of functions, the number of times they were run, and the time each took to run. When you first click the Profiler tab, the grid is empty. Click the Start profiling button, and then run the code that you want profiled in the browser. If you want to start from the initial load of the webpage, click Refresh to run the code on the page. Click Stop profiling when you want to stop collecting data and view the results. To profile just a section of code, click Start profiling, run just that section in the browser (such as a function called from a button click), and then click Stop profiling.

Reports from the profiler tool are automatically generated when you click Stop profiling. Each profiler session is a discrete report, so you can run a profile any number of times, such as for multiple sections of script, or modify values, and profile the same section again. Only the most current profiler report is displayed by default, but you can click the Current report drop-down list to see others.

Reports can be viewed two ways, either in functions or as call tree views. Functions view shows all the functions in the order in which they were run. The Call tree view shows the hierarchy of the functions, so you can see parent and child relationships easier.

See https://msdn.microsoft.com/en-us/library/gg699341%28v=vs.85%29.aspx

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License