I am trying to reverse engineer a Microsoft CRM 2011 web page. The page loads a massive number of scripts and HTML. My current development focus is on the click event of a checkbox element on the page. Clicking the element causes behavior on the page to change, and I want to walk through the code that handles this.

The problem is the checkbox's click handler is attached during page load via an anonymous method. So the code is there, but trying to find it is asking one to locate a needle in a haystack.

Is there a technique using the Internet Explorer debugging tools to somehow make the debugger stop when the checkbox is clicked? There may not be, but I thought I would ask.

I am trying to reverse engineer a Microsoft CRM 2011 web page. The page loads a massive number of scripts and HTML. My current development focus is on the click event of a checkbox element on the page. Clicking the element causes behavior on the page to change, and I want to walk through the code that handles this.

The problem is the checkbox's click handler is attached during page load via an anonymous method. So the code is there, but trying to find it is asking one to locate a needle in a haystack.

Is there a technique using the Internet Explorer debugging tools to somehow make the debugger stop when the checkbox is clicked? There may not be, but I thought I would ask.

• javascript
• dynamics-crm
• dynamics-crm-2011

Share Improve this question Follow edited Sep 21, 2011 at 4:49 ccellar 10.3k22 gold badges4040 silver badges5656 bronze badges asked Sep 20, 2011 at 19:50 John LivermoreJohn Livermore 31.3k4848 gold badges132132 silver badges226226 bronze badges 2

• You can set a breakpoint in the code block of the click handler. As for trapping the actual click event... no idea – Marc B Commented Sep 20, 2011 at 20:07
• Can you give the link to the page you want to inspect and copy? – Devin Rhode Commented Sep 21, 2011 at 5:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Your best bet is to run this in the console:

document.getElementById('theCheckBoxId').onclick

If null appears in the console, you can continue reading. Otherwise the onclick handler and it's code should appear right there in the console.

---

Use Chrome's dev tools: Right click something on the page -> inspect element. You'll see this:

Go to "SOURCES" (no longer called "Scripts") and there is a '||' Pause button as you see in the screenshot. If the page doesn't fail, you can check the checkbox, and since scripts are paused, you'll see the code for the anonymous function bee highlighted and the page will be frozen. You can then use the tools to step through the code.

However, we can certainly better help you with what you actually want from the page...

You can also use attach a onbeforescriptexecute from the console: https://developer.mozilla/en/DOM/element.onbeforescriptexecute You would be something like this in the console:

document.getElementById('theCheckBoxId').onbeforescriptexecute = function (e) {
  alert('hey same thing as pausing the script!');
  console.error('script with this id about to run: ' + e.target.id);
  //Could also try .src .innerText etc. 
  //Reference this: https://developer.mozilla/en/DOM/element.onbeforescriptexecute

  //the full argument to checkout in the console:
  console.error(e);
};

You can also play around with the currentScript method: https://developer.mozilla/en/DOM/document.currentScript

You can also right click and inspect the check box, and then on the right panel of dev tools, look at the 'Click' event listener code, but often this is garbled and hard to work with.

It sounds like you have no way of modifying the anonymous function that is tied to the checkbox click event. If not, perhaps you can create a second event handler, but define it before the definition of the existing event handler.

Event handlers in the browser typically fire in the order they were defined. See http://jsfiddle/aroder/kkYfX/2/. If you defined your own event handler, it will give you a place to attach the debugger at least somewhere close to the anonymous function you are trying to step through.

Also, use the debugger statement to automatically break your code. If you are using IE, ensure the options under Tools > Options > Advanced > Disable Script Debugging (Internet Explorer) is UNchecked.

<script>
  // the debugger statement will automatically break in IE dev tools, Firebug, and Chrome dev tools
  debugger;
</script>

Older version of IE is pretty lame specially when it es to debugging AJAX applications. Firebug is the best that I have seen. It lets you replace an existing javascript function with your own. This is what I suggest.

1. Open the web application in Firefox
2. Copy sourcecode of existing function
3. Format it and add the following statement to the function at the place where you want it to stop and inspect the variables.
4. debugger;
5. Paste the new code in Firebug's console window and click on Run .. that's it!