How can I locate and debug a specific file in IE11 Dev Tools?

B. Clay Shannon picture B. Clay Shannon · Mar 1, 2017 · Viewed 9.1k times · Source

I have a file that is part of a legacy web site I'm maintaining that I need to debug - step into, etc. But I can't see how to do that. The site needs to be run in IE, in Compatibility mode.

When I run the site from VS (2013) by right-clicking the "http://localhost/..." item beneath the solution and selecting "View in Browser (Internet Explorer" and then hit F12, I see on the Debugger tab the file that has been set as the Default page (the "main" page I see after logging in), but from there I don't see how to open a different file - the one I need to debug.

There are a handful of files apparently available for selection beneath the folder icon:

enter image description here

...but not the one I need. If I enter its name in the search box, I get, "No results found." It is beneath a pages folder, but so are those that are displayed. What makes them special? Why can I select those undesirables, but cannot select the only page I care about?

Answer

Andrii Litvinov picture Andrii Litvinov · Mar 14, 2017

I assume you have the JavaScript file you want to debug somewhere in dist. Just go to that file and write debugger; inside the function you want to debug. The open dev tools in IE and reload the page. Initiate an action that should invoke that function with debugger (if it was not done on page load) and you will be able to debug it.