PWA（渐进式 Web 应用程序）是目前 Web 开发中的热点技术之一，它可以实现离线访问、快速加载、类似原生应用体验等特点。在开发 PWA 时，我们经常需要进行在线调试来更好地改善性能和用户体验。本文将介绍两款 PWA 在线调试工具：Remote Debugging 和 Weinre。
Remote Debugging
Remote Debugging 是 Google Chrome 浏览器自带的在线调试工具，使用它可以通过 USB 连接手机或模拟器，在 Chrome 开发者工具里面调试运行中的网页应用。
使用方法如下：
- 打开 Chrome 浏览器，并打开你想要调试的网页应用。
- 在开发者工具上方选择“遥控设备”，然后通过 USB 连接设备或选择使用模拟器。
- 进入“远程设备”面板，选择正在运行的页面，即可进行实时 debug。
示例代码如下：
console.log('Hello World!');
则可以通过 Remote Debugging 工具查看控制台输出。
Remote Debugging 的优点是简单易用，不需要安装额外的软件，且可以直接在浏览器开发者工具中进行调试。但缺点是它只支持在 Chrome 浏览器中进行调试，无法调试其他浏览器、操作系统或设备。
Weinre
与之相比，Weinre 是一款较为通用的在线调试工具，它可以在多种 Webkit 内核的浏览器上运行，如 Safari、Chrome、Firefox 等。使用 Weinre 时，只需要将一个用于远程调试的 JavaScript 文件添加到网页应用中，然后在控制台中输入指令就可以进行远程调试。
使用方法如下：
- 下载并安装 Weinre， 可以通过 npm 进行安装：
npm install -g weinre - 启动 Weinre 服务：
weinre --boundHost -all- - 在网页应用中引入
weinre.js文件：<script src="http://localhost:8000/target/target-script-min.js#anonymous"></script>
- 打开控制台，并输入
weinre.runs('http://本地地址:端口', '唯一标识')命令连接至 Weinre 服务。
示例代码如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- --------------- ------- ------ --------- ----------- ------- --------------------------- ------------ ------- --------------------------------------------------------------------------- -------- -------- ----------- - ------------ ---- ---------- - --------- ------- -------展开代码
在控制台输入 weinre.runs('http://localhost:8000', 'weinre-example') 后，就可以使用 Weinree 工具远程调试网页应用了。
Weinre 的优点是它可以支持多种浏览器，操作系统和设备的调试，并且无需连接数据线，灵活性更高。但缺点是需要手动引入 js 文件，且配置相对比较繁琐。
总结
在开发 PWA 时，选择合适的在线调试工具很重要。Remote Debugging 和 Weinre 都是非常实用的调试工具，各有优点和缺点。如果你只需要调试 Chrome 浏览器，则建议使用 Remote Debugging；如果需要支持多个平台或设备的调试，则可以选择 Weinre
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501affc95b1f8cacdf57fd7
