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