【记录】尝试在Chrome中调试JavaScript脚本

【背景】

折腾:

【记录】EasyUI中集成富文本编辑器kindeditor

期间,kindeditor一直和easyui冲突,不显示。

想要调试对应的js脚本:

<script type="text/javascript">
    //alert('document ready Into KindEditor');
   
    var editor;
    KindEditor.ready(function(K) {
        //window.editor = K.create('#easyui_editor');
        editor = K.create('textarea[name="easyui_editor"]', {
            allowFileManager : true,
            resizeType : 1
        });
    });
</script>

的执行情况,以便于发现,到底内部出现什么错误,什么冲突了。

【折腾过程】

1.经过一番折腾,终于在Chrome中搞懂,如何去调试js:

总的逻辑是:

(1)找到js的源码文件,

(2)在对应位置打上断点

(3)正常调试执行,正常的话,就可以运行到对应的断点处了。

对于找js源码,此处有个需要注意的:

默认是加载的

<script charset="utf-8" src="lib/kindeditor/kindeditor-min.js"></script>

很明显,对于xxx-min.js的话,是压缩后的代码,打开后是这样的:

for kindeditor min js file no format

不利于,或者没办法,去调试js。都看不清执行到哪一行了。

2.所以后来想办法去换成了完整版的:

<script charset="utf-8" src="lib/kindeditor/kindeditor-all.js"></script>

然后:

Chrome->F12->Source->Source->此处的localhost/schoolike/lib/kindeditor/kindeditor-all.js

找到此处要被执行到的函数:

create()

打上断点:

去点击对应按钮,执行到对应的断点处:

debug js for kindeditor ready fun

然后继续按F10,即可单步调试:

f10 can single step debug js in chrome

 

3.想要查看,监视某个变量值,则可以选中后,右击选择Add to watch:

chrom js choose value to add to watch

即可查看对应的变量的详情:

can see document value detail in chrom js

4.继续调试,回到对应的js代码片段内:

continue debug return to js in chrome

继续调试,跳到jquery-min.js中:

jump to jquery min js in chrome

很明显,无法看到对应的是哪行。。。

所以去把Jquery从压缩后的min的版本,换成完整版:

把原先的:

    <script type="text/javascript" src="lib/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="lib/easyui/jquery.easyui.min.js"></script>

换成:

    <script type="text/javascript" src="lib/easyui/jquery.js"></script>
    <script type="text/javascript" src="lib/easyui/jquery.easyui.min.js"></script>

再重新去调试。

 

【总结】

Chrome中去调试JavaScript的话:

还是用F12打开开发工具,然后双击js中对应代码所在行的左边,就是加上断点。

然后就可以用快捷键去调试了:

F10:单步调试

添加变量:右键某变量,Add to watch

等等,和普通的IDE中的调试功能是类似的。

其中,对于js代码,在允许的情况下,把压缩版的xxx-min.js换成完整版xxx.js,这样才能看清代码。否则压缩版的代码,都是没有注释,挤到一起的,没法调试的。



发表评论

电子邮件地址不会被公开。 必填项已用*标注

无觅相关文章插件,快速提升流量