Chrome调试动态创建的JS

Chrome开发者工具的Debug在开发JS时非常有用，可是现在越来越多的JS框架都会在运行时动态添加或加载JS脚本，比如很多JS模板引擎，就可能添加生成的JS文件，这个时候调试起来并不像普通JS那样直接在Chrome Developer Tools 的Sources Tab下面直接看到，造成调试脚本的不便。

不过Chrome提供了一种简单的方式，可以直接看到添加的脚本，并且可以打BreakPoints。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>调试动态创建的JS</title>
	<link rel="canonical" href="http://liangshuai.me/" >
</head>
<body>
	
<script type="text/javascript">
(function(){
	var script = document.createElement('script');
	var head = document.getElementsByTagName('head')[0];
    script.setAttribute('type', 'text/javascript');
    script.text = 'var test = 123; \nconsole.log(test);\n//# sourceURL=debugDynamicScripts.js';
    head.appendChild(script);
})();
	
</script>
</body>
</html>

上面的例子中script.text 就相当于动态生成的JS，如果想要在Sources里面看到的话只需要在结尾添加上\n//# sourceURL= 后面跟JS的文件名就可以了。这样动态创建JS文件就能在Sources下面的no domain下面看到。

Debug Dynamic Script

不过这个时候页面DOM中也会被添加了script标签以及脚本，如果要创建的脚本过多可能造成DOM臃肿。实际上在appendChild 之后就可以直接removeChild 掉了。脚本依旧能够看到并且可以执行。

1 2	head.appendChild(script); head.removeChild(script);