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。
使用Fiddler调试本地js 在我们前端开发的日常工作中，发现服务器上某个css/javascript文件有问题，需要修改，那真是家常便饭。...假设我们发现这个页面有问题，需要修改所引用的js文件（）。 第一步：用Fiddler查看页面的数据流列表，找到这个js文件的session ? ...在这个js session上右键点击，选择“Save – Response –Response Body…”，将js文件的内容保存到本地。记住存的位置，下面我们会用到这个保存下来的文件。...通过以上几个步骤，我们演示了怎样将HTTP请求重定向到本地的文件，进行web调试。...这种调试方式不需要发布到线上再验证，避免了修改不成功、对用户造成影响的风险，而且不需要搭建复杂的开发服务器等开发环境，非常适合快速web调试。
这时候就想着有一个可以在手机上调试的工具，可以随时更改参数随时看到手机上的效果，免去发布再测试、模糊估计参数不精准的麻烦，weinre就是一个这样的工具。 ...weinre可以在PC上远程调试手机上的页面，和pc浏览器的调试工具类似，在pc上选择代码中的某个标签，对应在手机网页上的部分就会被高亮选中，在pc上更改属性参数，可以立即在手机上看到效果，如下图：...在cmd中运行weinre --httpPort 8081 -boundHost -all- ，启动weinre：在调试过程中保持cmd窗口不关闭 ?...为了让需要调试的页面被weinre检测到，需要添加Debug Target，有两种方法： (1)、Target Script 该方法需要在调试的页面中增加一个js：...---- 总结： 此种方法虽然可以在手机上实时看到调试的效果，但每次都需要把本地的静态文件移到weinre服务器下，然后对目标页面加上js头部，遇到只有jsp没有本地静态html的页面，要么把jsp
上面说 weinre 是一个远程 web 调试器。说到了它的发音，还挺幽默，哈哈。 远程 web 调试器。先说调试器，就像火狐中的 FireBug，Chrome 中的调试器一样。...但是在手机上，你没办法按 F12，而这个 weinre 就是在手机上的 F12，与传统的不同的是，它是在手机上浏览你的 web 页面，在 PC 上查看调试工具，非常方便，这就是所谓的远程。...为什么用 weinre？ 现代浏览器中调试工具都非常强大了，可以直接模拟手机设备，为什么还要用 weinre 这么麻烦的东西呢？...weinre 作为一种远程调试工具，在结构上分为三层： 目标页面（target）：被调试的页面，页面已嵌入 weinre 的远程 js，下文会介绍； Debug客户端（client）：本地的 Web Inspector...官网上也有相应的平台支持说明： Platforms supported - debug server 服务端 任何支持 node.js 的平台。
Weinre（Web Inspector Remote），是一种远程调试工具。功能与Firebug及chrome调试器类似，可以帮助我们即时更改页面元素、样式，调试JS等。 工作原理 ?...展现调试界面，允许你修改dom，查看网络信息等。 3. debug target. 待调试的页面。你需要在页面中嵌入一小段js。...列出了weinre的文档及用于调试的url。 点击 http://10.136.30.144:8081/client/#anonymous， 看到如下调试界面。 ?...4. cosole部分，可以看console log， 运行js。但无法像firebug那样报出js的错误，更不能加断点调试。...anyway， 即使是这样，也为我们的调试提供了一定程度的便利。总比闭起眼乱碰好的多。 特别是当你要调试iphone页面，手上又无mac book时，试试weinre吧。 啥？
官网地址： http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html 1.简介 weinre是一款非常好用的远程调试工具。...功能与网页浏览器的开发者工具基本类似，但这个工具更适合用于移动端web的调试。...2.安装 weinre基于nodejs，因此首先要安装nodejs，然后使用npm进行安装： npm -g install weinre 3.运行 weinre --httpPort 8081 --boundHost...-all- 主要参数解析： httpPort 调试服务器运行的端口，默认8080 boundHost 调试服务器绑定的IP地址或域名，默认localhost 4.修改目标文件 使用webkit的浏览器...获取本机的IP地址，例如：192.168.1.101，添加如下js文件到需要调试的目标文件的头部： <script src="http://192.168.1.101:8081/target/target-script-min.<em>js</em>
Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具，借助于网络，可以在PC上直接调试运行在移动设备上的远程页面，中文意思是远程Web...Debug目标页面（target）：被调试的页面，页面已嵌入weinre的远程js。...TargetScript 将上图中Target Script部分的js地址加入到你要调试的目标页面内。...目前国外的有PhoneGap提供的weinre远程服务，用户可以访问下述网址参看用户远程调试接口 http://debug.build.phonegap.com/ ?...其他调试工具 除了介绍过的Chrome 远程调试工具DevTools、weinre远程调试，目前的还有Adobe公司推出的跨平台调试工具Adobe Edge Inspect CC，以及国内网易前端工程师
Weinre 的全称是 Web Inspector Remote（远程 Web 调试工具），功能和 Firebug、Webkit Inspector 类似，可以帮助我们在 PC 端远程调试运行在移动设备浏览器内的...因此，在使用 Weinre 进行远程设备调试时，包含了上面的三种元素： 调试服务器：调试服务器起到代理的作用，用来同步调试目标和调试客户端之间的命令； 调试客户端：这是 Web Inspector 界面...更详细的解释可见： Weinre 的安装和运行 Weinre 的调试服务器是基于 Node.js 实现的，因此在安装 Weinre 之前先要安装 Node 运行环境。...在 Webkit 核心的浏览器（例如 Chrome、Safari 等）中打开 Weinre 服务器主页： 在服务器主页有两项内容很重要： A 链接到调试客户端页面，打开后默认到远程面板，如下图所示。...B 目标代码，这段代码要加入到需要调试的页面中，也可以用书签的方式动态加入。 远程面板总共有四部分： A 面板切换，用过 Chrome 或者 Safari 开发者工具的对这个界面肯定很熟悉。
第二种：weinre调试方式，安装和适用不复杂，适用于全平台的调试，即任何手机的任何浏览器皆可以调试，不过需要手机和电脑在同一个网段下。...chrome真机调试 2. wenire真机调试 Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具，借助于网络，可以在PC上直接调试运行在移动设备上的远程页面...最后，在调试结束之后，别忘记删除嵌入的script。 除了这种方法之后，还介绍了在手机端保存一段Js代码，在需要调试某个页面时，点击执行JS,但是现在浏览器为了安全起见，已经不再支持此方法。...Spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。...spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。 特性： 页面调试＋抓包 操作简单 支持HTTPS。
移动端调试遇到的问题 相较于PC侧，在移动端调试网页，主要会遇到以下三个问题： 没有Console，无法查看页面的js错误及通过 console.xxx 输出的调试日志 无法查看、修改页面的DOM结构及样式...，只有在真机上运行才能看到真实效果，这个时候可以利用whistle，通过简单配置即可解决上述的前两个问题(目前无法通过页面js获取页面的调试信息，暂不支持debug功能，可以通过 console.log...来代替)： 利用whistle查看页面的js错误及通过 console.xxx 输出的调试日志 whistle内部实现了类似浏览器的Console的远程Log平台，只需配置简单的whistle规则即可自动捕获页面的错误及...利用whistle查看、修改页面的DOM结构及其样式 whistle集成了weinre的功能，同样只需配置一条规则即可通过在pc上通过weinre修改网页的DOM结构及其样式： m.baidu.com...weinre://test 其中，weinre://test 中的test` 只是作为weinre的分类，防止一个weinre调试页面出现太多的连接，效果如下图： ?
远程调试-附加 vs2019，msvsmon.exe启动对应程序的版本，x86对应x86 ?...vs中选择附加调试，vs低版本的远程调试需要本机和远端的用户名和密码完全相同，vs2019试了下，没有这个问题了 ?...远程调试-启动 远端配置共享目录，然后选择程序路径 \remote-pc\share-directory\dest.exe ? 运行即可远程启动调试
前端远程调试方案 Chii 的使用经验分享 Chii 是与 weinre 一样的远程调试工具 ，主要是将 web inspector 替换为最新的 chrome devtools frontend...chii 注入 js 转发开始调试 注入 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 当访问调试页面时打开 http://localhost
HTML5学堂：随着时代的发展，JS的地位已经越来越高，NodeJS也是从萌芽开始，茁壮成长~这篇文章我们主要借助weinre这个NodeJS工具，讲解NodeJS工具的安装方法，并且顺带介绍调试工具weinre...，weinre主要用于辅助我们进行移动平台的页面的“即时”调试。...什么是weinre 什么是weinre呢？Weinre的本意是Web Inspector Remote，它是一种远程调试工具。可以帮助我们即时更改页面元素、样式，调试JS等。...（重要的事儿说三遍） 最早接触weinre其实是在2012年，那时候是自己最早开始尝试WEB APP，使用PhoneGap进行开发，为了方便调试，所以使用了MAC版的weinre。...考虑到篇幅的问题，把文章拆分为了两个部分，这篇文章我们主要借助weinre，讲解Node.js的安装方法，并且顺带介绍调试工具weinre，后面的第二篇文章当中我们再讲解weinre的使用。
实现一套pc调试面板 采用这种实现方式有weinre，weinre很早前就比较流行了，使用也比较广泛，运行后会在PC上生成一个像chrome开发工具一样的调试器。...通过使用postMessage实现本地与远程调试器的通信。调试的时候可以在远程页面上打印console输出。...直接将调试信息输出在手机屏幕上 这种实现方式的也比较多，如js-mobile-console，还有微信的vConsole。 安装各种虚拟机sdk, 在电脑上进行手机调试。...weinre安装和开启会比较繁琐，PC和手机同时调试的时候需要关注两个调试面板，效率不是很高。...一般开发中手机的远程调试不是强需求，除非遇到一些手机上的奇葩bug, 比如浏览器引擎对js的实现方式差异，需要打印真实数据，chrome模拟器都可以解决90%的问题。
移动端页面的开发过程中，weinre“即时”的调试方式，能够让我们更好更快的解决调试问题，使调试工作变得更加方便。...关于target/target-script.js,是不需要进行任何修改的，因为，在weinre文件夹当中，本身自带了这个文件夹和相关文件。...这个文件的主要作用在于获得从Debug服务端传来的信息，更改当前页面的样式；也可以运行传来的js，并返回结果。...5 具体调试范例 调试分为HTML与CSS、JS的基本调试 —— 各位攻城狮们肯定都知道啦。weinre贴合浏览器的设计方法也让我们能够很直观的看到调试功能分类（和谷歌控制台基本一致）。...JS的基本调试 ? ? PS：变化是同步的哦，无需刷新手机页面~~~ 好啦，接下来，你就可以尽情“调试”啦~~！！！
Chrome/Safari真机调试 移动端开发，当然是优先真机调试，真机调试更加顺畅，支持js断点调试以及绝大多数Chrome DevTools一样的调试功能（不支持Chrome扩展）。...，在iPhone上也能断点调试js了。...市面上的工具有不少，weinre、vConsole等等，实际使用下来还是更推荐spy-debugger，spy-debugger是一站式页面调试、抓包工具，可以远程调试任何手机浏览器页面，任何手机移动端...spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码，简化了weinre需要给每个调试的页面添加js代码。...spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码，让页面调试更加方便，且支持HTTPS。
优点：简单、跨平台 缺点：只支持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...缺点：需要对HTML页面有改动的权限，因为是远程连接的原因，可能网络连接速度会影响调试的响应。... // init vConsole var vConsole = new VConsole
主要分为以下几点: chrome developer tools android+chrome inspect iOS+safari GapDebug weinre weinre相关套件...iOS+safari 特点 使用pc端的safari调试iOS设备中的网页，可进行真机远程调试，也可调试模拟器。...weinre 特点 适用范围广，在调试页面中加载weinre提供的一个js脚本，即可在weinre inspect面板中进行调试。...相关套件 MIHTool MIHTool是weinre的app集成版本，仅有iOS版本可供安装，例举几个特点： 自动注入weinre所需脚本 支持webview js bridge api的模拟...进行调试的情况，比如一些低端机型的兼容问题，使用weinre或其相关套件进行调试； 再配合代理的资源本地映射，能够更为方便地调试线上环境出现的问题； 实际开发中，还是需要在合适的时机选择合适的调试方式
安装 Node.jsBrowserSync是基于Node.js的, 是一个Node模块， 如果您想要快速使用它，也许您需要先安装一下Node.js安装适用于Mac OS，Windows和Linux。.../static/*.html").on('change', reload); }); 4.全部开启远程调试： ? Image.png ? Image.png 5.找到自己的IP地址： ?...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 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
