JavaScript代码风格和debug

104 阅读1分钟

1. 代码规范

image.png

// 1.foo和()之间不需要有空格
// 2.多参数,后面加上一个空格
// 3.()和{之间有一个空格
// 4.{和其他函数定义在同一行中
function foo(m, n) {

}

foo(20, 30)

if (true) {
} else {

}

for (var i = 0; i < 10; i++) {

}

// 模板字符串(可以换行)
var message = `
   哈哈哈哈哈${100}
`

function sum(num1, num2) {
  return num1 + num2
}

2. Chrome中debug调试技巧

image.png

  • Chrome开发者工具Console区域: 可以查看代码中使用console.log() 输出的信息

  • 给代码添加断点(breakpoint): 代码运行时遇到断点便会停止执行

    • VSCode中,点击对应的代码行号左侧的红点即可添加断点,或者在代码上方加上 debugger
    • Chrome中Source区域:找到要调试的文件,在代码左侧的行号处点击即可添加断点
  • Watch区域:输入对应的变量,可以观察代码运行过程中变量的值的变化情况

  • Breakpoints区域:可以查看js代码中所有添加的断点

  • Scope区域:查看代码生成的作用域

  • 上方工具栏按钮作用(从左到由):

    • 控制调试程序的暂停和恢复
    • 跳过下一个函数调用,执行下一行代码
    • 进入下一个函数调用,可查看函数内部执行顺序
    • 跳出当前函数
    • 进入下一个函数调用,不会进入setTimeout内部的函数