1、alert弹框调试
正对js代码的调试，我们往往需要获取某些变量的值，于是在早期我们往往通过alert方法将变量的值通过弹窗的形式进行打印。
<script>
alert('测试弹框')
</script>
2、console控制台打印
alert方法对于我们来说或许仍然比较繁琐：每次alert某条信息都需要弹窗，弹窗都会使得我们对页面中的其他区域的操作无效化。 那么，为了能够更方便地调试，各浏览器厂商在相应浏览器中都添加了成为“控制台”的功能，用于调试和查看错误等。以下以Chrome中开发者工具中的“控制台”为例。
- console.log
- console.warn
- console.error
- console.debug
- console.info
let a = 123
console.log(a)
let a = {a:1,b:2}
console.log(a)
3， 断点调试
JS断点调试，即是在浏览器开发者工具中为JS代码添加断点，让JS执行到某一特定位置停住，方便开发者对该处代码段的分析与逻辑处理。
DOM断点，顾名思义就是在DOM元素上添加断点，进而达到调试的目的。而在实际使用中断点的效果最终还是落地到JS逻辑之内。我们依次来看一下每一种DOM断点的具体效果。当节点内部子节点变化时断点（Break on subtree modifications）。
在前端开发越来越复杂的今天，前端JS代码越来越多，逻辑越来越复杂，一个看似简单的Web页面，通常伴随着大段大段的JS代码，涉及诸多DOM节点增、删、改的操作。难免遇到直接通过JS代码很难定位代码段的情况，而我们却可以通过开发者工具的Elements面板，快速定位到相关DOM节点，这时候通过DOM断点定位脚本就显得尤其重要了。
5，真机调试
iOS
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器（设置 - Safari - 高级 - 开启 Web 检查器）
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试（菜单栏 - 开发 - iPhone 设备名 - 选择调试页面）
- 在弹出的 Safari Developer Tools 中调试
没有 iPhone 设备可以在 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器
Android
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入 chrome:/inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面
