Why can't I see/debug javascript loaded with jquery.html() with Chrome

Question

I'am loading html with some inline javascript on a $.post callback. Something "like that" :-)

callback{
response_data = '<p>string with html and </p><script "javascript">var scripts...</script>'
jQuery('#selector').html(response_data);
}

But when I do that, I can't see the new inline javascript loaded on Chrome's Scripts Tab. I see that JS on Network tab and js is executing but I can't debug this code.

Any idea about how to debug this code? Thanks!

Answer 1

All modern JS engines do allow to generate a javascript break-point "in-code".

To do that, you need to execute the debugger; statement somewhere in your code. As soon as the js engine reads that command, a break point is set and the debugger is loaded.

You might want to give that a shot. It might still not work correctly since dynamic script insertion can still be trouble and pain, depending how and when you do it.

It would definately a better idea to do it more "accurate" by creating and inserting a new script element

var myscript = document.createElement('script');
myscript.textContent = 'var scripts = 42; alert("hello");';
myscript.type = 'text/javascript';

document.body.appendChild(myscript);