- 综合排序
- 最热优先
- 最新优先
- 来自专栏smy
webapp开发调试环境--weinre配置
在cmd中运行weinre --httpPort 8081 -boundHost -all- ，启动weinre：在调试过程中保持cmd窗口不关闭 ? PC端在本地搭建服务器 weinre已经包含了一个http服务器，它的根目录就是C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre 试试在PC上访问192.168.0.20:8081/demo/weinre-demo.html ---- 注意：此句是关键：weinre --httpPort 8081 -boundHost ---- 下面看下效果，这里我用weinre自带的demo页面做示例： 手机连接wifi后访问:192.168.0.20:8081/demo/weinre-demo.html ? 页面全部或部分转化成html然后放到weinre服务器要么不转化闭着眼睛估计参数修改后发布再看效果......有一定的局限 (我试过将本地静态文件的地址和weinre服务器的地址合并为同一个，这样就不用经常拷贝新版本
2K110发布于 2018-04-03 - 来自专栏日积月累1024
使用weinre调试手机页面
Weinre（Web Inspector Remote），是一种远程调试工具。功能与Firebug及chrome调试器类似，可以帮助我们即时更改页面元素、样式，调试JS等。 工作原理 ? weinre由三部分组成 1. debug server 核心组件，运行在服务端，负责与另外两部分通信。 之后运行 npm g-g intall weinre 即可。 运行 1. 列出了weinre的文档及用于调试的url。 点击 http://10.136.30.144:8081/client/#anonymous， 看到如下调试界面。 ? 特别是当你要调试iphone页面，手上又无mac book时，试试weinre吧。 啥？你连iphone都没有！？god bless you~
1.5K30发布于 2020-12-07 - 来自专栏零域Blog
Weinre --WebApp 调试工具
content {:toc} 什么是 weinre？ weinre官网 上有两句有意思的介绍： weinre is WEb INspector REmote. 上面说 weinre 是一个远程 web 调试器。说到了它的发音，还挺幽默，哈哈。 远程 web 调试器。先说调试器，就像火狐中的 FireBug，Chrome 中的调试器一样。 为什么用 weinre？ 现代浏览器中调试工具都非常强大了，可以直接模拟手机设备，为什么还要用 weinre 这么麻烦的东西呢？ weinre 作为一种远程调试工具，在结构上分为三层： 目标页面（target）：被调试的页面，页面已嵌入 weinre 的远程 js，下文会介绍； Debug客户端（client）：本地的 Web Inspector Weinre 的客户端只能用 Chrome 或者 Safari 打开。
1.4K10编辑于 2022-03-21 - 来自专栏杰的记事本
weinre移动真机调试工具
官网地址： http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html 1.简介 weinre是一款非常好用的远程调试工具。 2.安装 weinre基于nodejs，因此首先要安装nodejs，然后使用npm进行安装： npm -g install weinre 3.运行 weinre --httpPort 8081 --boundHost 主要参数解析： httpPort 调试服务器运行的端口，默认8080 boundHost 调试服务器绑定的IP地址或域名，默认localhost 4.修改目标文件 使用webkit的浏览器（NOTE:由于weinre 的设计更多的是基于webkit的浏览器，因此建议使用chrome/safari）访问weinre服务器：http://localhost:8081 ?
67920发布于 2019-09-04 - 来自专栏九彩拼盘的叨叨叨
远程调试手机页面工具：Weinre 介绍
Weinre(全称Web Inspector Remote)是一款的可以在电脑上远程调试手机页面的工具。 weinre-demo.jpg 当在电脑上改变元素的样式时，手机上对应的元素的样式也会立即改变（无需刷新页面）。 Weinre目前应该不支持在JS中打断点调试的功能。 如何安装和使用，可以见Weinre入门手册。 需要注意的是 在Windows上安装Weinre时，cmd窗口需要用管理员身份打开。 如果用npm安装Weinre失败，可以用cnpm来安装。 用weinre启动Weinre Server时，只有本机才能连接Weinre Server。 如果需要手机可以连接Weinre Server，需要用 weinre --boundHost -all-或用weinre --boundHost 手机IP来启动Weinre Server。
1K30发布于 2018-08-27 - 来自专栏一个会写诗的程序员的博客
移动端Web开发调试之Weinre调试教程
weinre不支持断点调试。 Weinre也从最初的Java移植到了当前的JavaScript。在GitHub上搜索weinre的结果中前两个就是官方的Weinre项目。 ? 安装与服务启动命令如下: [plain] view plain copy npm -g install weinre //安装weinre weinre --boundHost [hostname | Weinre Server。 第三方Weinre服务 技术团队可以按照上述步骤搭建一个本地的weinre调试环境，供团队内部使用。除了自建weinre服务器，也可以使用第三方提供的weinre服务。
2.7K20发布于 2018-08-20 - 来自专栏HTML5学堂
移动端及时调试工具 - weinre使用方法
HTML5学堂：在前一篇文章当中，我们借着weinre讲解了NodeJS中的一些简单命令，也讲解了weinre的安装方法，今天我们把weinre的使用“完结”掉。 移动端页面的开发过程中，weinre“即时”的调试方式，能够让我们更好更快的解决调试问题，使调试工作变得更加方便。 关于target/target-script.js,是不需要进行任何修改的，因为，在weinre文件夹当中，本身自带了这个文件夹和相关文件。 weinre贴合浏览器的设计方法也让我们能够很直观的看到调试功能分类（和谷歌控制台基本一致）。 最后，自己给链接地址强制加上了时间戳……之后，weinre终于乖了~~~表示好心塞，心好累…… 本文章共耗时4小时，责任小编：HTML5学堂-利利。
1.6K30发布于 2018-03-12 - 来自专栏grain先森
移动端真机调试
第二种：weinre调试方式，安装和适用不复杂，适用于全平台的调试，即任何手机的任何浏览器皆可以调试，不过需要手机和电脑在同一个网段下。 weinre安装 全局安装： npm install –g weinre 局部安装： npm install weinre 启动： weinre --httpPort 8090 --boundHost Spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。 spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。 特性： 页面调试＋抓包 操作简单 支持HTTPS。 weinre安装简单，使用过程中需要增加和删除script，如果调试页面很多的情况下，不适用。 spy-debugger安装略复杂，但是使用过程非常愉快。
2.2K30发布于 2019-03-28 - 来自专栏前端技术江湖
前端开发必须知道的抓包神器！
Weinre控制台 集成weinre的功能，用户只需通过简单配置(pattern weinre://id)即可使用，具体参见weinre，更多移动端调试方法可以参考：利用whistle调试移动端页面。 但是当你使用了whistle你会发现只需要配置一行规则，就可以轻松的调出控制台调试真机的h5页面，这就是Weinre控制台。 {监听的网址} weinre://{实例名称} 这个实例名称是工具栏中Weinre下拉框中的名字可以任意起 https://juejin.cn/ weinre://juejin 点击工具栏中Weinre 下面的juejin即可跳转到Weinre控制台页面，再刷新下监听网址的页面即可审查元素。 借助Weinre控制台，我们可以更加容易的解决真机兼容性问题。
1.5K10编辑于 2024-03-19 - 来自专栏前端Q
移动端真机调试方法总结
缺点：亲测，mac中调试界面与小米6手机的界面经常不同步，操作非常不方便，还好控制台还是能正常看东西 weinre 步骤： 可以直接npm install weinre，然后启动，打开管理界面即可 直接安装 whistle，自带了weinre。 还可以代理不同环境，具体教程见：https://avwo.github.io/whistle/rules/weinre.html ?
2K10发布于 2019-12-20 - 来自专栏HTML5学堂
2016，NodeJS干货来袭
什么是weinre 什么是weinre呢？Weinre的本意是Web Inspector Remote，它是一种远程调试工具。可以帮助我们即时更改页面元素、样式，调试JS等。 考虑到篇幅的问题，把文章拆分为了两个部分，这篇文章我们主要借助weinre，讲解Node.js的安装方法，并且顺带介绍调试工具weinre，后面的第二篇文章当中我们再讲解weinre的使用。 当前的windows版的weinre是基于NodeJS的，因此如果想使用weinre就需要先搭建NodeJS的环境。 HTML5学堂：我们可以这样来理解，如果说我们当前开发程序当中，只存在一个weinre的项目，那么为这个“weinre项目”安装一个“weinre工具”无论是安装在全局，还是安装在本地，其实是没有任何区别的 weinre是本地安装，就需要在新项目当中引入这个本地安装的weinre工具。
1.9K70发布于 2018-03-12 - 来自专栏IMWeb前端团队
利用whistle调试移动端页面
利用whistle查看、修改页面的DOM结构及其样式 whistle集成了weinre的功能，同样只需配置一条规则即可通过在pc上通过weinre修改网页的DOM结构及其样式： m.baidu.com weinre://test 其中，weinre://test 中的test` 只是作为weinre的分类，防止一个weinre调试页面出现太多的连接，效果如下图： ? 注意： vConsole和weinre不能同时使用 whistle还有很多应用场景，后续再逐步输出给大家，了解更多内容请访问whistle的Github：https://github.com/avwo/
3.6K90发布于 2017-12-29 - 来自专栏IMWeb前端团队
利用whistle调试移动端页面
利用whistle查看、修改页面的DOM结构及其样式 whistle集成了weinre的功能，同样只需配置一条规则即可通过在pc上通过weinre修改网页的DOM结构及其样式： m.baidu.com weinre://test 其中，weinre://test 中的test` 只是作为weinre的分类，防止一个weinre调试页面出现太多的连接，效果如下图： ? 注意： vConsole和weinre不能同时使用 whistle还有很多应用场景，后续再逐步输出给大家，了解更多内容请访问whistle的Github：https://github.com/avwo/
1.8K20发布于 2019-12-03 - 来自专栏家劲
移动端网页调试方案
移动端调试方案 移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试工具weinre 调试工具weinre 由于某些app并没有打开remote debug，而我们又要内嵌自己的页面进行调试，抓包只能检测网络请求。所以这个工具就有了使用场景。 使用方法： 通过npm安装weinre npm -g install weinre weinre --boundHost 192.168.1.194 --httpPort 9090 在你要调试的页面中插入
2.2K20发布于 2019-09-18 - 来自专栏Web 技术
【工具】移动端web调式工具分享
远程调试工具weinre使用教程 一：关于weinre weinre就是一款依赖于nodejs的远程调试工具 二：weinre的安装 步骤一：安装nodejs以及npm（因为weinre是运行在nodejs 上的，这一步就不展开了，安装nodejs也是很容易的） 步骤二：npm -g install weinre安装weinre 三：weinre的使用例子 步骤一：打开命令行，输入：weinre --boundHost [port] (IP_address 是pc的ip地址, 不能是127.0.0.1，port可以输入一个随便的端口) 假设我的pc的ip地址为192.168.1.131，然后我就可以输入这样的命令：weinre 在浏览器上打开网址192.168.1.131:1234 https://www.cnblogs.com/oadaM92/p/4377364.html 手册 https://github.com/nupthale/weinre
64140编辑于 2023-10-07 - 来自专栏IMWeb前端团队
移动端网页调试方案
IMWeb社区 未经同意，禁止转载 移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试工具weinre 调试工具weinre 由于某些app并没有打开remote debug，而我们又要内嵌自己的页面进行调试，抓包只能检测网络请求。所以这个工具就有了使用场景。 使用方法： 通过npm安装weinre pw1 npm -g install weinre weinre --boundHost 192.168.1.194 --httpPort 9090 在你要调试的页面中插入 js脚本,anonymous是appid，你可以自定义 html [removed][removed] 在chrome浏览器中打开地址，选择elements和console监测页面 weinre结果 其他方案
1.7K30发布于 2019-12-04 - 来自专栏一个会写诗的程序员的博客
H5 App调试方法参考H5调试常见方法chrome developer tools模拟器GapDebugweinrespy-debugger代理总结
主要分为以下几点: chrome developer tools android+chrome inspect iOS+safari GapDebug weinre weinre相关套件 weinre 特点 适用范围广，在调试页面中加载weinre提供的一个js脚本，即可在weinre inspect面板中进行调试。 安装步骤如下（npm安装方式）： 安装 npm install -g weinre 启动 weinre --boundHost -all- ，默认端口是8080，可添加配置--httpPort 相关套件 MIHTool MIHTool是weinre的app集成版本，仅有iOS版本可供安装，例举几个特点： 自动注入weinre所需脚本 支持webview js bridge api的模拟 spy-debugger spy-debugger是weinre的扩展版，执行 npm install spy-debugger -g 即可完成安装，启动后配置设备代理即可进行调试。
3.7K20发布于 2018-08-20 - 来自专栏前端Q
前端开发的利器，使用Whistle提升开发幸福感
Weinre控制台 集成weinre[3]的功能，用户只需通过简单配置(pattern weinre://id)即可使用，具体参见weinre[4]，更多移动端调试方法可以参考：利用whistle调试移动端页面 但是当你使用了whistle你会发现只需要配置一行规则，就可以轻松的调出控制台调试真机的h5页面，这就是Weinre控制台。 {监听的网址} weinre://{实例名称} 这个实例名称是工具栏中Weinre下拉框中的名字可以任意起 https://juejin.cn/ weinre://juejin 点击工具栏中Weinre 下面的juejin即可跳转到Weinre控制台页面，再刷新下监听网址的页面即可审查元素。 借助Weinre控制台，我们可以更加容易的解决真机兼容性问题。
96210编辑于 2024-04-15 - 来自专栏前端小叙
whistle手机调试工具使用简单教程
数据文件路径 eg: net.abc.com/getlist E:\project\mock-data\ios.json 如果想要注释掉此行，前面加 “ # ” 如果想要调试某个页面，在页面后面加 weinre :// 任意名称 如果要查看某个页面的log，在页面后面加 log:// 这些都可以同时写在一起如下： 192.168.5.252:3001/aaa.html log:// weinre://aaa 79044560 页面调试 至此，手机点击请求的页面，whistle调试界面已经可以看到请求了，右侧点击tools-log，可以查看页面console.log打印，如果想要调试html，点击调试界面上面的weinre ，找到刚刚rules配置的时候weinre后面名字点击即可看到 ?
2.5K20发布于 2019-08-21 - 来自专栏call_me_R
移动端网页调试
优点：简单、跨平台 缺点：只支持Android 4+ 使用Weinre远程调试 Weinre的github仓库地址是github.com/nupthale/we…，在其README.md里面有详细的介绍 Weinre来源于Web Inspector Remote，是一个远程页面调试工具，功能和Firebug、WebKit Inspector类似，可以帮助我们在PC端远程调试运行在移动设备浏览器内的Web Weinre为了能够同步桌面的调试客户端和移动设备上的调试目的，需要你搭建一个调试服务器(Debug Server)，通过这台调试服务器，可以在调试目标(Debug Target)和桌面调试客户端(Debug 详细的搭建见Weinre仓库的README.md介绍。囧，步骤有点多，不想码字了? 优点：同时支持iOS设备和Android设备，并且能直接对手机上的页面进行调试，无须安装客户端。
1.8K30发布于 2019-07-31
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号