【JavaScript】用debugger进行除错

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

在开发过程中，通常会频繁使用chrome的开发人员工具来除错
例如把值印在console看看对不对
或是在开发人员工具的Sources下中断点来查看当下的状态......等等
这一系列行为都是从开发人员工具介面去操作

那，有没有可能从原始码撰写时就去设定中断点呢？
当然是可以的，也就是本文要介绍的debugger

debugger的语法非常简单：

debugger;

一个简单的范例：

var num = 0;
function fn() {
  console.log("hello world");
  debugger;
  num++;
}
fn();

在这个案例中宣告了一个全域变数num，然後将值设为0
执行函式fn，此时会先印出hello world
然後会执行debugger这一行，此时如果有可用的除错工具，就会停在这个中断点
以chrome的开发人员工具为例，此时就会强制跳转到开发人员工具的Sources并停在debugger这一行
此时如果用chrome的开发人员工具查看num，会发现其值还是0
也就是说，num++这行程序码还没被执行，被debugger挡了下来