If you're struggling with debugging the dynamically added javascript, consider inserting a "debugger;" statement. This will force the code to pause at that specific line, overriding any breakpoint configurations.

Great news! You can now debug dynamically loaded JavaScript with Google Chrome!

No need to insert additional debugger; or any other attribute for dynamically loaded JS files. Just follow these steps to start debugging:

Method 1:

I recently learned a simple method from my tech lead to debug dynamically loaded Javascript methods.

1. Open the Console in Chrome and type the name of the method, then press enter.
   For example, GetAdvancedSearchConditonRowNew
   If the JS method is loaded, it will display the method's definition.

https://i.stack.imgur.com/LgsHr.png

2. Click on the method's definition to open the entire JS file for debugging :)

https://i.stack.imgur.com/Qi41G.png

Method 2:

For instance, I load a JS file when clicking a button using an ajax call.

1. Access the network tab in Google Chrome Dev Tools.
2. Click on a control (e.g. button) that loads a JS file and calls a function.
3. Check the network tab for that JS function (e.g. RetrieveAllTags?_=1451974716935)
4. Hover over its initiator to locate your dynamically loaded JS file (prefixed with VM*).

https://i.stack.imgur.com/4m3Sn.png

5. Click on that VM* file to open it.
6. Add a debugger wherever needed in that file :D

https://i.stack.imgur.com/0tuZD.png

My preferred browser for this task is Google Chrome.

In the scripts tab of Chrome, you have the option to enable 'pause on all exceptions'.

To make use of this feature, simply insert the following line into your code: try{throw ''} catch(e){}. This will prompt Chrome to halt execution at that specific line.

UPDATE: I have adjusted the image to provide a clearer visual representation of what I am explaining.

To ensure the evaluated code runs properly, consider assigning it a specific "name" as demonstrated here:

If you follow this practice, implementing the debugger technique mentioned in "update 2" should be effective.

LATEST NEWS: We have made an important update to the sourceUrl syntax by replacing "@" with "#" to prevent any issues on browsers that do not support it (specifically IE). Find out more about this change here

When I use Chrome (12.0.742.112) with the code you provided along with a debugger statement like this

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

I find that it works for me.

I have a need to adjust some JavaScript by limiting the scope of all jQuery selectors to the current partial view div before executing it.

It might be more effective if you bind the selector change to an event on your partial view, rather than creating script elements in the HTML body (it just doesn't feel right).

You could implement something like this

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then proceed with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

This piece of code will always append a limiting selector to all jQuery select operations conducted while the mouse is within a specific element, assuming the HTML structure isn't too convoluted.

(That being said, it still seems somewhat makeshift - perhaps there's a better solution out there)

Cheers

After loading the page and injecting the script, Firebug allows you to easily observe the script. By setting a breakpoint in the correct location, it will remain intact even when you refresh the page.

When dynamically loaded Javascript is parsed by the browser, it is subject to debugging tools like WebKit or FireBug. This applies even to developer tools in IE8.

If your code encounters issues, they may not be within the file or text that you suspect.

Additionally, using script.text = "alert('Test!'); is not universally valid across all browsers. Instead, consider using

script.innerHTML = "alert('Test!');";

Despite the name innerHTML, it refers to the code inside HTML tags and is commonly misunderstood.

UPDATE TWO:

In a second update utilizing Chrome, follow these steps:

1. Navigate to about:blank

2. Open the console and paste the following code:

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

This will trigger a break and open the script tab with about:blank displayed. Then, view the call stack list on the right side, click on the second (anonymous function), and it will reveal the breakpoint location.

Your file will contain an anonymous function representing the code being run, helping you identify the correct context for the breakpoint.

To execute JavaScript code step by step, you can utilize the Developer Tools in browsers like Google Chrome and Safari. Simply navigate to Developer Tools > Scripts and select the specific script you wish to debug. You can then either use the pause button on the right side or set breakpoints by clicking on the line numbers.

Adding a console.log('') statement is one trick I rely on in my coding process. When this statement shows up in the console, it comes with a line number attached to it. By clicking on that number, you can swiftly navigate to the corresponding location in the source code and implement a breakpoint. However, a downside to this method is that breakpoints do not persist after reloading the page, requiring you to rerun the code in order to insert a debugger.