JavaScript 调试方法

对于初学的人来说,代码效果和预期的不符合是一件很心累的事情,因为不知道如何检查。
 
找别人,不认识,不知道找谁,身边有没有认识的人学前端,非常痛苦,如果学前端有什么痛苦的,那么这就算一个。
记得以前,自己还是一个刚开始写的新手,学着视频写代码,然后,结束之后,一测试,发现出错,怎么办,心累,
只能自己回去定格画面,一行一行排错,还好人家有代码显示着,不然,真不知道怎么办。
 
直到很后来,经历了那么多的错误,(当然,对于很多人来说,我依然是新手)我总结一下我个人写代码调试时的方式。
并不多,但是对于新手来说,足矣。
 
这是一段有错误的代码,(并非在下所写),只是拿来做样例,这里面错误太多。
用的是chrome 浏览器。 Sublime 编辑器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #div1 .active {background: yellow;}
    #div1 div{
        width: 200px; height: 200px; background: #ccc; border: 1px solid #999;display: none;
    }
    </style>
    <script type="text/javascript">
    window.onload=function (){
        var oDiv=document.getElementBy('idv1');
        var aBth=document.getElementsByTagName('input');
        var aDiv=oDiv.getElementsByTagName('div');
            for(var i = 0;i < aBth.length; i++) {
                debugger;
                    aBth[i].index=i;
                aBth[i].onclick=function ()
                {
                    aBth[i].className='';
                    aDiv[i].style.display='none';
                };
                this.className='active';
                aDiv[this.index].style.display='block';
            };
            
    };
    </script>
</head>
<body>
<div id="div1">
    <input  class="active" type="button"  value="教育">
    <input type="button" value="培训">
    <input type="button"  value="招生">
    <input type="button" value="出国">
    <div style="display: block;">111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
</div>
</body>
<html>

 
用chrome打开这段代码,效果如下。

调试方法:

1:
  不管这段代码实现什么功能,但是,有没有错误,你只要按下F12 就能知道。

然后,就发现,这里有红色的一条报错!
这里出现的英文是什么呢?! 不认识,怎么办,那我是不是不能用这种办法呢?
当然,不是!

这两处,都是可以点的入口。进去之后,发现新世界。


然后,就发现了你的源代码,恩,就是这样。
黄色高亮区就是你错误。
然后你就可以修改代码了。之后,就是重复这个过程。
 
2:
  debugger
 
 
在任意一处加入了一句debugger; 
回到浏览器,按F5,刷新键。
 
之后,将浏览器布局调成这样。
这四块区域的边界是可以手动调整的。
直接来看:
        1区:实时效果
 
        2区 :源代码
 
        3区:报的错误
 
        4区:变量
 
运行到debugger;这一句之后,引擎就会停止前进,这时候,就可以到4区按这两个继续向前走,或者按F10  / F11.
 
同时,也会在4区显示这些变量的实时值。
 
左边的/F10:会跳过函数。
 
右边的/F11:会一步一步执行。
 
 

这样,就可以判断和预期的值是否相同,进而进行调试。 
 
 
 
 
posted @ 2017-10-02 17:34  森海书生  阅读(187)  评论(0编辑  收藏  举报