How to debug JavaScript embedded in HTML response in Firefox Debugger

Question

I cannot figure out how to debug JavaScript placed in a <script> element loaded together with an HTML response payload. I can view the payload:

Is it possible to add breakpoints and step through that JavaScript code?

Answer 1

To see the JavaScript in the Debugger and be able to debug it, you need to add a //# sourceURL comment at the end of the script to give it a name, see https://stackoverflow.com/a/14131320/432681 and the description at https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources.

In your case this would look something like this:

...
if ($('option_panel_type_file')) {
  $('option_panel_type_file').remove();
}
//# sourceURL=option-panel
</script>
...

That makes the Debugger display your script under the name "option-panel".

Having said that, note that for security reasons, JavaScript code embedded within HTML is not executed when you add the HTML dynamically, e.g. via innerHTML, see https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations for more info.

So in order to get the code executed, you need to load it separately from the HTML and embed it e.g. by adding a <script> element.

Though as you're obviously using jQuery, note that its html() function circumvents that restriction warns about this in its documentation.