首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

远程调试手机页面工具:Weinre 介绍

Weinre(全称Web Inspector Remote)是一款的可以在电脑上远程调试手机页面的工具。...通过Weinre,我们可以在电脑上审查手机上页面的元素,选中的元素会有一个选中效果,并显示对应元素的样式。如下图所示: ?...weinre-demo.jpg 当在电脑上改变元素的样式时,手机上对应的元素的样式也会立即改变(无需刷新页面)。...除了审查元素的功能之外,如果在电脑上管理页面的Console选项卡执行JS代码,该JS代码会立即在手机上执行。 Weinre目前应该不支持在JS中打断点调试的功能。...如果需要手机可以连接Weinre Server,需要用 weinre --boundHost -all-或用weinre --boundHost 手机IP来启动Weinre Server。

81930

whistle手机调试工具使用简单教程

我们主要常用几个功能: 1、mock本地数据映射,即手机请求线上某个接口的时候做本地映射,直接请求本地json数据 2、查看console打印信息,对于windows系统的电脑来说还是很有用的,否则调试...:3001/aaa.html log:// weinre://aaa 手机代理设置 1、手机在连着和电脑同一个局域网下,手机进入wifi设置,设置代理为手动,IP地址为电脑IP地址,端口号为whistle...本地调试界面打开的端口号,这里是8899 2、安装证书,手机浏览器输入rootca.pro (或者在调试界面点HTTPS,手机扫描即可跳转) ,会跳转到下载证书界面,点击下载好之后安装,安卓需要起个名字...小米手机独特的解决方案,参考此文:https://blog.csdn.net/jinshitou2012/article/details/79044560 页面调试 至此,手机点击请求的页面,whistle...调试界面已经可以看到请求了,右侧点击tools-log,可以查看页面console.log打印,如果想要调试html,点击调试界面上面的weinre,找到刚刚rules配置的时候weinre后面名字点击即可看到

2K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ADB 工具安装与手机调试;使用android adb 工具处理触屏损坏手机

    之前一个手机触屏坏了,最近需要使用手机做一些操作;今天尝试使用adb工具进行调试; 安卓开发者网站:https://developer.android.google.cn/ adb调试工具介绍:https...://developer.android.google.cn/studio/command-line/adb adb 工具介绍和教程; 下载adb工具:https://developer.android.google.cn.../studio/releases/platform-tools 因为,我们本身不是做android 开发;这里进行下载android 调试桥就好; 下面我们进行使用android调试工具进行,操作智能手机...;android做了sdk管理软件,我们只是为了调试,所以直接下载调试工具即可; 然后使用CWM(ClockworkMod)Recovery 进行取得完全控制,可参考: https://walker-a.com...手机坏了,直接卖个新的手机就好,然后把数据同步一下; 保持更新,更多内容请关注cnblogs.com/xuyaowen;

    1.5K10

    手机网页调试工具-兼容IOS与安卓

    最近在开发微信公众号网页的时候,由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug,但这些bug只会在固定的机型或者部分手机复现,电脑端调试以及大部分手机都是没有问题的。...from=singlemessage 出现以下图片 需要在手机端查看调试的时候,切换到第二个Tab栏 勾选vConsole调试功能即可在手机网页上查看控制台输出 清理手机网页缓存的方法 首页下拉到最后面...查看调试的方法 当打开手机网页时网页右下角会出现vConsole按钮,其功能与电脑上的开发者工具类似,算是迷你版的开发者工具。点击按钮就会出现下列界面,此处可以查看日志打印,本地存储等各类信息。...以上就是安卓端手机网页开发时调试的方法。 ios网页调试的方法 IOS不支持X5内核所以不能使用上述方法。但是可以直接在html中嵌入vconsole.js 下面为嵌入方法: Title <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.<em>js</em>

    1.1K10

    android usb调试工具,USB调试怎么打开 各版本安卓手机打开USB调试模式方法

    手机与电脑通常是通过Adb方式连接,所以需要您在设备上打开USB调试模式,不同版本的安卓系统,打开USB调试模式也有所不同,以下我们根据安卓系统版本而不同,介绍下各版本安卓手机打开USB调试模式的方法,...USB调试怎么打开 各版本安卓手机打开USB调试模式方法 一、安卓2.1 ~ 2.3.7 系统打开USB调试模式方法 1、点击手机Menu键(菜单键),在弹出的菜单中选择 设置(Setting), 或在应用程序中找到设置程序点击进入...三、安卓4.2 系统打开打开USB调试模式方法 1、同样的点击手机Menu键(菜单键),在弹出的菜单中选择 设置(Setting), 或在应用程序中找到“设置 程序点击进入“ 关于手机”如下图: 2、...然后这里需要注意的是安卓4.2的USB调试模式默认是隐藏的,我们需要连续点击七次“版本号 ”再返回“设置”菜单界面选择“开发者选项”才可以找到USB调试模式设置,如下图: 关于不同版本的安卓手机如何打开...USB调试模式就为大家介绍到这里,以上方法基本通用,另外有部分安卓手机可能经过深度二次开发,还有其他一些进入USB调试模式设置的方法,具体大家可以根据不同品牌型号手机,百度搜索下,看是否还有其它打开USB

    2.7K30

    调试JS代码

    记录下近期对JS代码的调试过程 性能分析 启动程序之后,打开google浏览器对应页面,按F12或者Ctrl+Shift+I进入 开发者工具页面 目前主要使用的功能有: Performance....性能评估,比如我想看下页面刷新的性能瓶颈所在,先点击 按钮,然后进行页面操作,当页面刷新完成,再点击 按钮,则会生成性能报告,可以看到资源消耗,JS代码的执行逻辑等 Sources....性能报告页面的 部分,可以通过点击色块查看其所在的js代码文件,如 点击则会跳转到 功能栏,有了源文件就可以进行断点调试;这里注意部分js文件是压缩后的文件,建议手动修改程序替换成可读性更强的原始代码文件...,方便调试 Console....查看程序的打印输出,比如我想知道某个函数的执行时间,可以在js代码中进行修改 当js代码执行之后,可以在console输出中看到foo的执行时间 Network.

    19K10

    uniapp连接手机调试

    可以看到,在开发工具HBuilderX里面,极速生成的模板目录结构如下 打开pages底下的index.vue的组件,开始写代码了,把代码写好,这里随便写了一个例子。...需要将手机用充电线连接电脑,并且允许USB调试(这一步很重要,不然HBuilderX搜不到你要调试手机,无法建立连接。)...如果不会打开USB调试模式,可以自行百度,我的是oppor的手机 我就查了一下,oppor手机怎么打开USB调试模式....这个时候HBuilderX是自动检测手机是否连接,(如果运行设备为灰色,则说明没有手机没有连接成功)。 连接不成功的原因有很多,比如,手机没有打开usb调试模式,电脑中其他软件占用adb通道等。...连接成功,控制台里面会有这样的提示 并且在手机端提示安装HBuilderX,同意安装就行了。 4:调试结果 每次调试的时候,只需要打开HBuilderX,就能同步看到开发工具里面编辑的内容了。

    3.2K00

    手机上debug调试代码

    有时候为了在手机调试网页,大都是大费周章,有的使用Chrome DevTools远程链接手机调试,有的使用专门的工具或者浏览器调试,现在腾讯开源了一个vConsole的工具,就解决了这一个痛点!...vConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板。...在线体验(UI就是微信开发者工具的UI) 官方网站 特性 查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies、localStorage 和 SessionStorage...手动执行 JS 命令行 自定义插件 上手 下载 vConsole 的最新版本。...(不要直接下载 dev 分支下的 dist/vconsole.min.js) 或者使用 npm 安装: npm install vconsole 引入 dist/vconsole.min.js 到项目中

    1.4K20

    android开发连接手机usb调试模式,安卓手机usb调试在哪里 安卓手机usb调试模式设置教程…

    大家好,又见面了,我是你们的朋友全栈君 安卓手机usb调试在哪里这个经常问倒一些机友,因为安卓系统和手机型号的不同,USB调试所在位置稍有不同,部分机型甚至采用了隐藏设置,跑跑车这里分享了安卓系统下各种手机的...USB调试模式设置教程,从此让你的电脑与手机可以自由连接。...系统打开USB调试模式方法 1、同样的点击手机Menu键(菜单键),在弹出的菜单中选择 设置(Setting), 或在应用程序中找到“设置 程序点击进入“ 关于手机”如下图: 2、然后这里需要注意的是安卓...; 六、特色机型 部分三星机型,如I5508,在通过USB连接到电脑后,手机端提示选择“USB设置”模式,请选择“Kies”,选择此模式后相当于打开了“USB调试”开关。...更有部分手机系统无usb调试选项,默认即为开启。 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

    3.1K30

    用于调试和分析的 5 大 Node.js 工具

    node-js-tools-for-debugging-and-profiling-bee7c4c83592Node.js需要适当的工具进行调试和分析。...调试和分析是查找和修复错误、测量和优化性能,同时确保Node.js应用程序的质量和效率的重要过程。但是,Node.js有许多工具可用于调试和分析应用程序,那么如何选择最适合你需求的工具呢?...让我们看一下用于调试和分析的前 5 个Node.js工具。1. Node.js内置调试器Node.js 内置调试器是Node.js本身附带的简单有效的工具。你可以使用它来检查代码、设置断点和监视变量。...然后,开始调试你的应用程序并使用调试工具栏和选项卡来控制和检查你的应用程序。步骤04结束调试会话并打开 CPU 配置文件以查看应用程序的性能。...有关更多信息,请参阅此处分析 Node.js 应用程序。总结调试和分析对于开发高质量且高性能的 Node.js 应用程序至关重要。根据你的需求和偏好,你可能会发现更适合且更有效的适合你项目的不同工具

    37210

    Fiddler远程调试js

    使用Fiddler调试本地js   在我们前端开发的日常工作中,发现服务器上某个css/javascript文件有问题,需要修改,那真是家常便饭。...假设我们发现这个页面有问题,需要修改所引用的js文件()。 第一步:用Fiddler查看页面的数据流列表,找到这个js文件的session ?  ...在这个js session上右键点击,选择“Save – Response –Response Body…”,将js文件的内容保存到本地。记住存的位置,下面我们会用到这个保存下来的文件。...通过以上几个步骤,我们演示了怎样将HTTP请求重定向到本地的文件,进行web调试。...这种调试方式不需要发布到线上再验证,避免了修改不成功、对用户造成影响的风险,而且不需要搭建复杂的开发服务器等开发环境,非常适合快速web调试

    10K30

    使用weinre调试手机页面

    Weinre(Web Inspector Remote),是一种远程调试工具。功能与Firebug及chrome调试器类似,可以帮助我们即时更改页面元素、样式,调试JS等。 工作原理 ?...假设我们要调试的页面运行在10.136.30.144:3927 页面中引入js后,用手机浏览器打开待调试页面 http://10.136.30.144:3927/new 4....开始调试 手机访问页面后,我们回到步骤2中所说的调试界面。发现此时,targets中多了一条,即是我们在步骤3中用手机打开的待调试页面。 ?...点击该target,即可利用熟悉的调试界面进行调试了。 ? 其它说明 1. 用手机连续访问多页面,这些页面都会在targets中列出,选中其中一个,即可进行调试。 2....4. cosole部分,可以看console log, 运行js。但无法像firebug那样报出js的错误,更不能加断点调试

    1.2K30

    使用 Vue.js Devtools 扩展作为 Vue 应用调试工具

    上篇教程学院君给大家简单介绍了 Vue.js 框架,并演示了 Vue.js 的第一个功能特性 —— 数据绑定。...安装扩展 在此之前,我们先来介绍一款 Vue.js 本地开发的调试工具 —— Vue.js Devtools,这是一个浏览器扩展,当前支持 Chrome 和 Firefox 浏览器,你可以在 Chrome...另外,如果当前 HTML 页面没用使用 Vue 框架,Vue.js Devtools 扩展会处于未激活状态: 可以看到该扩展的颜色是灰色的,同时在开发者工具的标签页也没有 Vue 选项卡,表示该页面没有使用...Vue.js 框架。...好了,关于 Vue.js Devtools 的基本使用学院君先简单介绍到这里,在后续教程中,我们将基于它作为开发 Vue 应用的调用工具

    1.7K30

    使用Firefox轻松调试JS

    Firefox调试JS的功能真的很不错,推荐一下! 在页面上点击右键,再点击“查看元素”,如图: ? 就会弹出Firefox的开发者界面,点击“调试器”,如图: ?...一步步调试代码 你可以一步步的执行代码。这对代码调试非常有用。 ? 使用断点调试 断点调试可以终止代码的执行,你可以通过指定代码范围来查看错误是不是在指定代码范围内。这对于 错误调试很有用。...Firefox的JS调试功能非常强大,感觉试一下吧! 点击调试器tab页,刷新要调试的页面,调试器主窗口会出现要调试的代码 ?...点击暂停按钮,点击后按钮状态改变,同时右边的三个调试步骤变为可操作状态,调试步骤的作用可参考IE浏览器javascript调试篇的讲解。同时,在代码行上面打断点。...说到这里,Firefox浏览器的javascript调试基本就讲完了。

    6K20
    领券