Specific example: the haystack.js script from How Big is Your Haystack?

I've searched for an answer and everything seems to point to using the //# sourceURL=name.js ment. However, the mechanics of how to acplish this elude me (maybe I'm just dense).

Everyone always points to Debugging JavaScript, but the demo is broken (same-origin error). Other mon examples do not provide insight for working with an external script such as this.

I've tried using Live Edit to insert the sourceURL ment, but so far the eval script never shows up in the Sources tab.

Would someone please walk me through the steps to plete this task?

UPDATE: This has proved to be an interesting and annoying endeavour. This particular site makes the task needlessly difficult with the following plications:

• The haystack.js script includes document.write() statements (which load the other scripts used). These must be removed before the script is reloaded, otherwise the DOM is cleared.

• The author uses a queer, backtick cipher form of obfuscation on the code. Therefore, code modifications (including the sourceURL) have to be made after obfuscation is removed, but before the eval takes place.

I kludged a partial solution. After loading jQuery into the page, I run this script:

$.ajax({
  url: '/js/haystack.js',
  dataType: 'text'
}).done(function(data) {
    // Remove document.write() statements and append sourceURL ment after obfuscation is removed
    var refactored = data.replace(/return d/, "return d.replace(/document\.write[^;]+;/g, '') + '\\n//# sourceURL=haystack.js\\n';");
    $('head').append('<script type="text/javascript">' + refactored + '</script>');
});

Now haystack.js appears in the (no domain) tree of the Sources tab. Breakpoints can be set, but there is odd behavior. Seems the DOM event handlers are still bound to the original script (breakpoints in reloaded script handlers are never reached). Executing pageInit() again rebinds the handlers to the modified script, but page updates are still erratic. Not sure why the behavior persists. I can step through the code and everything appears normal there, but page updates seem to lag behind the code. The fact that the code violates almost every javascript best practice is no doubt a factor.

Specific example: the haystack.js script from How Big is Your Haystack?

I've searched for an answer and everything seems to point to using the //# sourceURL=name.js ment. However, the mechanics of how to acplish this elude me (maybe I'm just dense).

Everyone always points to Debugging JavaScript, but the demo is broken (same-origin error). Other mon examples do not provide insight for working with an external script such as this.

I've tried using Live Edit to insert the sourceURL ment, but so far the eval script never shows up in the Sources tab.

Would someone please walk me through the steps to plete this task?

UPDATE: This has proved to be an interesting and annoying endeavour. This particular site makes the task needlessly difficult with the following plications:

• The haystack.js script includes document.write() statements (which load the other scripts used). These must be removed before the script is reloaded, otherwise the DOM is cleared.

• The author uses a queer, backtick cipher form of obfuscation on the code. Therefore, code modifications (including the sourceURL) have to be made after obfuscation is removed, but before the eval takes place.

I kludged a partial solution. After loading jQuery into the page, I run this script:

$.ajax({
  url: '/js/haystack.js',
  dataType: 'text'
}).done(function(data) {
    // Remove document.write() statements and append sourceURL ment after obfuscation is removed
    var refactored = data.replace(/return d/, "return d.replace(/document\.write[^;]+;/g, '') + '\\n//# sourceURL=haystack.js\\n';");
    $('head').append('<script type="text/javascript">' + refactored + '</script>');
});

Now haystack.js appears in the (no domain) tree of the Sources tab. Breakpoints can be set, but there is odd behavior. Seems the DOM event handlers are still bound to the original script (breakpoints in reloaded script handlers are never reached). Executing pageInit() again rebinds the handlers to the modified script, but page updates are still erratic. Not sure why the behavior persists. I can step through the code and everything appears normal there, but page updates seem to lag behind the code. The fact that the code violates almost every javascript best practice is no doubt a factor.

• javascript
• google-chrome-devtools

• Are you talking about debugging a script? Couldn't you use try and catch? – Abraham Hamidi Commented Dec 23, 2013 at 0:48
• I wanted to add this even if it has been a while. chrome.google./webstore/detail/switcheroo-redirector/… Will allow to finagle the script tag so that you can point it at a local copy (which you have unmangled) and then debug: chrome.google./webstore/detail/switcheroo-redirector/… – Nathaniel Johnson Commented Feb 21, 2014 at 1:10

1 Answer 1

This question really intrigued me. I hope my answer helps. I started with Set breakpoints and debug eval'd JavaScript and then expanded it a bit

Here is the plunker

Better than using eval, you can insert a script element into a document.

var js = "console.log('this is line 1');"
addCode(js); // Right now! Debuggable!

// Dynamically evaluate JavaScript-as-string in the browser
function addCode(js){
  var e = document.createElement('script');
  e.type = 'text/javascript';
  e.src  = 'data:text/javascript;charset=utf-8,'+escape(js);
  document.head.appendChild(e);
}

It will then show up in the sources tab:

Using eval also work by adding the line //# sourceURL=dynamicScript.js at the end

See this plunker

var js = "console.log('this is line 1');\n" +
"//# sourceURL=dynamicScript.js;"
addCode(js); // Right now! Debuggable!

// Dynamically evaluate JavaScript-as-string in the browser
function addCode(js){
  eval(js);
}

Notice that the script is listed under the (no domain) source folder.