【JavaScript】JavaScript 程序流程控制 ③ ( 对 JavaScript 代码进行断点调试 )

文章目录

• 一、对 JavaScript 代码进行断点调试

• 1、断点调试
• 2、浏览器断点调试

一、对 JavaScript 代码进行断点调试

---

1、断点调试

断点调试 指的是 在 程序代码 的 指定行 设置一个断点 , 以 调试模式 启动后 , 当程序运行到 断点 处 , 就会阻塞住 , 此时可以查看 当前 各个变量的值 ,

然后 , 可以逐行代码向后执行 , 每行代码处都会阻塞住 , 每次阻塞 都可以查看 当前各个变量 / 表达式 的值 ,

如果 代码执行出错 , 就会 显示 出错信息 , 停止执行 ;

2、浏览器断点调试

在 浏览器 中 , 按 F12 进入 调试模式 ,

然后选择 " Sources " 选项 , 在 Sources 选项卡的 Page 栏 , 选择 要 调试的 JavaScript 代码所在的 demo.html 文件 ;

点击 JavaScript 代码 行 的 行号位置 , 显示有个向右的蓝色箭头 , 就是在该行设置断点成功 ;

选中 指定的表达式 , 这里选择 i 变量 , 然后点击右键 , 在弹出的右键菜单中 , 选择 " Add selected text to watches " 选项 , 就可以在右侧 " Watch " 中查看选中的表达式 ;

刷新界面 , 进入断点 , 阻塞 , 此时 var i = 0; 代码还未执行 , i 的值为 undefined 未定义值 ;

点击 下面 红色矩形框 的 下箭头 按钮 , 或 按 F11 快捷键 , 即可执行 var i = 0; 代码 , 执行完毕后 , i 变量被声明 , 值变为 0 ;

此时代码阻塞在 i < 100 处 ;

继续按 F11 快捷键 , 执行代码 i < 100 , 得到 true , 表示不满足 循环终止条件 , 执行循环体内容 ,

代码阻塞在 console.log("循环 " + i); 循环体代码的第一行位置 ;

继续按 F11 快捷键 , 执行循环体代码 console.log("循环 " + i); , 在 浏览器控制台 输出 如下内容 ;

回到 Sources 面板 ,

代码阻塞在 i++操作表达式 位置 ;

按下 F11 快捷键 , 执行 i++操作表达式 , 此时 i 变量自增 1 , 在 Watch 面板中变为 1 ,

至此 , 一个完整的 for 循环 完成 第一次循环 ,

再向后执行 , 就是第二次 循环 ;

此时代码阻塞在 循环终止条件 i < 100; 代码处 , 这是 本次循环 开始的代码 , 按 F11 继续向后执行 ;

参考 or 循环的语法结构 :

for (initialization; condition; operate-expression) {  
  // 循环体，只要条件为真就会执行这里的代码  
}

• initialization : 循环控制变量 的 初始化表达式 ;
• condition : 循环终止条件 , 如果该条件为 false 则继续执行循环 , 如果 该 表达式为 true 则退出循环 ;
• operate-expression : 操作表达式 , 循环控制变量 的 变化方式 , 一般是 递增 / 递减 运算符 运算 ;