javascript调试

最新推荐文章于 2024-07-21 21:24:28 发布

半点寒12W

最新推荐文章于 2024-07-21 21:24:28 发布

阅读量674

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/bdh123b/article/details/121927119

版权

javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript调试中的两种主要方法：console.log()和断点调试。在遇到累加bug的示例中，通过这两种调试手段，可以定位并解决代码问题。console.log()用于静态输出变量值，而断点调试则能动态观察变量变化，帮助开发者更直观地找到问题所在。

摘要由CSDN通过智能技术生成

程序调试是我们在开发经常要做的事情，没有调试工具是很难去编写 JavaScript 程序的，你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。在javascript中主要有以下这几种调试方法。

console.log()

这是一种静态的调试方法，可以在控制台上输出相应的数值，可以给我们看到相应的数值变化。

断点调试

断点调试是一种动态的调试方法，在复杂的bug面前，这是一种很高效的方法。

下面我们假设存在一个累加的bug,然后通过这两种方法来调试

bug: 从1累加到10，发现输出并不是符合预期的结果

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script>
      var sum = 0;
      for(var i = 0;i < 10; i++){
         sum += i;
      }
      console.log(sum);
   </script>
</body>
</html>

console.log()调试

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script>
      var sum = 0;
      for(var i = 0;i < 10; i++){
         sum += i;
         console.log(i);
      }
      console.log(sum);
   </script>
</body>
</html>

在这里插入图片描述从上面可以看到出现bug 的原因是i没有加到10。
断点调试

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script>
      var sum = 0;
      for(var i = 0;i < 10; i++){
         sum += i;
         console.log(i);
      }
      console.log(sum);
   </script>
</body>
</html>