JavaScript 调试方法

Posted 2020-10-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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打开这段代码，效果如下。

技术分享