Web开发调试方案分享 - JS控制台调试

  1. 页面突然不正常了
  2. 执行临时代码看效果
  3. 熟悉代码运行规则，少做无用功

  • 作者：KK

  • 发表日期：2016.2.21

页面突然不正常了

按钮点击无效，UI又没按照预期变化，本来好好的脚本不知改了哪些其它地方突然一切都不正常了

这种常见的错误一般是因为中途有JS出错造成的，错误可能是中间添加的JS有语法错误，或者调用了不存在的变量，又或者从一个null变量中调用了方法，还有就是调用了不存在的函数/方法

通常这种错误发生时都会在控制台显示出来，打开Chrome开发者工具的Console选项卡就能看到一段红色的错误提示

按照以往经验，往往你只要把红色这些错误都解决了，BUG就自然消失了，一切又会恢复正常

大部分突然从正常变成不正常的前端页面错误都是因为中间突然出现了JS报错，然而实际上我接触过的好多同事都没有下意识地第一时间去看控制台的JS错误，并且解决它

而是一味地只顾看自己所写的代码看看有没有问题（也有看后端代码的）...

而且不敢往底层去查，于是就在一个模糊的位置不断地游走，查了大半天没找出BUG所在

结语:页面突然不正常了，赶紧看控制台有没有JS错误

执行临时代码看效果

如果页面中的JS有个全局变量a,你想知道它的值，则可以在开发者工具的Console里直接输入代码来访问它的值

这里你还能输入很多代码，就像平时写代码一样，比如你输入alert(123)看看，真的会弹窗哦

然后如果页面中有个selAll函数是用于全选所有数据的，那么你也输入selAll()那么页面的所有东西都会被选中啦

这个我经常用来做2件事:

  1. 输入类似'abcdde'.substr(3, 2)这样的代码测试一下裁剪字符串，或者/xxxx/.test(xxx)做正则匹配测试

  2. 调用页面定义了的函数，传递不同参数测试效果，我才不跟你切回编辑器改代码再来刷新页面呢

    一般我的程序设计风格都偏向于把一切功能设计成一个个函数，然后有一些顶层的总控流程函数来调用那些功能小函数

    也能提供我在控制台来调用那些小函数实现不同的流程逻辑，简单地说就是元子化设计,颗粒度界线以“一个小功能就有一个小函数“为准则

    而不是一个大函数里面什么代码都有，搞得自己要测试小流程时也无法在控制台写调用，只能改页面代码刷新，这样就降低了工作效率

    然而实际上封装多那么几个小函数真的卡死了页面了吗？至少在现在这个年代，谁的CPU差到JS都跑卡了呢，你在做什么大网站大数据？

熟悉代码运行规则，少做无用功

又有时候出错后调试大半天，是因为对JS代码的执行规则不熟悉，然后也导致你在不相关的地方改了半天代码都没将问题解决掉

下面我讲一下通常会遇到的这类问题：

一个script标签里的代码有问题，导致另一个script标签也运行出错了

简单的例子就是第1个script出现了语法错误，第2个标签调用第1个标签里的函数失败

<script>
var a =

function b(){}
</script>

<script>
b();
</script>

以上代码有2个问题

第1个问题是声明变量a的语法有问题，因为有等号没有值，实际上导致引擎运行了这样的语句：var a = function b(){}，结果成了a的变量赋值，b函数实际上没有被声明

第2个问题是第1个标签书写导致出问题后，b函数没有被装载到内存里，结果造成了第2个标签调用了一个不存在的函数

于是控制台报错消息就是Uncaught ReferenceError: b is not defined，点击查看代码位置就发现是第2个标签的

这种时候，有些程序员就会陷入第2个标签中调试，你现在看第2个标签的代码是简单的还好说，一复杂起来包了6层函数，里面共800多行代码，然后这个程序员就在里面不断地尝试各种方式和顺序去调用b函数

实际上此时他最应该做的就是找到b函数的定义点，按照我的经验总结，如果有定义，一般是没错的，多数是没成功被装载到内存中

于是我会从语法级别入手，先在函数定义的那个标签区域（或者js文件）开头的地方alert一下，如果alert能成功执行，则说明这片代码的语法没问题;否则我就开始查语法

如果语法没问题就看b函数在哪里定义的，如果直接是function b(){}这样定义的话一般不会有什么干扰因素。只是如果说有这样的代码就麻烦点:

if(xxx){
	window.b = function(){};
}

这种按条件产生函数的逻辑有时候可能会进不去，但实属少数，多少出现在插件初始化的地方，我不多讲

而当alert不能成功执行，我没看到弹窗的话，第一意识就是语法出了问题，如果能从控制台报错中显示出来的语法错误最好办，按照我最开始讲的，有错误就第一时间解决掉

如果没有报错，我查语法的方式就是对半查，假设代码总共1000先，先保留最开头添加的alert,把第2到500行代码剪切起来并刷新，如果能成功执行我开头加的alert,说明1到500行有语法问题导致alert不成功;而如果都不能执行那当然是501到1000行有问题啦，这时候将剪切的代码粘贴回去恢复，重新剪切范围为1到700多行。..就这样慢慢向前排查咯