前端调试可通过在代码中添加 debugger 语句或在浏览器控制台点击行号来设置断点。程序暂停后，利用调试工具栏的按钮可控制执行流程，包括恢复运行、单步跳过函数及进入函数内部。通过作用域面板能实时查看不同作用域下的变量状态。需注意异步代码在断点处可能导致执行时序差异。
在一行代码的前面或者后面写上 debugger。运行到这的时候就会停止。
直接在控制台的 Sources（中文版为源代码）目录下点击左边的行数即可。
然后刷新一下。
遇到断点后，程序会停止运行。此时注意，控制器里打断点的那行代码并没有被执行。
第一个按钮是一直执行到下一个断点的意思，直到运行完毕。 第二个按钮是进行下一步，也就是执行下一个逻辑，或者说按逻辑（比如会遇到 if 等条件）去执行下一行代码。
可以查看到不同作用域下的变量的动态变化，如下图所示，展示了代码块范围内的所有变量：
提醒一句：对有异步代码的文件进行断点时有个小提醒，可能你在断点的情况下正常运行了，但不断点的情况下就不正常了，这时候就要想到异步的时机问题，可能断点的时候异步就执行完了。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
代表'下一步（Step）'：运行下一条指令，快捷键 F11。运行下一条语句。一次接一次地点击此按钮，整个脚本的所有语句会被逐个执行。
代表'跨步（Step over）'：运行下一条指令，但不会进入到一个函数中，快捷键 F10。 跟上一条命令'下一步（Step）'类似，但如果下一条语句是函数调用则表现不同。这里的函数指的是：不是内建的如 alert 函数等，而是我们自己写的函数。
如果我们对比一下，'下一步（Step）'命令会进入嵌套函数调用并在其第一行暂停执行，而'跨步（Step over）'对我们不可见地执行嵌套函数调用，跳过了函数内部。
执行会在该函数调用后立即暂停。
如果我们对该函数的内部执行不感兴趣，这命令会很有用。
