title: Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or the IE8 Developer Tool?
body: <p>From <a href="https://stackoverflow.com/questions/1680030/how-to-solve-duplicate-objects-in-dynamic-loading-page-by-using-jquery">my recent question</a>, I have already created some JavaScript functions for dynamic loading of a partial view. But I can't debug any dynamic loading JavaScript. Because all of the loaded JavaScript will be evaluated by the &quot;eval&quot; function.</p>
  <p>I found one way to create new JavaScript by using the following script to dynamically create the script into the header of current document. All loaded scripts will be displayed in the HTML DOM (and you can use any debugger to find it).</p>
  <pre><code>var script = document.createElement('script')
  script.setAttribute(&quot;type&quot;,&quot;text/javascript&quot;)
  script.text = &quot;alert('Test!');&quot;;
  
  document.getElementsByTagName('head')[0].appendChild(script);
  </code></pre>
  <p>By the way, most debuggers (IE8 Developer Toolbar, Firebug and Google Chrome) can’t set breakpoints in any dynamic script. Because debuggable scripts must be loaded the first time after the page is loaded.</p>
  <p>Do you have an idea for debugging when using dynamic script content or a dynamic file?</p>
  <p><strong>Update 1 - Add source code for testing</strong></p>
  <p>You can use the following xhtml file for trying to debug someVariable value.</p>
  <pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;head&gt;    
      &lt;title&gt;Dynamic Loading Script Testing&lt;/title&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
      function page_load()
      {       
          var script = document.createElement('script')
          script.setAttribute(&quot;id&quot;, &quot;dynamicLoadingScript&quot;);
          script.setAttribute(&quot;type&quot;,&quot;text/javascript&quot;);
          script.text =   &quot;var someVariable = 0;\n&quot; +
                          &quot;someVariable = window.outerWidth;\n&quot; +
                          &quot;alert(someVariable);&quot;;
          
          document.getElementsByTagName('head')[0].appendChild(script);
      }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload=&quot;page_load();&quot;&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>From answer, I just test it in FireBug. The result should be displayed like below images.</p>
  <p><img src="https://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTql0m0ugSGXPaY-/undebugable-firebug-html.PNG" alt="alt text" /></p>
  <p><em>Please look at the &quot;dynamicLoadingScript&quot; that is added after page load.</em></p>
  <p><img src="https://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yCUDqm41Wc3h0yk/undebugable-firebug-script.PNG" alt="alt text" /></p>
  <p><em>But it is not found in the script tab of FireBug</em></p>
  <p><strong>Update 2 - Create Debug Breakpoint in dynamic loading script</strong></p>
  <p><img src="https://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAETo4Qoiw/Debugger-VS2010.png" alt="alt text" /></p>
  <p><img src="https://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQc1Acl-UXXbHFE/Debugger-GoogleChrome.png" alt="alt text" /></p>
  <p>Both of the above images show inserting &quot;debugger;&quot; statement in some line of the script can fire a breakpoint in the dynamic loading script. However, both debuggers do not show any code at breakpoint. Therefore, it is useless to this</p>
  <p><strong>Thanks</strong></p>