JS调试

发表于

史上第一个bug

1947年9月9日，葛丽丝·霍普（Grace Hopper）发现了第一个电脑上的bug。当在Mark II计算机上工作时，整个团队都搞不清楚为什么电脑不能正常运作了。经过大家的深度挖掘，发现原来是一只飞蛾意外飞入了一台电脑内部而引起的故障。这个团队把错误解除了，并在日记本中记录下了这一事件。也因此，人们逐渐开始用“Bug”（原意为“虫子”）来称呼计算机中的隐错。

debug 就是找出 bug 的过程。

打字会错

1
2
3
4
5
6
iOS 写成 ios
JavaScript 写成 Javascript
vertical 写成 verticel
props 写成 porps
半角空格写成全角空格
ls -la 写成 ls-la

html的bug

CSS的bug

用border以及开发者工具

  • 没有样式，选择器没有选择到，(.tabsb li b 后面多了个逗号,)

  • CSS错误的注释会毁掉下面一行

  • 用border大法可以清楚地看到由于浮动而造成的符元素内容塌陷

  • 当使用border会影响布局的时候，用outlne代替，它不会占用盒模型位置

    VS.

JavaScript的bug

  1. 确定你的代码运行了
  2. 上帝视角
    1. 拼写错误
    2. 拼写错误
    3. 拼写错误
    4. 其他错误（用 WebStorm 可以避免拼写错误）
  3. 用 console.log 或者 console.assert 验证

  • html文件映射到浏览器页面，直接在浏览器中修改调试

    1. 打开谷歌开发者工具 — setting — workspace — add folder

    2. 映射 Map to File System Resource

    3. 按下esc，出现控制台，就可以实时修改了，修改完按下保存再刷新，进行调试。

  • Uncaught ReferenceError:appel is not defined：用了一个未声明过的变量。（reference error 引用错误）

    把它打印出来是什么类型

  • Uncaught TypeError: obj.fooo is not a function：不是一个函数 （type error类型错误）

    打印出来，属性不报错，返回undefined （变量未声明直接用回报错，属性没声明直接用不报错）

  • Uncaught SyntaxError: Unexpected token function ：未意料到的字符 function ，说明语法有错误（foo:function） （syntax error语法错误）

  • Uncaught TypeError : Cannot read property ‘join’ of undefined：jion前面的出现错误