前两天拉取公司前端代码修改,发现在开发者工具的sources选项里边,居然没有列出来我要调试的js脚本,后来观察了一下,脚本是动态在页面里引入的,可能是因为这样所以不显示出来,但是如果不能断点调试,只靠打印日志真要把人累死了,效率太低,其实有两种方法可以解决。
1、在脚本里边增加//# sourceURL=xxxxxxxxx.js,名称自己命名,可以直接使用文件名,如下图:
other.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="external nofollow" />
<script src="./demo1.js"></script>
<script src="./demo2.js"></script>
</head>
<body>
<div id="box">
<!-- 控制数据的值切换显示隐藏 -->
<button @click="show=!show">transition</button>
<transition name="" mode="" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated">第一种方法</p>
</transition>
<transition name="" mode="" enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show">第二种方法</p>
</transition>
<!-- 多元素运动 -->
<transition-group tag="" name="" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated" :key="1">第一个元素</p>
<p v-show="show" class="animated" :key="2">第二个元素</p>
</transition-group>
</div>
<script>
window.onload = function(){
var app = new Vue({
el:'#box',
data:{
show:false
}
})
}
</script>
</body>
</html>
demo1.js
// 加上下边这句话,就可以让在开发者工具里显示不出来的静态加载代码显示出来,并且可以断点调试。
//# sourceURL=demo1.js
document.writeln('demo1.js')
demo2.js
//# sourceURL=demo2.js
document.writeln('demo2.js')
然后在网页里打开包含这个js的页面,这样就在开发者工具里能够看到了, 可以像普通js一样正常打断点并进行调试。
2、第二种方法是利用console.log(“让我调试吧!”)打印日志,在浏览器console里看到输出信息后,
点击后面的链接,即跳入动态脚本。