I love Chrome Dev tools, I love how you can insert breakpoints and step through your source code. However, during my escapades in re-writing js source code on the fly for the realtime coding feature of the 3d multiplayer game maker I'm writing (Multi). I found a few interesting pain points.
For the following examples, please imagine that the code in the variable scriptText has been loaded from a cache.
Using Eval
If you use eval, the injected code will not be shown in Chrome Dev Tools.
jstest.html
Using script.text
If you create a script element then include the javascript code in the text tag for parsing, again, the script will not be shown in Chrome Dev Tools.
jstest.html
For the following examples, please imagine that the code in the variable scriptText has been loaded from a cache.
Using Eval
If you use eval, the injected code will not be shown in Chrome Dev Tools.
jstest.html
<html><head></head><body></body>
<script>
var scriptText = "console.log( 'hello' );";
eval( scriptText );
</script>
</html>
Using script.text
If you create a script element then include the javascript code in the text tag for parsing, again, the script will not be shown in Chrome Dev Tools.
jstest.html
<html><head></head><body></body>
<script type="text/javascript" src="jstest.js"></script>
</html>
jstest.js
var head = document.getElementsByTagName( 'head' )[0];
var script = document.createElement( 'script' );
script.type = 'text/javascript';
head.appendChild( script );
var scriptText = "console.log( 'hello' );";
script.text = scriptText;
Using Blobs
If you would like to see your code in the sources tab, then you should use the .src field to point to a blob containing your script.
jstest.js
var head = document.getElementsByTagName( 'head' )[0];
var script = document.createElement( 'script' );
script.type = 'text/javascript';
head.appendChild( script );
var scriptText = "console.log( 'hello' );";
script.src = window.URL.createObjectURL( new Blob( [scriptText] ) );
If you have any solutions around this problem, I'd love to hear.
If you need to debug your dynamically appended JavaScript string, adding a line with `debugger;` to the string will cause the debugging tools to break on it upon execution:
ReplyDeletevar script = document.createElement('script');
var js = 'debugger;\n' + //MAGIC HERE.
'console.log("test");';
script.append(document.createTextNode(js));
document.body.append(script);
You'll probably want to be able to remove or toggle that as part of your JS "build" process in Grunt or whatever. But that should work in most browser dev tools. (Blob isn't supported by IE9 and under, I don't think)
For what it's worth, it works for eval() too...
Deleteeval('debugger; console.log("test")');
Final post (sorry for the spam):
DeleteThe hidden feature to adding "debugger" to a string of JS you're creating (presumably) programmatically and evaluating, is it gives you the ability to set a breakpoint programmatically as well.
So let's say you have some huge amount of multiline JS:
var multilineJS = getAWholeCrapTonOfJS();
function insertBreakpoint(js, lineNo) {
var lines = js.split('\n');
lines.splice(lineNo - 1, 0, 'debugger;\n');
return lines.join('\n');
}
var withBreakpointLine10 = insertBreakpoint(multilineJS, 10);
... or something like that.
Either way... cool article, happy coding.
Thanks for that info! I wonder if that will work inside an Android WebView to hack together some line by line remote webview debugging.
DeleteAs hacky as JavaScript can be sometimes, I do love the crazy flexibility it gives you.