肉渣教程

JS Debug

上一节 下一节

错误无处不在:

  • 代码写错了,会出现错误
  • 当网络不好,与服务器交互受到影响,也可能出现错误
  • 当无良运营商进行DNS劫持时,错误也可能发生
  • 当用户的操作超出预计的范围,做了不该做的事情,也可能发生错误

总之错误,无处不在,随时都可能发生。但是更多的时候,还是代码写错了。与其相信机器出错,不如相信是代码写错了,这个公理屡试不爽。


console.log()方法 - debug利器也

JavaScript作为前端脚本语言,跟其他那些后端语言不是太一样,不会跑失败了就弹出错误在哪里。那JavaScript语言该如何快速debug呢?那自然是使用console.log()方法。

console.log方法可以输出信息到浏览器的控制台中。


当代码太长时,可以console.log()为标记来看具体是在哪里出错了。(因为JavaScript语言作为一种脚本语言,会按顺序来执行代码,当遇到错误时才会停止执行;因此console.log方法成功输出某些信息时,则代表此句console.log前的代码都是顺利进行的;此外,使用console.log方法可输出关键变量的值,从而跟踪关键变量的值的变化,有助于进一步把握程序的运行。)

var a = 6;
var b = 111;
var c = a * b;
console.log(c); // 输出c的值到控制台

// 故意来写错一下
var jerk = j;

// 因为上面出错了,所以后面的程序就都不会运行了
// 因此控制台也看不到新的信息输出
console.log( jerk );

运行一下


设置断点(Breakpoint)

在JavaScript程序中,可以设置断点,以让JS程序在这个断点处,暂停运行;从而使开发者可以调试与查看此时各关键变量的值;调试好后,若要恢复运行,点击代表继续运行的按钮即可。

debugger这个关键词就是用来设置断点(Breakpoint)的,示例如下:

var x = 1;
debugger; // 断点调试
x = x * 10;
document.getElementById("demo").innerHTML = x;

运行一下


JS Debug

上一节 下一节