前言
在前端开发中，我们经常需要调试前端页面中的 DOM 节点、CSS 样式、JS 代码等等。在移动端开发中，我们可以通过调试工具 weinre 来进行远程调试。而 weinre-tap，则是 weinre 的一个npm包，可以更加方便地使用 weinre 来进行远程调试。本文就来介绍一下 weinre-tap 的使用教程。
环境准备
安装 weinre-tap
执行以下命令，安装 weinre-tap：
npm install -g weinre-tap
运行 weinre
执行以下命令，启动 weinre：
weinre --boundHost -all-
执行成功后，会返回如下信息：
Weinre: starting server at http://192.168.1.101:8080 Weinre: http://192.168.1.101:8080/client/#anonymous Weinre: bound to *:8080
其中，http://192.168.1.101:8080 为访问页面的地址。
使用 weinre-tap 调试页面
单个页面调试
以一个使用 vue-cli 生成的项目为例，执行以下命令：
webpack-dev-server --config webpack.dev.conf.js --host 0.0.0.0 --watch --inline --hot --disable-host-check
浏览器中打开 http://localhost:8080 页面，此时我们可以在控制台看到如下的提示信息：
Weinre remote debugging server service started. You may now browse http://localhost:8080/client/#0b53dd20-ff2d-e46d-7b15-ee1734160557
其中，http://localhost:8080/client/#0b53dd20-ff2d-e46d-7b15-ee1734160557 为 weinre 的调试页面地址。
在该地址中，点击“Debug”进入调试页面，即可看到当前页面中的 DOM、CSS、JS 等信息，如下图所示：
多个页面调试
当有多个页面需要调试时，我们可以使用 weinre-tap 命令来进行快捷调试，如下所示：
weinre-tap http://localhost:8080 -v /js/about.js
其中，http://localhost:8080 为页面地址，/js/about.js 为需要调试的 JS 文件路径。
总结
至此，我们已经掌握了如何使用 weinre-tap 来进行远程调试的方法。使用 weinre-tap 命令能够更加方便地进行调试，省去了手动输入调试页面地址的麻烦，能够更加高效地进行开发调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdf1a