为了让需要调试的页面被weinre检测到,需要添加Debug Target,有两种方法: (1)、Target Script 该方法需要在调试的页面中增加一个js:... js#anonymous" type="text/javascript...保存到移动设备的书签中,可以在 http://192.168.0.20:8081/ 找到这段js: javascript:(function(e){e.setAttribute("src","http:...(e);})(document.createElement("script"));void(0); 将这段js保存到名为Debug书签中,然后使用移动设备访问我想要调试的页面,比如说 http...---- 总结: 此种方法虽然可以在手机上实时看到调试的效果,但每次都需要把本地的静态文件移到weinre服务器下,然后对目标页面加上js头部,遇到只有jsp没有本地静态html的页面,要么把jsp
Weinre(Web Inspector Remote),是一种远程调试工具。功能与Firebug及chrome调试器类似,可以帮助我们即时更改页面元素、样式,调试JS等。 工作原理 ?...weinre由三部分组成 1. debug server 核心组件,运行在服务端,负责与另外两部分通信。...你需要在页面中嵌入一小段js。它将通过XHR方式与debug server通信,进行调试信息的收发。 安装 安装十分方便。以linux机器为例,首先你需要有node.js。...之后运行 npm g-g intall weinre 即可。 运行 1....4. cosole部分,可以看console log, 运行js。但无法像firebug那样报出js的错误,更不能加断点调试。
content {:toc} 什么是 weinre? weinre官网 上有两句有意思的介绍: weinre is WEb INspector REmote....weinre 作为一种远程调试工具,在结构上分为三层: 目标页面(target):被调试的页面,页面已嵌入 weinre 的远程 js,下文会介绍; Debug客户端(client):本地的 Web Inspector...官网上也有相应的平台支持说明: Platforms supported - debug server 服务端 任何支持 node.js 的平台。...启动成功后看到如下界面: 给目标页面添加一行脚本 Target Script http://localhost:8081/target/target-script-min.js#anonymous js#anonymous"> 我们可以在命令行中 使用 ipconfig
官网地址: 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 ?...获取本机的IP地址,例如:192.168.1.101,添加如下js文件到需要调试的目标文件的头部: js
脚本,可以用下面一种方式 # 在mac或linux加载本地js文件/User/xxx/test.js # m.baidu.com log:///User/xxx/test.js # 在windows上加载本地...利用whistle查看、修改页面的DOM结构及其样式 whistle集成了weinre的功能,同样只需配置一条规则即可通过在pc上通过weinre修改网页的DOM结构及其样式: m.baidu.com...weinre://test 其中,weinre://test 中的test` 只是作为weinre的分类,防止一个weinre调试页面出现太多的连接,效果如下图: ?...的js协议往指定网页(https://m.baidu.com/)注入vConsole.js,配置whistle规则: m.baidu.com js://{vConsole.js} 效果如下图: ?...注意: vConsole和weinre不能同时使用 whistle还有很多应用场景,后续再逐步输出给大家,了解更多内容请访问whistle的Github:https://github.com/avwo/
Weinre(全称Web Inspector Remote)是一款的可以在电脑上远程调试手机页面的工具。...除了审查元素的功能之外,如果在电脑上管理页面的Console选项卡执行JS代码,该JS代码会立即在手机上执行。 Weinre目前应该不支持在JS中打断点调试的功能。...如何安装和使用,可以见Weinre入门手册。 需要注意的是 在Windows上安装Weinre时,cmd窗口需要用管理员身份打开。如果用npm安装Weinre失败,可以用cnpm来安装。...用weinre启动Weinre Server时,只有本机才能连接Weinre Server。...如果需要手机可以连接Weinre Server,需要用 weinre --boundHost -all-或用weinre --boundHost 手机IP来启动Weinre Server。
weinre安装 全局安装: npm install –g weinre 局部安装: npm install weinre 启动: weinre --httpPort 8090 --boundHost...js#anonymous"> 记住将localhost换成你的IP...除了这种方法之后,还介绍了在手机端保存一段Js代码,在需要调试某个页面时,点击执行JS,但是现在浏览器为了安全起见,已经不再支持此方法。默认的方法是搜索,而非执行,所以不可取。...Spy-debugger内部集成了weinre,通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。...spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。 特性: 页面调试+抓包 操作简单 支持HTTPS。
HTML5学堂:随着时代的发展,JS的地位已经越来越高,NodeJS也是从萌芽开始,茁壮成长~这篇文章我们主要借助weinre这个NodeJS工具,讲解NodeJS工具的安装方法,并且顺带介绍调试工具weinre...什么是weinre 什么是weinre呢?Weinre的本意是Web Inspector Remote,它是一种远程调试工具。可以帮助我们即时更改页面元素、样式,调试JS等。...考虑到篇幅的问题,把文章拆分为了两个部分,这篇文章我们主要借助weinre,讲解Node.js的安装方法,并且顺带介绍调试工具weinre,后面的第二篇文章当中我们再讲解weinre的使用。...2.1 打开Node.js的这个程序:Node.js command prompt 2.2 在打开的黑色窗口当中输入:npm install weinre -g 2.3 当看到光标开始旋转时,说明正在安装当中...细节讲解 - 关于安装weinre 为何要用Node.js command prompt?Node.js是干什么的呢?
缺点:亲测,mac中调试界面与小米6手机的界面经常不同步,操作非常不方便,还好控制台还是能正常看东西 weinre 步骤: 可以直接npm install weinre,然后启动,打开管理界面即可 直接安装...whistle,自带了weinre。...还可以代理不同环境,具体教程见:https://avwo.github.io/whistle/rules/weinre.html ?...,然后到 https://github.com/Tencent/vConsole/blob/dev/dist/vconsole.min.js 拷贝代码到 vConsole.js 中 写代理规则,如 https...://baidu.com/ js://{vConsole.js} 这样在手机看,就会有个控制台出现,能看到 console.log 出来的东西,如图: ?
Weinre控制台 集成weinre的功能,用户只需通过简单配置(pattern weinre://id)即可使用,具体参见weinre,更多移动端调试方法可以参考:利用whistle调试移动端页面。...{监听的网址} weinre://{实例名称} 这个实例名称是工具栏中Weinre下拉框中的名字可以任意起 https://juejin.cn/ weinre://juejin 点击工具栏中Weinre...srcipt中添加任意的js代码。.../eruda.min.js https://juejin.cn/ jsPrepend://{test.js} test.js var vConsole = new window.VConsole();...打开控制台可以发现,我们注入的js被添加到了head的最顶部。
Debug目标页面(target):被调试的页面,页面已嵌入weinre的远程js。...TargetScript 将上图中Target Script部分的js地址加入到你要调试的目标页面内。...例如: js#anonymous"> 然后在移动设备打开添加过这个脚本的网页...代码段: javascript:(function(e){e.setAttribute("src","http://192.8.104.20::8910/target/target-script-min.js...例如这里是: http://192.8.104.20:8910/target/target-script-min.js 然后保存为设备书签中。
HTML5学堂:在前一篇文章当中,我们借着weinre讲解了NodeJS中的一些简单命令,也讲解了weinre的安装方法,今天我们把weinre的使用“完结”掉。...关于target/target-script.js,是不需要进行任何修改的,因为,在weinre文件夹当中,本身自带了这个文件夹和相关文件。...这个文件的主要作用在于获得从Debug服务端传来的信息,更改当前页面的样式;也可以运行传来的js,并返回结果。...5 具体调试范例 调试分为HTML与CSS、JS的基本调试 —— 各位攻城狮们肯定都知道啦。weinre贴合浏览器的设计方法也让我们能够很直观的看到调试功能分类(和谷歌控制台基本一致)。...JS的基本调试 ? ? PS:变化是同步的哦,无需刷新手机页面~~~ 好啦,接下来,你就可以尽情“调试”啦~~!!!
移动端调试方案 移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试工具weinre...调试工具weinre 由于某些app并没有打开remote debug,而我们又要内嵌自己的页面进行调试,抓包只能检测网络请求。所以这个工具就有了使用场景。...它能够检测elements并查看js输出信息。...使用方法: 通过npm安装weinre npm -g install weinre weinre --boundHost 192.168.1.194 --httpPort 9090 在你要调试的页面中插入...js脚本,anonymous是appid,你可以自定义 js#anonymous
Weinre控制台 集成weinre[3]的功能,用户只需通过简单配置(pattern weinre://id)即可使用,具体参见weinre[4],更多移动端调试方法可以参考:利用whistle调试移动端页面...{监听的网址} weinre://{实例名称} 这个实例名称是工具栏中Weinre下拉框中的名字可以任意起 https://juejin.cn/ weinre://juejin 点击工具栏中Weinre...srcipt中添加任意的js代码。.../eruda.min.js https://juejin.cn/ jsPrepend://{test.js} test.js var vConsole = new window.VConsole();...打开控制台可以发现,我们注入的js被添加到了head的最顶部。
IMWeb社区 未经同意,禁止转载 移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试工具weinre...调试工具weinre 由于某些app并没有打开remote debug,而我们又要内嵌自己的页面进行调试,抓包只能检测网络请求。所以这个工具就有了使用场景。...它能够检测elements并查看js输出信息。...使用方法: 通过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结果 其他方案
Chrome/Safari真机调试 移动端开发,当然是优先真机调试,真机调试更加顺畅,支持js断点调试以及绝大多数Chrome DevTools一样的调试功能(不支持Chrome扩展)。...高级 -> 打开 Web 检查器 通过手机的 Safari 来打开 H5 页面,然后将Mac上的Safari浏览器打开,选择开发 -> iPhone,就出现调试界面了,在iPhone上也能断点调试js...市面上的工具有不少,weinre、vConsole等等,实际使用下来还是更推荐spy-debugger,spy-debugger是一站式页面调试、抓包工具,可以远程调试任何手机浏览器页面,任何手机移动端...spy-debugger内部集成了weinre,通过代理的方式拦截所有html自动注入weinre所需的js代码,简化了weinre需要给每个调试的页面添加js代码。...spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码,让页面调试更加方便,且支持HTTPS。
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。...安装 Node.jsBrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js安装适用于Mac OS,Windows和Linux。...安装 BrowserSync您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。...Image.png 7.以上若是原生调试不了: 换一种: npm -g install weinre ?...3,开始 调试: weinre --httpPort 9000 --boundHost -all- --debug true ?
主要分为以下几点: 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 即可完成安装,启动后配置设备代理即可进行调试。
前端远程调试方案 Chii 的使用经验分享 Chii 是与 weinre 一样的远程调试工具 ,主要是将 web inspector 替换为最新的 chrome devtools frontend...本文主要介绍其使用,在电脑运行,通过注入 js 的方式将将远端的日志,请求等同步推送在电脑端查看显示,及命令的执行 项目地址:https://github.com/liriliri/chii 运行监控一览...转发开始调试 注入 js 参考 //注意替换其中的域名 function injectTarget() { var e = document.createElement("script");.../test.html 运行后如图所示 weinre 的安装使用 项目地址:weinre 一款基于 Web 开发的远程调试工具。是 Apache Cordova 项目的一部分。...经常有断线情况,不再维护,不再推荐 安装 npm -g install weinre 启动 weinre --httpPort 9090 --boundHost -all- 注入 js <script
领取专属 10元无门槛券
手把手带您无忧上云