1 调试介绍

调试是任何编程语言程序员的必备技能，代码难免出错，语法错误解释器会自动提出来，程序员直接修改就可以了。但是对于逻辑错误，解释器并不会意识到，他会按照他的理解执行，这就导致了代码的执行效果与预期的效果不相同。在代码编写阶段，程序出错的绝大多数原因就是逻辑错误导致的。如何找出逻辑错误呢？正常的步骤是这样的。
1.在程序的某一处设置一个断点
2.程序执行到这个断点的时候停止。显示我们想要知道的数据。
3.根据这些数据我们判断程序预期的处理结果是不是这样。
4.如果是这样，就是代码编写出了问题。如果不是这样，就是我们设计代码的时候思想出了问题。
3，4需要更高阶的知识才能够处理，我们今天要学的就是设置断点和显示我们想要知道的数据，也就是1，2。

2 webstorm调试

2.1 启动webstorm调试

注意webstorm每次调试完，都记住要关闭页面，不然下一次调试无法进行
1.设置断点
可以设置多个断点只要在对应的行号后面点击一下就可以了
在这里插入图片描述
2.启动调试方法1
在webstorm界面的右上角有两个绿色的箭头，第一个箭头表示直接运行，第二个箭头表示Debug调试。点击第二个箭头。开启调试

3.启动调试方法2
打开webstorm文件后，鼠标右键点击，选择Debug开始调试
在这里插入图片描述

2.2 执行调试步骤

都知道调试的基本概念是跟踪到某个语句的执行情况，如何进行切换语句呢？
1.设置断点启动调试后，默认执行到第一个断点所在的语句，这条语句准备执行。
2.然后我们来了解一下webstorm支持的语句控制操作，先找找操作框在哪,操作框原来在启动调试后的webstorm窗口的下边。其中不同的操作区域有不同的作用。
红色部分：执行下一句，进入，跳出，执行到下一个断点等的操作。
橙色部分：当前所在函数的嵌套情况
黄色部分：在当前状态下的局部变量和全局变量
绿色部分：调试的一些总控制。
在这里插入图片描述
3.了解红色区域的具体作用
（1）第一个蓝色按钮表示step over跳到下一步。不管这个是普通的赋值语句还是函数调用语句，都执行完这条语句后跳到下一步。
（2）第二个蓝色按钮、第一个红色按钮表示step into进入，如果这条语句调用了一个函数，进入函数，查看具体的函数执行步骤。
（3）第三个蓝色按钮，第二个红色按钮，跳出当前所在的函数
（4）第四个蓝色按钮，执行到下一个断点。

2.3 查看调试的时候的数据情况

在上面那幅图里的黄色区域可以查看当前变量的值
1.值类型变量用蓝色标记。对象类型的变量用红色标记，有一些特殊的对象类型的变量也会用蓝色标记，只不过标记的符号不太一样，对于对象类型的变量，可以点击查看他们的属性、

2.可以查看此时的局部变量和全局变量。
在这里插入图片描述
3.还可以点击左边的那个加号按钮，添加一个自己想要监控的变量。

2.4 webstorm调试的优点与缺点

可以清楚的看到每条语句执行后的值的情况，但是在和html、css搭配使用的时候，不好直接查看网页渲染效果。

3 浏览器调试

此处以谷歌浏览器为例，

3.1 浏览器调试

在浏览器中按F12进入开发者工具
在这里插入图片描述
浏览器调试不是传统意义上的代码调试，他不是逐句的执行代码语句，因为浏览器在用html和css代码渲染页面的时候不可能逐句执行语句。因此，浏览器可以选择某些html，css效果显示和不显示。

3.2 调试html代码

1.区域
在Elements的上半区域就是html部分，
2.操作
可以通过鼠标移动，在浏览器的可视区域发现对应的元素显示情况。
可以通过选择工具选择可视区域里的某个元素，对应的代码也会有阴影效果产生。
这样就可以看到html代码和渲染效果的对应关系。如果哪个元素没有就可以把鼠标移动到代码部分，然后再可视区域里找到这个代码对应的渲染效果了。
在这里插入图片描述

3.3 调试css代码

1.区域
在Element的下半区域就是css部分
2.操作
（1）css区域的左半部分是选择的html元素有关的css代码，其中画删除线的部分表示对于此元素无效的css设置。修改css代码查看效果，但这里的修改并不会影响html文件本身的情况。
（2）css区域的右半部分上半部分呢是盒子选择的html元素对应的盒子模型，下半部分选择元素对应的具体的css属性值。
在这里插入图片描述

3.4 调试js代码

浏览器对于js代码的调试我所知道仅限于console控制台查看某个变量的值。因此对于js代码的调试，最好还是用webstorm。
关于控制台Console的一系列函数可以在下面这个网站上看。
https://www.runoob.com/w3cnote/javascript-console-object.html
F12进入Console控制台进行查询值。
在这里插入图片描述

4 调试小练习

想实现在网页上用户输入一个数字，点击按钮后显示小于这个数字的所有素数。并且添加适当的css效果，便于观看。

4.1 代码初步

js代码里获取用户通过DOM对象获得用户输入的数值，并且计算小于这个值的所有偶数，显示到制定的div里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var fun=function () {
            var value=document.getElementById("value").value;
            var content=document.getElementById("content");
            if(isNaN(value))
                for(var i=0;i<value;i++){
                    if(i%2==0)
                        content.innerHTML+=i+" ";
                }
            else
                content.innerHTML="输入错误"
        }
    </script>
    <style>
        *{
            font-size: 30px;
            font-weight: bold;
        }
        #content{
            border: #FF0000 5px;
        }
    </style>
</head>
<body>
<form>
    <p>输入一个数字，显示比他小的所有素数</p>
    <input type="text" id="value" value="">
    <input type="button" value="确定" onclick="fun()">
</form>
<div id="content"></div>
</body>
</html>

4.2 查看效果

浏览器运行上述代码之后发现两个问题（简单的页面一般不会出现html的问题）
1.结果没有红色边框，这是css问题。
2.结果总是显示输入错误。这是js问题。

4.3 css问题调试

1.F12-Elements-选择div-分析
2.这个border设置是有效的，没有被覆盖，但是看右边的盒子模型，边框没有值。怎么回事？一定是这里出错了，看看我以前的笔记关于border设置。原来border属性必须要指定边框风格
https://blog.csdn.net/weixin_44055272/article/details/88654654
在这里修改，把border属性添加一个边框风格，如果成功就写到原文件里。同时div会占据一整行，因此我们修改display属性。使得最后css符合预期。
在这里插入图片描述

4.3 调试js

借助于webstorm
1.在fun函数开头设置断点，执行Debug
2.在页面里输入一个数字，点击按钮，触发函数，开启单步跟踪。
3.执行逐条语句的时候时刻关注下面的值变换，经过多次重复调试发现isNaN（value）一直是false，明明我输入的是123为什么是false，isNaN()函数不应该判断字符串内容是否是数字吗？
原来是我记错isNaN返回false才证明他是数字，返回true证明他不是数字。
在这里插入图片描述
2.修改代码过后就成功了

            if(!isNaN(value))
                for(var i=0;i<value;i++){
                    if(i%2==0)
                        content.innerHTML+=i+" ";
                }
            else
                content.innerHTML="输入错误";

修改代码执行后达到预期效果。
在这里插入图片描述

JavaScript调试简介