浏览器调试动态js脚本的方法

前两天拉取公司前端代码修改，发现在开发者工具的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里看到输出信息后，
这里写图片描述

点击后面的链接，即跳入动态脚本。
这里写图片描述

浏览器调试动态js脚本的方法

猜你喜欢