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?

The screenshot seems to show an HTML response body, not a JSON structure containing a JavaScript string. — Sebastian Zartner, Jan 14 '21 at 21:39
You probably have an error in your jQuery code, because `$('option_panel_type_file')` selects all elements with the _tag name_ "option_panel_type_file". Though I guess that's the ID of the element. In that case you need to add a hash sign before the name, i.e. `$('#option_panel_type_file')`. — Sebastian Zartner, Jan 16 '21 at 14:45
It is not jquery, but the ancient prototype.js. The code is core of Magento 1.x framework. No custom code added. The javascript executes correctly in the client. — kiatng, Jan 18 '21 at 02:15

score 2 · Accepted Answer · answered Jan 16 '21 at 14:41

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.

1 Answers1