原文地址:http://blog.csdn.net/freshlover/article/details/42640253
Weinre(全称Web Inspector Remote)是一款的可以在电脑上远程调试手机页面的工具。
一些调试工具 说起手机端调试,相比大家都不陌生。 由于手机浏览器没有像PC端浏览器一样有开发调试工具,所以一般手机端的调试都要借助于电脑,现在的调试方式通常有以下几种。 直接在chrome, firefox等开启模拟器调试简单直接,还能模拟网络等,但是仍然无法100%还原手机的真实情况。 实现一套pc调试面板 采用这种实现方式有weinre,weinre很早前就比较流行了,使用也比较广泛,运行后会在PC上生成一个像chrome开发工具一样的调试器。能对手机进行远程调试,能操作DOM,打印console输出等
官网地址: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
上面说 weinre 是一个远程 web 调试器。说到了它的发音,还挺幽默,哈哈。
访问:https://xxxx.xxxx.xxx.com/chii/ 即可打开调试监控
在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用。但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了。因此,移动开发人员都希望能有 Mobile 版本的 Firebug 或者 Chrome 开发人员工具。Weinre 就是这样一款工具,可以帮助我们调试移动网站及 PhoneGap 应用。
在开发安卓微信页面时,刚开始一般是会在PC上进行,等到开发后期的自测阶段再转到安卓模拟器上、转到各种真机上自测,上线了如果出问题还需要在真机上调试测试。
Weinre(Web Inspector Remote),是一种远程调试工具。功能与Firebug及chrome调试器类似,可以帮助我们即时更改页面元素、样式,调试JS等。
你可能会说,大家都是 秃头的 成熟的前端程序员了,每一台电脑上都有几套自己辛辛苦苦装好的全家桶,为什么还要新换一个开发工具?
很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决,因为缺乏可视化的界面。不似在PC端,我们能直观的去改变样式,或者是进行断点调试。有时,在移动端我们不得不借助于alert来调试,但是这样的调试方法效率极其低下,很多时候,都是靠经验,或者是靠排除法。甚至,我们不得不归结为是浏览器的实现问题。
唉,最近公司在研发分布式高性能的云计算平台,其中涉及到了 AI 方面的处理。所以我也在自学 Python,发现没啥门槛😂。不过在 AI 方面的知识却是需要花功夫花时间学习的。在学习的过程中我发现了一个不错的学习教程,推荐给大伙😋,我个人觉得这个教程讲解的通俗易懂,帮我省去了自己苦苦专研的时间,能够得到快速的进步。下一阶段,我也会在这里和大家分享我的学习笔记。
自2019.05.22日离职以来,自己在家浪了两天。然后发现,浪也该浪够了,该收心找下工作了。于是屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午,看到移动端调试这里,略有感受,于是提取了下内容
内容来源:作者,深予之 (@senntyou),https://github.com/senntyou/blogs;来自,https://segmentfault.com/a/1190000016852780
用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳。有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就需要我们进行微调。 在pc上微调后发布到测试环境再在手机上看效果,开发很慢,效率很低。这时候就想着有一个可以在手机上调试的工具,可以随时更改参数随时看到手机上的效果,免去发布再测试、模糊估计参数不精准的麻烦,weinre就是一个这样的工具。 weinre可以在PC上远程调试手机上的
HTML5学堂:随着时代的发展,JS的地位已经越来越高,NodeJS也是从萌芽开始,茁壮成长~这篇文章我们主要借助weinre这个NodeJS工具,讲解NodeJS工具的安装方法,并且顺带介绍调试工具weinre,weinre主要用于辅助我们进行移动平台的页面的“即时”调试。 利利前面想说的一些话:2016年过年后,HTML5学堂的文章也要开始逐渐更新了,只不过目前每天工作事宜实在是比较多,所以不得不放在凌晨来写写技术文章,跟大家分享~还请大家多多包涵多多支持~! 什么是weinre 什么是weinre呢?
相较于pc端,移动端调试要更加丰富一些,下面对调试的方法进行简单汇总。 主要分为以下几点:
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 无论您是前端还是后端工程师,使用它将提高您30%的工作效率。 MD5加密: import crypto from "crypto"; function md5(data) { let Buffer = require("buffer").Buffer; let buf = new Buff
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
对于前端开发来说,在pc端使用chrome等浏览器的开发者工具简直是好用到爆,Chrome手机模拟器可以帮助开发调试移动端web页面,然而在真机内调试起移动端web页面的时候就显得无从下手。目前已经有不少移动端的真机调试工具,本人在综合使用后推荐以下两类调试方案:chrome/safari真机调试 和 spy-debugger调试。
接触过前后端开发的同学应该都了解网络请求代理工具fiddler(mac下面常用的是Charles),可以用来拦截分析请求、包装请求、本地调试和移动端代理开发调试等。多多少少,fiddler和Charles使用起来还是有些区别,不过还好都是可视化的界面使用配置起来也都比较方便。
内容来源:作者 | Jartto,http://jartto.wang/2018/11/01/mobile-debug/
注:本文内容较长且细节较多,建议先收藏再阅读,原文将在 Github 上维护与更新。 在 HTTP 接口开发与调试过程中,我们经常遇到以下类似的问题: 为什么本地环境接口可以调用成功,但放到手机上就跑不起来? 这个接口很复杂,内部调用了好几个其他接口,如何定位问题究竟出在哪一步? 后端开发还没有把接口提供好,前端开发任务无法推进…… 「猫哥网络编程系列」最核心的任务便是向各位分享一个我从多年的前后端项目中总结而来的「万能」HTTP 调试法,掌握并从网络编程原理上理解它,能让我们顺利定位并解决所有 HTTP
whistle是基于Node实现的跨平台web调试代理工具,可以作为普通的http代理或者用来抓包、修改、操作http、https、websocket、tunnel请求,如:修改hosts、请求方法、响应状态码、请求(响应)头、请求(响应)内容等等,基本上可以操作web请求的方方面面,而且支持插件扩展功能,本文主要讲下如何用whistle调试移动端页面,安装及使用whistle等其它内容请参见Github:https://github.com/avwo/whistle。
某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们
一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备。
简单的知识点搭配合适的业务场景,往往能起到意想不到的效果。这篇文章会用三个最基础人人都知道的前端知识来说明如何助力运营小姐姐、公司48+前端开发同学的日常工作,让他们的工作效率得到极大地提升。
在上一篇《微信小程序「官方示例代码」浅析【上】》中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的——就是看看IDE的代码,了解它是怎么运行的。 还好微信的开发团队在软件工程的实践还有待提高,我们才有机会可以深入了解他们的代码——真想建议他们看看Growth的第二部分,构建系统。 解压应用 首先你需要有下面的工具啦 Mac电脑 微信web开发者工具.app WebStorm / 其他编程器 或 IDE,最好可以支持重命名 首先,我们需要右键微信web开发者工具.app,然后显示包的内容,在 Co
虽然移动端Web有着天生的HTML5特性,但是硬件显示环境的差异、各浏览器实现标准的方式的差异让开发人员不得不花很多时间在测试与调试上。
编码只是开发过程中的一小部分,为了使我们工作更加高效,我们必须学会调试,并擅长调试。
Devtools-Remote-Debugger 正如其名,是一个基于最新版 Chrome Devtools 开发者工具构建的 Web 远程调试工具。它能够让 Web 开发者使用最熟悉的 devtools 调试工具来远程调试 Web 项目。
看来远程调试是一大痛点。介绍了一个基于 Chrome Devtools 的远程调试工具,可以让前端开发者更好地调试远程 web 页面。今日文章由腾讯前端工程师 @Linkpan 分享。
PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直接看就可以了。
HTML5学堂:在前一篇文章当中,我们借着weinre讲解了NodeJS中的一些简单命令,也讲解了weinre的安装方法,今天我们把weinre的使用“完结”掉。移动端页面的开发过程中,weinre“即时”的调试方式,能够让我们更好更快的解决调试问题,使调试工作变得更加方便。 想要调试的文件放在哪里 首先,按照全局模式“-g”进行安装~(前面一篇文章我们已经讲过了) 之后,将我们需要调试的页面放置于如下目录当中:C:\Users\Administrator\AppData\Roaming\npm\node_
本文主要介绍了如何使用Node.js内置的调试器,包括如何启动调试器、设置断点、查看变量、单步执行、进入函数、查看调用栈、设置监视点、查看调用堆栈、调试异步代码、使用console.log、使用source-map-support、使用debugger语法进行调试等。同时还介绍了如何通过IDE或者命令行进行调试,以及调试过程中常见的问题和解决方法。
最近要分析web页面,在安卓和ios上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。
谈到node断点调试,目前主要有三种方式,通过node内置调试工具、通过IDE(如vscode)、通过node-inspector,三者本质上差不多。本文着重点在于介绍 如何在本地通过node-inspector 调试远程服务器上的node代码。
写在前面 谈到node断点调试,目前主要有三种方式,通过node内置调试工具、通过IDE(如vscode)、通过node-inspector,三者本质上差不多。本文着重点在于介绍 如何在本地通过node-inspector 调试远程服务器上的node代码。 在进入主题之前,首先会对三种调试方式进行入门讲解,方便新手理解后面的内容。至于老司机们,可以直接跳到主题去。 方式一:内置debug功能 进入调试模式(在第1行断点) node debug app.js 进入调试模式(在第n行断点) 比如要在第3行断点
好多人认为whistle是抓包工具,殊不知抓包只是whistle能力的冰山一角。除了抓包外,它还能修改请求与响应、真机调试h5移动端、解决跨域、域名映射等等等。总而言之,使用whistle能够提升我们的开发效率,改善开发体验。
由于移动端网页开发不能直接打开developer tools,导致我们调试起来稍微麻烦。好在我们有解决方案: Remote Devices 谷歌为我们提供的开发利器,让我们可以在电脑端使用developer tools进行elements检查和network监测,非常方便快捷。 使用方式:
移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试工具weinre 其他方案 附录:ES6标准兼容情况 页面容器 移动设备上的各种浏览器 chrome、safari、firefox、samsung browser
作为前端开发,我们每天都会用 Chrome DevTools 调试 Chrome 的网页,但其实它还可以远程调试安卓手机的网页。
在移动应用开发过程中,调试是不可或缺的一部分。了解如何有效地调试移动应用,可以提高开发效率并改善应用的质量。本文将深入探讨移动端调试的关键技巧和工具,为您提供一份全面的指南,并提供带有实际代码示例的技巧,以帮助您构建更出色的移动应用。
应用程序开发过程中,开发占总时间一半的话,调试可能会占一小半。读书破万卷,下笔如有神,但是在编程领域似乎破万卷也得通过不断地调试,找出程序存在的问题,完善程序功能
对于开发者来说,在开发应用程序的过程中,往往为了开发方便和解决bug需要借助于编程语言的调试功能。一般来说我们需要借助于强大IDE的调试功能来完成这项工作。nodejs也不例外。
直接在 Chrome 的调试窗口中调试 Vue 代码有诸多不便, 好在 Visual Studio Code 中提供了 Debugger for Chrome 插件,能够通过配置直接在 VS Code 断点调试代码, 并且在 VS Code 的调试窗口看到 Chrome 中 console 相同的值,这篇文章就来介绍一下这个配置过程。
领取专属 10元无门槛券
手把手带您无忧上云