How to debug dynamically loaded JavaScript (with jQuery) in the browser’s debugger itself?

by

You can give your dynamically loaded script a name so that it shows in the Chrome/Firefox JavaScript debugger. To do this you place a comment at the end of the script:

//# sourceURL=filename.js

This file will then show in the “Sources” tab as filename.js. In my experience you can use ‘s in the name but I get odd behaviour if using /’s.

Since if a domain it is not specified filename.js will appear in a folder called “(no domain)” it is convenient to specify a domain for improving the debugging experience, as an example to see a “custom” folder it is possible to use:

//# sourceURL=browsertools://custom/filename.js

A complete example follows:

window.helloWorld = function helloWorld()
{
  console.log('Hello World!');
}
//# sourceURL=browsertools://custom/helloWorld.js

For more information see:
Breakpoints in Dynamic JavaScript
deprecation of //@sourceurl

More Related Contents:

  1. How do I create an HTML element with attributes and events using JavaScript?
  2. Chrome/Firefox console.log always appends a line saying ‘undefined’
  3. How can I get the full object in Node.js’s console.log(), rather than ‘[Object]’?
  4. How to quickly and conveniently disable all console.log statements in my code?
  5. Why is console.log() considered better than alert()?
  6. Using Chrome, how to find to which events are bound to an element
  7. How are JavaScript arrays represented in physical memory?
  8. Modifying CSS class property values on the fly with JavaScript / jQuery
  9. Editing in the Chrome debugger
  10. Why does appending a to a dynamically created seem to run the script in the parent page?
  11. Javascript Debugging line by line using Google Chrome
  12. Javascript dynamically invoke object method from string
  13. Intercept calls to console.log in Chrome
  14. How do I print debug messages in the Google Chrome JavaScript Console?
  15. How to show full object in Chrome console
  16. JavaScript Dynamic Variable Names
  17. Chrome javascript debugger breakpoints don’t do anything?
  18. How to go about debugging JavaScript in the HtmlService in Google Scripts
  19. What is the correct way to write HTML using Javascript?
  20. Dynamic controlgroup and checkboxes unstyled
  21. How can I create unique IDs with JavaScript?
  22. Is it possible to change javascript variable values while debugging in Google Chrome?
  23. Console.log not working at all
  24. Mobile Safari on iOS crashes on big pages
  25. Can search engines index JavaScript generated web pages?
  26. How to debug identical strings that do not equal in google app script?
  27. JavaScript: How do I print a message to the error console?
  28. Find what javascript changes the DOM?
  29. How do I find which JavaScript is changing an element’s style?
  30. Chrome developer tools do not show all JavaScript files any more

Leave a Comment