浏览器远程调试

• 承接上一节真机调试

1. 启动本地hatom前端工程

真机调试需要在移动设备上操作，由于设备屏幕普遍偏小，vconsole提供的控制台查看及复制输入等操作不方便，因此提供一种新的远程调试方法。（需要使用最新的模板生成项目，目前仅支持单页应用）

新版调试指令为npm run debug，与老版本调试指令不冲突，npm run dev指令依旧可以正常使用，与原先功能一致。

在Terminal中输入

npm run debug

项目启动时pc端浏览器中界面如图所示。 项目初始化时，默认会有二维码遮罩层，使用移动端调试工具扫描连接之后遮罩层会自动消失，移动端设备连接断开后又会出现。（若为老版本调试工具无二维码扫描功能，直接输入网址也可连接，注意此调试状态下协议为http而非https）

项目不涉及到移动端原生的功能可以在pc浏览器上进行调试，涉及到原生功能（例如拍照，二维码扫描等），在pc浏览器上点击调用时，移动端（保证移动设备已连接）会自动调用该功能，并且pc浏览器上会出现正在调用该功能的遮罩层，如图所示。

功能调用完成后hatom会返回调用结束信息，并且执行代码中自定义的回调函数，遮罩层消失。（部分功能没有结束信息返回，或者代码没有编写回调函数可能会导致遮罩层无法正常消失，如果遇到此种情况，刷新浏览器可恢复正常）

若回调函数为alert等阻塞浏览器的，会导致遮罩层卡住或者出现后立即消失，这是因为部分功能返回速度过快，此为正常现象。

2. 安装调试工具

进入调试环节的视频演示