我最近在学习做移动端页面,当做好一个移动端页面后想使用手机查看一下移动端页面在手机上的效果,找了很久才找到一个比较好的方法,特意写这篇文章记录下在手机上查看移动端页面的方法
一方面是觉得自己似乎已经把知道的性能相关的内容都写过一遍了,再写重复的,味如嚼蜡。
React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一。
一些调试工具 说起手机端调试,相比大家都不陌生。 由于手机浏览器没有像PC端浏览器一样有开发调试工具,所以一般手机端的调试都要借助于电脑,现在的调试方式通常有以下几种。 直接在chrome, firefox等开启模拟器调试简单直接,还能模拟网络等,但是仍然无法100%还原手机的真实情况。 实现一套pc调试面板 采用这种实现方式有weinre,weinre很早前就比较流行了,使用也比较广泛,运行后会在PC上生成一个像chrome开发工具一样的调试器。能对手机进行远程调试,能操作DOM,打印console输出等
sharing 是一个大小只有 200kb 的命令行工具,可以将文件或者文件夹共享到 iOS 和 Android 设备,而这些设备无需安装客户端,就可以实现数据的传输。
这个软件叫做 Auto.js,只支持安卓,是一个不需要 Root 权限的 JavaScript 自动化软件。什么意思呢,就是在你的安卓手机上安装这个 APP,然后通过编写 JS 脚本的方式实现自动化操作。类似的也有其他的一些软件,比如苹果自带的快捷操作,可以通过自定义配置完成一系列的流程,但是由于其目标是所有人都可以使用,所以定制的时候就没有那么灵活。
手机安装auto.js后,需要打开无障碍模式(为了脚本能执行)和悬浮框(为了查看控件信息)
之所以写这个总结,还要从上周的一次移动端项目的 debug 说起。那天,测试小姐姐拿着自己的 iphone6s 过来找我,说页面打不开。我想:这怎么可能,我手机里挺好的呀,Chrome调试工具也没报错呀!就把她手机拿过来看了看,发现一进去还真就是一片空白。WTF(手动黑人问号)!!!那问题就来了,开发环境下没报错,可真机又出现了意料之外的情况,而且没法像 PC端 那样祭出 F12 大法,怎么定位问题并解决呢?最后凭借着我(谷歌)的聪明才智,找到了媲美 PC端 调试体验的方式。在此总结一波,献给各位被移动端真机调试折磨,而又无从下手的前端er们,话休烦絮,直接奉上:
PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直接看就可以了。
用vue-cli构建的项目有时候有些功能需要在手机上测试,比如上传图片的时候调用手机拍照功能或者查看相册的功能,这个时候就要用到手机测试了,那么如何在手机上查看测试vue-cli构建的项目?今天就写一写具体步骤。
微信在发布小程序之前,有一个佐助微信 Html5 页面开发的 WeixinJSSDK,地址是这个:
直接在官网下载,需要破解的同学可以使用这个,我也是借花献佛,这样你可以时刻来抓包了, Registered Name: https://zhile.io License Key: 48891cf209c6d32bf4 找不到在哪设置license的同学看下图:
每天上班,重启电脑,按照下面的步骤,打开vue的项目,开始编写代码,但是,今天一如往常一般操作: 1:cd /项目名称 下面就是运行项目了,cd /项目名称,我的文件放在D盘,所以先进入d盘,再进入项目。
最近在开发微信公众号网页的时候,由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug,但这些bug只会在固定的机型或者部分手机复现,电脑端调试以及大部分手机都是没有问题的。所以需要在手机上模拟控制台输出日志来查看是否有报错。
每天上班,重启电脑,按照下面的步骤,打开vue的项目,开始编写代码,但是,今天一如往常一般操作: 1:cd /项目名称 下面就是运行项目了,cd /项目名称,我的文件放在D盘,所以先进入d盘,再进入项目。 cd ShopApp
最近小编接了一个新需求,用h5开发页面,通过webview嵌入原生APP中,自己在浏览器上开发爽歪歪,什么信息都能看到,可是一嵌入原生app中,瞬间就熄火了,啥也看不到了,不知道为什么,反正就是页面点不动了。
* 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log…
很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决,因为缺乏可视化的界面。不似在PC端,我们能直观的去改变样式,或者是进行断点调试。有时,在移动端我们不得不借助于alert来调试,但是这样的调试方法效率极其低下,很多时候,都是靠经验,或者是靠排除法。甚至,我们不得不归结为是浏览器的实现问题。
1.1、工具介绍 fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”fiddler的数据(指cookie,html,js,css等文件)。fiddler要比其他的网络调试器要更加简单,因为它不仅仅暴露http通讯,还提供了一个用户友好的格式。
本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们. 一.首先对浏览器渲染引擎下网页呈现过程简要说一下: 浏览器的渲染引擎开始解析html构建成DOM树,DOM树是以document对象为根节点,包含所有的html标签, 包括display: none隐藏的,也包括js动态添加的元素。 解析html的同时, 将css文件或者样式元素中的样式解析成CSS Rule Tree,解析时会去掉浏览器不能识别的样式。 根据DOM树和CSSOM来构造Ren
这种方法,并不能反编译出所有的小程序源码,请自知! 具体的局限请看:qwerty472123大神的md文件 https://github.com/qwerty472123/wxappUnpacker
关于WebVR 最近VR的发展十分吸引人们的眼球,很多同学应该也心痒痒的想体验VR设备,然而现在的专业硬件价格还比较高,入手一个估计就要吃土了。但是,对于我们前端开发者来说,我们不仅可以简单地在手机上进行视觉上的VR体验,还可以立马上手进行Web端VR应用的开发! WebVR是一个实验性的Javascript API,允许HMD(head-mounted displays)连接到web apps,同时能够接受这些设备的位置和动作信息。这让使用Javascript开发VR应用成为可能(当然已经有很
前几天去国图拍了一本书,一本心理学方面的书,也许你问我为什么不去买一本,或者去网上找pdf。 其实吧,关于心理学方面的书可以说在市面上一抓就是一堆,至于拍这本书两个原因,一个是没有什么收藏价值不值得我去买,只适合应急用,然后就是这本书的作者写作特点和其他大众的不太一样,可以说是有特点或者偏门,于是我就在手机上拍了一堆的图片,后来整理成了pdf,但是昨天我看的时候原图片文件还在快上千了吧,一个一个选择删除真是删烦了, 也许你会说为什么不导入到电脑上进行删除,没办法我就是想整点不一样的,学了python就是喜欢整点骚操作。(手动滑稽) 所以下面就在手机上使用python进行一波骚操作。。。
继续查看http://45.126.123.80:118/t.php 一堆代码,获取各种信息。。。
这里所说的相连是指处于同一个局域网的环境下,有问题请看上一篇Auto.js脚本开发环境搭建。
前几天去国图拍了一本书,一本心理学方面的书,也许你问我为什么不去买一本,或者去网上找pdf。其实吧,关于心理学方面的书可以说在市面上一抓就是一堆,至于拍这本书两个原因,一个是没有什么收藏价值不值得我去买,只适合应急用,然后就是这本书的作者写作特点和其他大众的不太一样,可以说是有特点或者偏门,于是我就在手机上拍了一堆的图片,后来整理成了pdf,但是昨天我看的时候原图片文件还在快上千了吧,一个一个选择删除真是删烦了, 也许你会说为什么不导入到电脑上进行删除,没办法我就是想整点不一样的,学了python就是喜欢整点骚操作。(手动滑稽) 所以下面就在手机上使用python进行一波骚操作。。。
ruda 是手机浏览器中的开发者工具,是一个JS插件,在自己的页面中引入即可 Eruda 的由来 Eruda 的作者以前在手机中进行页面开发时,感觉日志输出非常麻烦,经常使用类似 window on
在开发安卓微信页面时,刚开始一般是会在PC上进行,等到开发后期的自测阶段再转到安卓模拟器上、转到各种真机上自测,上线了如果出问题还需要在真机上调试测试。
用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳。有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就需要我们进行微调。 在pc上微调后发布到测试环境再在手机上看效果,开发很慢,效率很低。这时候就想着有一个可以在手机上调试的工具,可以随时更改参数随时看到手机上的效果,免去发布再测试、模糊估计参数不精准的麻烦,weinre就是一个这样的工具。 weinre可以在PC上远程调试手机上的
最近在开发微信公众号网页的时候,由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug,但这些bug只会在固定的机型或者部分手机复现,电脑端调试以及大部分手机都是没有问题的。
前天在悟空问答的时候,很荣幸被邀请参加回答“在手机上可以用来学习编程的软件有哪些?”这个问题,之前在微信群有人问过我,我当时在悟空回答的首页看到一个头条大微(小小猿爱嘻嘻)的回答,觉得十分受用,在此将其整理好,发布给大家一起学习,希望对大家学习编程有帮助。感谢大佬提供的解答,原文可以点击原文链接进行查看。
最近在 手机上要显示 PDF 文件,在搜索引擎上找到了很多方案,大体上有以下几种:
前天在悟空问答的时候,很荣幸被邀请参加回答“在手机上可以用来学习编程的软件有哪些?”这个问题,当时在回答的首页看到一个头条大微(小小猿爱嘻嘻)的回答,觉得十分受用,在此将其整理好,发布头条给大家学习,希望对大家学习编程有帮助。感谢大佬提供的解答,原文可以点击拓展链接进行查看。
公众号的H5网页,里面跑的语言是JS,本质是脚本语言.是没有能力调用硬件的API的. 微信这个是本地APP,本身就有很多调用硬件的能力,比如拍照,扫码,速度计,GPS定义等等. 那就我们就可以在微信里面打开公众号的网页,这个网页调用微信,微信调用硬件不就可以了.能做的事情就很多了.
前段时间接触了下Auto.js(https://github.com/hyb1996/Auto.js),很好上手而且挺有意思,于是写了个微信红包监测脚本 大概思路是,不断获取手机屏幕截图,发现新消息则进入,如果进一步发现了红包,则点击红包并打开 由于Auto.js只能在安卓上安装,所以脚本同样仅适用于安卓 Auto.js简介 适用于安卓的脚本工具 一个主要由无障碍服务实现的,不需要Root权限的自动操作软件 可以实现自动点击、滑动、输入文字、打开应用等功能 更详细的介绍可以参考项目官方Github 下载链接
Html5 新增了 WebWorker ,可以把用时长的任务放在后台线程运行,而不影响前台的操作。 想必小伙伴们都不想因为网页加载而一个网页内的按钮都点不了吧。 在 Html4 和 JavaScript 创建的网页程序中,处理是单线程的。很容易出现超时无响应的情况。 如以下代码。
说到逆向APP,很多人首先想到的都是反编译,但是单看反编译出来的代码很难得知某个函数在被调用时所传入的参数和它返回的值,极大地增加了逆向时的复杂度,有没有什么办法可以方便地知道被传入的参数和返回值呢?
/**************2016年5月4日 更新**************************/
星期2是公众号更新的一个时间点,Shawn这几天情事太多,眼看就快要过12点了,公众号教程看来今天黄呀!但是不发晚上睡不着呀,看来我是中了得到罗胖的毒“死磕自己”,一定要把公众号给发了。还好之前留着大神Colin的一些文章,还没在公众号上推送过,我立马读了一下,任然有不少收获,现将这篇文章分享给大家,在此感谢Colin!
eruda与腾讯推出的vconsole很相似,都是用于移动端的调试,让开发者在移动端的浏览器中获得近似PC端浏览器的调试能力。 截止至本文发稿之日,eruda在GitHub上已经有2.7K个star
昨天下班后,王小闰在朋友圈看到很多城市都下雨了,有位童鞋发了一张他下班后在等车的照片,让我的朋友王小闰感触颇深,让他回忆起了当年在杭州工作的职场生活,于是将这张图拿来当做了文章插图。
作者|林鑫 原文|http://imweb.io/topic/59559c01ad7fa941029740aa 前言 在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片旋转了90度的问题,包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题,横拍出来的照片就正常显示。因此,可以通过获取手机拍照角度来对照片进行旋转,从而解决这个问题。 Orientation 这个参数并不是所有图片都有的,不过手机拍出来的图片是带有这个参数的。 旋转角度 参数值 0° 1 顺时针90° 6
此时可以看到dist目录的文件图标由 W 变成了 A,说明此时的web项目已经变成了移动APP项目 ,而且此时生成了一个新的文件manifest.json
-----------------------------------------------------
上面说 weinre 是一个远程 web 调试器。说到了它的发音,还挺幽默,哈哈。
学习 : 视频开发教程 喜欢逛GitHub的小伙伴都知道,它有个查看最热项目的功能叫trending,但这个功能只能在网页上查看, 而且在手机上浏览显示效果很不友好,而我想在地铁上,餐厅,路上等空余的时间使用它,所以我需要一款带有这个功能的App, 不仅于此,我还想要在这款App上查询GitHub上我所喜欢的项目,甚至在手机没网的时候也能看到,而且我想要我的iOS和Android手机都能使用这款App, 于是GitHub Popular便诞生了。 这个项目满足了我如下3方面的需求: 在手机App
Frida 通过 C 语言将 QuickJS 注入到目标进程中,获取完整的内存操作权限,达到在程序运行时实时地插入额外代码和数据的目的。官方将调用代码封装为 python 库,当然你也可以直接通过其他的语言调用 Frida 中的 C 语言代码进行操作。
领取专属 10元无门槛券
手把手带您无忧上云