whistle是基于Node实现的跨平台web调试代理工具,可以作为普通的http代理或者用来抓包、修改、操作http、https、websocket、tunnel请求,如:修改hosts、请求方法、响应状态码、请求(响应)头、请求(响应)内容等等,基本上可以操作web请求的方方面面,而且支持插件扩展功能,本文主要讲下如何用whistle调试移动端页面,安装及使用whistle等其它内容请参见Github:https://github.com/avwo/whistle。
在组件中,有需要跳转页面,并且不让用户返回的情况,例如:支付、登录、注销等。请做一下修改:
之所以写这个总结,还要从上周的一次移动端项目的 debug 说起。那天,测试小姐姐拿着自己的 iphone6s 过来找我,说页面打不开。我想:这怎么可能,我手机里挺好的呀,Chrome调试工具也没报错呀!就把她手机拿过来看了看,发现一进去还真就是一片空白。WTF(手动黑人问号)!!!那问题就来了,开发环境下没报错,可真机又出现了意料之外的情况,而且没法像 PC端 那样祭出 F12 大法,怎么定位问题并解决呢?最后凭借着我(谷歌)的聪明才智,找到了媲美 PC端 调试体验的方式。在此总结一波,献给各位被移动端真机调试折磨,而又无从下手的前端er们,话休烦絮,直接奉上:
搭配前文简易Ramdisk 镜像制作(基于Centos7+)中Ramdisk可实现:
今天大师兄碰到一新来的实习生在使用 alert 调试H5页面,仿佛看到大师兄年少时羞涩的样子...
有时候为了在手机上调试网页,大都是大费周章,有的使用Chrome DevTools远程链接手机调试,有的使用专门的工具或者浏览器调试,现在腾讯开源了一个vConsole的工具,就解决了这一个痛点!
VConsole——Vue 项目中使用手机网页的前端 console 调试面板 1.cdn 使用 使用 cdn 引入,在 public 目录下的 index.html 中引入如下代码即可 // 初始化 var vConsole = new VConsole(); const hasAttr = (e,a) => a.some(_=> e.attr(_)!==undefined); $('a').each(funct
平时在web应用开发过程中,我们可以console.log去输出一些信息,但是在移动端,也就是在手机上,console.log的信息我们是看不到的,这时候就需要移动端调试工具vConsole
特性 查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies、localStorage 和 SessionStorage 手动执行 JS 命令行 自定义插件 上手
在web应用开发过程中,可以console.log去输出信息,但是在移动端,console.log的信息我们是看不到的,如何将console.log应用到移动端呢?
前几天遇见了js不兼容问题,然后使用了一下vconsole,发现连这个也不兼容,于是放弃了修复。今天刚好有人问到移动端的问题,于是就想分享一下vconsole这个移动端的调试工具。一篇水文,随意看看。
安卓手机可以使用debugx5.qq.com来开启调试面板,但是苹果并不支持,所以一般采用安装vconsole的方式来查看控制台信息调试应用。
vConsole是腾讯开源的,一个轻量、可拓展、针对手机网页的前端开发者调试面板。
访问:https://xxxx.xxxx.xxx.com/chii/ 即可打开调试监控
最近做移动端项目比较多,电脑上开发完了上真机必现问题,但是真机上又看不了代码很捉急啊有没有。 这两天才发现这个腾讯良品vConsole,以前开发小程序见过,但没想到他竟然还能被应用到我们的h5页面中,
在前端开发过程中,经常会使用 console.log/info 等方法来输出日志信息,电脑浏览器中可以方便的在控制台中查看 现在移动端的web开发越来越多,而在移动设备中进行开发调试时,console.log 这类的日志信息就不太容易查看了 vConsole 就是用来解决这个问题,可以让我们在移动设备中非常方便的查看console日志信息 vConsole 是由微信的前端研发团队提供,小巧好用 DEMO http://wechatfe.github.io/vconsole/demo.html(建
最近做的一个项目需要同时适配PC端和iPad及mobile移动端,由于PC端的设备屏幕宽度比iPad和mobile端大太多,因此页面布局需要进行区分。而前笔者在端项目中使用了vue和vue-router进行开发,也就是说需要根据当前客户使用的设备属于哪种客户端让路由决定进入哪种设备适配的页面组件。因此需要在邻项目路由的入口处判断客户使用的设备是PC、iPad还是mobile。
vConsole vConsole 是一个轻量、可扩展的前端开发者调试面板。专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作。目前在使用于微信公众平台、微信小程序等。 特性如下: 查看 console 日志 查看网络请求 手动执行 JS 命令行 自定义插件 前端开发者调试面板 vConsole 正式开源 Github地址: https://github.com/Tencent/vConsole 请给 vConsole 一个 Star! 欢迎提出你的 issue 和 PR
https://juejin.cn/post/6949433236787298335
工作中时常遇到需要对自己已上线 app 中的 WebView 网页进行一些调试验证的情况,以排查 bug,解决问题。
vConsole相信各位并不陌生,它是一个轻量、可拓展、针对手机网页的前端开发者调试面板。有时候为了想在手机上对网页进行 Debug,可手机上没有F12,电脑却又不在身边,请不要着急, 这时就需要vConsole了, vConsole是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板,正好解决了这一痛点!
最近在开发微信公众号网页的时候,由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug,但这些bug只会在固定的机型或者部分手机复现,电脑端调试以及大部分手机都是没有问题的。所以需要在手机上模拟控制台输出日志来查看是否有报错。
事情是这样子的,我们在开发小程序的时候,需要在真机上把相关的日志打出来以便进行问题定位和回溯,于是在编程界就有个今天这个新闻。------ 好消息!微信小程序开发环境自带vConsole.
事情是这样子的,我们在开发小程序的时候,需要在真机上把相关的日志打出来以便进行问题定位和回溯,于是在编程界就有个今天这个新闻。------ 好消息!广东某男子发现微信小程序开发环境自带vConsole.
1.首先,我们先复制下面的这几个网址: 第一步:debugmm.qq.com/?forcex5=true 第二步:http://debugtbs.qq.com 第三步:http://debugx5.qq.com 打开微信,发送给任意公众号,并依次打开各链接。 2.然后打开第三步网址,点击如下图所示的顶部的"信 息",勾选打开vconsole调试功能。
copy到index.html <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script> // 初始化 var vConsole = new VConsole(); console.log('Hello world'); </script>
平时web开发时,在手机上,如果是要看控制台信息,都需要alert弹窗,这样很不友好.还会阻拦进程。 通过vConsole.js 重写console方法,实现了类似于微信小程序的移动端调试效果。 具体使用方法也很简单
专家与普通人的重要区别在于他们善于使用工具,留出更多的时间用于计划和思考。编写代码也是如此。有了合适的工具,你就有更多的时间来规划架构和攻克难关,更多的把精力放在业务实现上。今天,我将与大家分享最流行的几个常用且流行的 JavaScript 库。
爱可生南区交付服务部团队 DBA,负责客户 MySQL 的故障处理以及公司数据库集群管理平台 DMP 的日常运维。
内容来源:作者 | Jartto,http://jartto.wang/2018/11/01/mobile-debug/
* 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log…
最近小编接了一个新需求,用h5开发页面,通过webview嵌入原生APP中,自己在浏览器上开发爽歪歪,什么信息都能看到,可是一嵌入原生app中,瞬间就熄火了,啥也看不到了,不知道为什么,反正就是页面点不动了。
今天,无意间从别人那里得知一个很好的js插件--vconsole.min.js,可以实现在移动端打印输出内容以及查看网络请求。下面记录使用方式。 1、下载vconsole.min.js插件 以下复制了插件vconsole.min.js的内容 /*! * vconsole v2.5.1 (https://github.com/WechatFE/vConsole) * Copyright 2016, WechatFE Team * MIT license */ !function(e,t){"objec
最近要分析web页面,在安卓和ios上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。
以下介绍在不用修改代码并发布项目的情况下,为我们日常使用的移动web应用(如手机web淘宝)添加vConsole调试工具的方法
bash 切换到桌面 运行 vue init webpack vue-demo 生成初始化vue项目
自2019.05.22日离职以来,自己在家浪了两天。然后发现,浪也该浪够了,该收心找下工作了。于是屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午,看到移动端调试这里,略有感受,于是提取了下内容
https://juejin.cn/post/7208510421676982329
前面有文章monaco-editor做自己的代码测试工具 ,本文书接前文,在代码中加入vconsole工具,可以进行代码调试、查看网络、查看元素等。
今天,哦不,昨天,是让人惊喜的一天。这惊喜当然不是来自于日常工作,而是来自于开源社区。 移动端调试在几年前可能还是前端开发的一个痛点,不过随着开发工具的不断完善以及开源社区的大佬们无私的奉献,这一“难题”也变得不那么难。但是今天偶遇到的解决方案,却可以说是惊艳到我了。
为了及时响应社区反馈,PageSpy 建立了技术支持群,群内提供了视频讲解资料供大家学习、快速上手,欢迎大家入群交流。
开源是个好东西,马化腾除了王者荣耀还是干了些好事情的。腾讯最近开源的一些比较热门的项目,可以学习了解下哈
教程更新了若干次,2020->2021.04->2021.06,如果知友们发现又失效了请联系我。
第一步是必写的 function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) {
本来手机调试是放在 whistle 入门介绍那篇内容的,但是由于那篇篇幅太长,这部分内容又比较独立,所以就单独放一篇来说了
第一,whistle 是一个 web 调试代理工具,它的功能十分强大。作为一名前端,我们需要经常跟协议中的应用层打交道,Mock 数据、跨域问题、cookie 的修改、移动端调试等等,都是我们必备的技能,而 whistle 就能解决其中 90% 的问题
领取专属 10元无门槛券
手把手带您无忧上云