在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服务器的地址合并为同一个，这样就不用经常拷贝新版本
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 打开。
Weinre（Web Inspector Remote），是一种远程调试工具。功能与Firebug及chrome调试器类似，可以帮助我们即时更改页面元素、样式，调试JS等。 工作原理 ?...weinre由三部分组成 1. debug server 核心组件，运行在服务端，负责与另外两部分通信。...以linux机器为例，首先你需要有node.js。之后运行 npm g-g intall weinre 即可。 运行 1....列出了weinre的文档及用于调试的url。 点击 http://10.136.30.144:8081/client/#anonymous， 看到如下调试界面。 ?...特别是当你要调试iphone页面，手上又无mac book时，试试weinre吧。 啥？你连iphone都没有！？god bless you~
官网地址： 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 ?
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。
https请求进行抓包及修改，手机需要配置下whistle代理，一切准备就绪后，可以配置如下规则： m.baidu.com log:// # 如果你想同时注入js脚本，可以用下面一种方式 # 在mac或linux...利用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/
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服务。
下面提供一些常用的user-agent： QQ Android： Mozilla/5.0 (Linux; Android 5.1; OPPO R9tm Build/LMY47I; wv) AppleWebKit...IPH_SQ_6.7.1_1_APP_A Pixel/750 Core/UIWebView NetType/4G QBWebViewType/1 微信 Android： Mozilla/5.0 (Linux...KHTML, like Gecko) Mobile/14D27 MicroMessenger/6.5.6 NetType/4G Language/zh_CN 支付宝： Mozilla/5.0 (Linux...spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码，简化了weinre需要给每个调试的页面添加js代码。...spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码，让页面调试更加方便，且支持HTTPS。
HTML5学堂：在前一篇文章当中，我们借着weinre讲解了NodeJS中的一些简单命令，也讲解了weinre的安装方法，今天我们把weinre的使用“完结”掉。...移动端页面的开发过程中，weinre“即时”的调试方式，能够让我们更好更快的解决调试问题，使调试工作变得更加方便。...关于target/target-script.js,是不需要进行任何修改的，因为，在weinre文件夹当中，本身自带了这个文件夹和相关文件。...weinre贴合浏览器的设计方法也让我们能够很直观的看到调试功能分类（和谷歌控制台基本一致）。...最后，自己给链接地址强制加上了时间戳……之后，weinre终于乖了~~~表示好心塞，心好累…… 本文章共耗时4小时，责任小编：HTML5学堂-利利。
安装 Node.jsBrowserSync是基于Node.js的, 是一个Node模块， 如果您想要快速使用它，也许您需要先安装一下Node.js安装适用于Mac OS，Windows和Linux。...Image.png 7.以上若是原生调试不了： 换一种： npm -g install weinre ?...Image.png 官网： http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html 1，端口 ：2，调试域名：...3，开始 调试： weinre --httpPort 9000 --boundHost -all- --debug true ?
第二种：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安装略复杂，但是使用过程非常愉快。
什么是weinre 什么是weinre呢？Weinre的本意是Web Inspector Remote，它是一种远程调试工具。可以帮助我们即时更改页面元素、样式，调试JS等。...考虑到篇幅的问题，把文章拆分为了两个部分，这篇文章我们主要借助weinre，讲解Node.js的安装方法，并且顺带介绍调试工具weinre，后面的第二篇文章当中我们再讲解weinre的使用。...当前的windows版的weinre是基于NodeJS的，因此如果想使用weinre就需要先搭建NodeJS的环境。...HTML5学堂：我们可以这样来理解，如果说我们当前开发程序当中，只存在一个weinre的项目，那么为这个“weinre项目”安装一个“weinre工具”无论是安装在全局，还是安装在本地，其实是没有任何区别的...weinre是本地安装，就需要在新项目当中引入这个本地安装的weinre工具。
Weinre控制台 集成weinre的功能，用户只需通过简单配置(pattern weinre://id)即可使用，具体参见weinre，更多移动端调试方法可以参考：利用whistle调试移动端页面。...但是当你使用了whistle你会发现只需要配置一行规则，就可以轻松的调出控制台调试真机的h5页面，这就是Weinre控制台。...{监听的网址} weinre://{实例名称} 这个实例名称是工具栏中Weinre下拉框中的名字可以任意起 https://juejin.cn/ weinre://juejin 点击工具栏中Weinre...下面的juejin即可跳转到Weinre控制台页面，再刷新下监听网址的页面即可审查元素。...借助Weinre控制台，我们可以更加容易的解决真机兼容性问题。
缺点：亲测，mac中调试界面与小米6手机的界面经常不同步，操作非常不方便，还好控制台还是能正常看东西 weinre 步骤： 可以直接npm install weinre，然后启动，打开管理界面即可 直接安装...whistle，自带了weinre。...还可以代理不同环境，具体教程见：https://avwo.github.io/whistle/rules/weinre.html ?
这里介绍另外一种配合 Weinre 的调试用法。 Weinre 基本用法 Weinre 属于知名 Hybrid 框架 Cordova 中的一款 Web App 远程调试工具。...以下介绍 Weinre 的基本用法： 通过 npm 全局安装 weinre： npm install -g weinre 在本地 8081 端口上启动 weinre 服务：weinre --boundHost...Script」，将 127.0.0.1:8080 替换成自己本机的局域网 IP 与 weinre 服务端口号，同时开启菜单「Rules -> Enable Weinre Script」。...至此，所有 HTML 页面将会被自动注入 Weinre Script，之后我们就可以在 weinre 后台中开始调试相关页面。以下是参考截图： ?...屏蔽掉 Linux/Windows 操作系统对文件名大小写敏感度不一致的问题； URI 命名上应该使用连字符「-」来间隔，而不是使用下划线「_」或驼峰式。
远程调试工具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
移动端调试方案 移动端调试方案 页面容器 移动设备上的各种浏览器 各类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 在你要调试的页面中插入
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结果 其他方案
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
云直播
对象存储
