面试中问到前端在测试时，你会用哪些方法去调试错误？？

最新推荐文章于 2022-11-03 14:42:00 发布

原创最新推荐文章于 2022-11-03 14:42:00 发布 · 827 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解前端开发中的四种常见调试方法：使用alert显示变量值、利用控制台输出、F12工具定位错误及debugger关键字设置断点。通过具体实例展示如何高效排查问题。

1.采用alert方式

alert方式，也算是一种比较常见的方式，在小规模的调试错误中，也是一种不错之举。

但是缺点也是非常之明显的，因为在程序运行之中，大量的弹窗方式，就显得不美观也很繁琐。

alert方式实例如下：

   username:<input type="text" id="username" placeholder="请输入用户名"/><br>
   password:<input type="password" id="pwd" placeholder="请输入密码"/><br>
   <input type="submit" value="提交" onclick="check()">

<script type="text/javascript">
       function check() {
           //获取这个username的值
           var username = document.getElementById("username").value;
           alert(username);
       }
</script>

结果：

2.采用控制台的输出方式

控制台：console.log(Massages)；

   username:<input type="text" id="username" placeholder="请输入用户名"/><br>
   password:<input type="password" id="pwd" placeholder="请输入密码"/><br>
   <input type="submit" value="提交" onclick="check()">

<script type="text/javascript">
       function check() {
           //获取这个username的值
           var username = document.getElementById("username").value;
           //alert(username);
           console.log(username);
       }
</script>

1. 在这个浏览器中执行，之后再用F12 调出这个开发者模式：

2. 输入这个consoletest

运行的结果：

多个测试，在这就不演示了，操作都是一样的。

3.采用的是这个F12调试方式，查看执行过程中的错误

F12 的调试相信大家并不是很陌生，在我们的浏览器执行我们的项目的时候，有些静态的资源没有加载出来，前端的js 没有出现，导致404错误，还有一些访问的路径没有获取到，500错误等等，都可以用F12开发者模式进行去测试。

4.采用debugger关键字，打断点

这篇主要的重点是这个debugger，前端的debug调试（在后端中的debug调试经常被使用到）

<button onclick="test()">test</button>

<script type="text/javascript">
function test() {
   debugger;
   var array=[1,5,6,7,8,9,5,2,22,999];
   for (var i = 0; i < array.length; i++) {
       console.log(array[i]);
   }
}
</script>

按F12, --》点击test --》按F11阶段调试，执行的是下一步，旁边可以显示当前的值。