今天大师兄碰到一新来的实习生在使用 alert 调试H5页面,仿佛看到大师兄年少时羞涩的样子...
访问:https://xxxx.xxxx.xxx.com/chii/ 即可打开调试监控
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
有时候为了在手机上调试网页,大都是大费周章,有的使用Chrome DevTools远程链接手机调试,有的使用专门的工具或者浏览器调试,现在腾讯开源了一个vConsole的工具,就解决了这一个痛点!
在web应用开发过程中,可以console.log去输出信息,但是在移动端,console.log的信息我们是看不到的,如何将console.log应用到移动端呢?
前几天遇见了js不兼容问题,然后使用了一下vconsole,发现连这个也不兼容,于是放弃了修复。今天刚好有人问到移动端的问题,于是就想分享一下vconsole这个移动端的调试工具。一篇水文,随意看看。
特性 查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies、localStorage 和 SessionStorage 手动执行 JS 命令行 自定义插件 上手
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方法,实现了类似于微信小程序的移动端调试效果。 具体使用方法也很简单
最近小编接了一个新需求,用h5开发页面,通过webview嵌入原生APP中,自己在浏览器上开发爽歪歪,什么信息都能看到,可是一嵌入原生app中,瞬间就熄火了,啥也看不到了,不知道为什么,反正就是页面点不动了。
以下配置是在webpack 4.41.6+测试 可用于生产环境: babel-loader缓存优化 ignoreplugin noparse happyPack ParallelUglifyPlugin 不可用于生产环境的: 自动刷新 热更新 DllPlugin babel-loader的缓存优化 module: { rules: [ { test: /\.js$/, loader: 'babel-
在组件中,有需要跳转页面,并且不让用户返回的情况,例如:支付、登录、注销等。请做一下修改:
今天,哦不,昨天,是让人惊喜的一天。这惊喜当然不是来自于日常工作,而是来自于开源社区。 移动端调试在几年前可能还是前端开发的一个痛点,不过随着开发工具的不断完善以及开源社区的大佬们无私的奉献,这一“难题”也变得不那么难。但是今天偶遇到的解决方案,却可以说是惊艳到我了。
教程更新了若干次,2020->2021.04->2021.06,如果知友们发现又失效了请联系我。
在 GitHub 上闲逛时,发现一个叫做 shortcuts-js[1] 的项目,其描述写的是“A JavaScript iOS 12 快捷指令 creator”,花了几个小时的时间玩了一下,发现挺不错。
「第一个目的」:这一个移动端记账本的创作来源呢,其实是我在学习了理财的课程之后,突然想为自己写一个记账的东西来记录自己每天花费的钱,从而可以降低那些不必要的开销,从而达到理财的第一步。
好多人认为whistle是抓包工具,殊不知抓包只是whistle能力的冰山一角。除了抓包外,它还能修改请求与响应、真机调试h5移动端、解决跨域、域名映射等等等。总而言之,使用whistle能够提升我们的开发效率,改善开发体验。
平时在web应用开发过程中,我们可以console.log去输出一些信息,但是在移动端,也就是在手机上,console.log的信息我们是看不到的,这时候就需要移动端调试工具vConsole
安卓手机可以使用debugx5.qq.com来开启调试面板,但是苹果并不支持,所以一般采用安装vconsole的方式来查看控制台信息调试应用。
vConsole是腾讯开源的,一个轻量、可拓展、针对手机网页的前端开发者调试面板。
作者:thinkchen,腾讯 PCG 高级前端开发工程师 mdebug是腾讯新闻 TNTWEB 团队推出的基于React开发的新的web调试工具, 沉淀自腾讯新闻微信手 q 双插件多年的移动 web 开发实践中。相比 vconsole, eruda 等调试工具, 使用现代框架进行编写。整合 network 监控能力,提供了更丰富的调试能力和 api, 拥有更强大的网络捕获能力,接入和使用简单。本文将从背景, 架构,功能, 实现原理, 未来扩展点等角度全面介绍这款工具。 一.背景 调试一直是移动 we
最近做移动端项目比较多,电脑上开发完了上真机必现问题,但是真机上又看不了代码很捉急啊有没有。 这两天才发现这个腾讯良品vConsole,以前开发小程序见过,但没想到他竟然还能被应用到我们的h5页面中,
最近做的一个项目需要同时适配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
在前端开发过程中,经常会使用 console.log/info 等方法来输出日志信息,电脑浏览器中可以方便的在控制台中查看 现在移动端的web开发越来越多,而在移动设备中进行开发调试时,console.log 这类的日志信息就不太容易查看了 vConsole 就是用来解决这个问题,可以让我们在移动设备中非常方便的查看console日志信息 vConsole 是由微信的前端研发团队提供,小巧好用 DEMO http://wechatfe.github.io/vconsole/demo.html(建
https://juejin.cn/post/6949433236787298335
工作中时常遇到需要对自己已上线 app 中的 WebView 网页进行一些调试验证的情况,以排查 bug,解决问题。
vConsole相信各位并不陌生,它是一个轻量、可拓展、针对手机网页的前端开发者调试面板。有时候为了想在手机上对网页进行 Debug,可手机上没有F12,电脑却又不在身边,请不要着急, 这时就需要vConsole了, vConsole是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板,正好解决了这一痛点!
最近在开发微信公众号网页的时候,由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug,但这些bug只会在固定的机型或者部分手机复现,电脑端调试以及大部分手机都是没有问题的。所以需要在手机上模拟控制台输出日志来查看是否有报错。
1.首先,我们先复制下面的这几个网址: 第一步:debugmm.qq.com/?forcex5=true 第二步:http://debugtbs.qq.com 第三步:http://debugx5.qq.com 打开微信,发送给任意公众号,并依次打开各链接。 2.然后打开第三步网址,点击如下图所示的顶部的"信 息",勾选打开vconsole调试功能。
事情是这样子的,我们在开发小程序的时候,需要在真机上把相关的日志打出来以便进行问题定位和回溯,于是在编程界就有个今天这个新闻。------ 好消息!微信小程序开发环境自带vConsole.
事情是这样子的,我们在开发小程序的时候,需要在真机上把相关的日志打出来以便进行问题定位和回溯,于是在编程界就有个今天这个新闻。------ 好消息!广东某男子发现微信小程序开发环境自带vConsole.
专家与普通人的重要区别在于他们善于使用工具,留出更多的时间用于计划和思考。编写代码也是如此。有了合适的工具,你就有更多的时间来规划架构和攻克难关,更多的把精力放在业务实现上。今天,我将与大家分享最流行的几个常用且流行的 JavaScript 库。
内容来源:作者 | Jartto,http://jartto.wang/2018/11/01/mobile-debug/
* 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log…
eruda与腾讯推出的vconsole很相似,都是用于移动端的调试,让开发者在移动端的浏览器中获得近似PC端浏览器的调试能力。 截止至本文发稿之日,eruda在GitHub上已经有2.7K个star
今天,无意间从别人那里得知一个很好的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上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。
bash 切换到桌面 运行 vue init webpack vue-demo 生成初始化vue项目
自2019.05.22日离职以来,自己在家浪了两天。然后发现,浪也该浪够了,该收心找下工作了。于是屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午,看到移动端调试这里,略有感受,于是提取了下内容
以下介绍在不用修改代码并发布项目的情况下,为我们日常使用的移动web应用(如手机web淘宝)添加vConsole调试工具的方法
https://juejin.cn/post/7208510421676982329
第一步是必写的 function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) {
本来手机调试是放在 whistle 入门介绍那篇内容的,但是由于那篇篇幅太长,这部分内容又比较独立,所以就单独放一篇来说了
whistle是基于Node实现的跨平台web调试代理工具,可以作为普通的http代理或者用来抓包、修改、操作http、https、websocket、tunnel请求,如:修改hosts、请求方法、响应状态码、请求(响应)头、请求(响应)内容等等,基本上可以操作web请求的方方面面,而且支持插件扩展功能,本文主要讲下如何用whistle调试移动端页面,安装及使用whistle等其它内容请参见Github:https://github.com/avwo/whistle。
随着青年大学习的时间越来越长,有时候打完一局游戏还没挂完,内心也是十分恼火,想跳过但是奈何自己不是ios系统,没法快乐,对于跳过视频究其本质,也就是对video这个元素的currentTime属性的改变,但因为微信内核浏览器没法打开控制台,所以一直不知道怎么办,但是事情的转机来了,我发现了一个供开发者测试的网址,可以打开控制台,也就实现了我想要的操作,也轻松跳过了12分钟的视频,而且后台显示我已经看完,接下来我会分享此操作,仅用来分享技术。
领取专属 10元无门槛券
手把手带您无忧上云