为了让需要调试的页面被weinre检测到，需要添加Debug Target，有两种方法： (1)、Target Script 该方法需要在调试的页面中增加一个js：... <script src="http://192.168.0.20:8081/target/target-script-min.<em>js</em>#anonymous" type="text/javascript...保存到移动设备的书签中，可以在 http://192.168.0.20:8081/ 找到这段<em>js</em>： 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 我们可以在命令行中 使用 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文件到需要调试的目标文件的头部： <script src="http://192.168.1.101:8081/target/target-script-min.<em>js</em>
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或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安装 全局安装： npm install –g weinre 局部安装： npm install weinre 启动： weinre --httpPort 8090 --boundHost... 记住将localhost换成你的IP...除了这种方法之后，还介绍了在手机端保存一段Js代码，在需要调试某个页面时，点击执行JS,但是现在浏览器为了安全起见，已经不再支持此方法。默认的方法是搜索，而非执行，所以不可取。...Spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。...spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。 特性： 页面调试＋抓包 操作简单 支持HTTPS。
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控制台 集成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的最顶部。
缺点：亲测，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 出来的东西，如图： ?
Debug目标页面（target）：被调试的页面，页面已嵌入weinre的远程js。...TargetScript 将上图中Target Script部分的js地址加入到你要调试的目标页面内。...例如： 然后在移动设备打开添加过这个脚本的网页...代码段： 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 然后保存为设备书签中。
Weinre 就是这样一款工具，可以帮助我们调试移动网站及 PhoneGap 应用。 Weinre 简介 在使用 Weinre 之前，我们先了解一下 Weinre 的基本概念。...Weinre 的调试目标和客户端都运行在浏览器中，而调试服务器则以 HTTP 服务器方式作为二者的中介运行。在 Patrick Mueller 关于 Weinre 的手册中，解释了这种关系。...更详细的解释可见： Weinre 的安装和运行 Weinre 的调试服务器是基于 Node.js 实现的，因此在安装 Weinre 之前先要安装 Node 运行环境。...包管理工具安装： npm -g install weinre 安装好以后就可以启动 Weinre 了，Weinre 提供了6个可选的启动参数，其中下面两个参数一般会修改，其它的用默认值就可以了。...Weinre 的使用 成功启动 Weinre 后就可以使用绑定的 IP 或者域名加上端口访问 Weinre 服务器了（我们这里以 http://localhost:8081 为例）。
HTML5学堂：在前一篇文章当中，我们借着weinre讲解了NodeJS中的一些简单命令，也讲解了weinre的安装方法，今天我们把weinre的使用“完结”掉。...关于target/target-script.js,是不需要进行任何修改的，因为，在weinre文件夹当中，本身自带了这个文件夹和相关文件。...这个文件的主要作用在于获得从Debug服务端传来的信息，更改当前页面的样式；也可以运行传来的js，并返回结果。...5 具体调试范例 调试分为HTML与CSS、JS的基本调试 —— 各位攻城狮们肯定都知道啦。weinre贴合浏览器的设计方法也让我们能够很直观的看到调试功能分类（和谷歌控制台基本一致）。...JS的基本调试 ? ? PS：变化是同步的哦，无需刷新手机页面~~~ 好啦，接下来，你就可以尽情“调试”啦~~！！！
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的最顶部。
移动端调试方案 移动端调试方案 页面容器 移动设备上的各种浏览器 各类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，你可以自定义 <script src="http://m.kuaijiajin.club:9090/target/target-script-min.<em>js</em>#anonymous
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结果 其他方案
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 即可完成安装，启动后配置设备代理即可进行调试。
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。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
