版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
对于前端开发来说,在pc端使用chrome等浏览器的开发者工具简直是好用到爆,Chrome手机模拟器可以帮助开发调试移动端web页面,然而在真机内调试起移动端web页面的时候就显得无从下手。目前已经有不少移动端的真机调试工具,本人在综合使用后推荐以下两类调试方案:chrome/safari真机调试 和 spy-debugger调试。
最近要分析web页面,在安卓和ios上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。
微言: Chris Gardner:You want something. Go get it! 克里斯·加德纳:有了目标就要全力以赴。
之前在公司调试Hybrid其实很蛋疼。。都是本地打开zip包,运行js,然后调试,每次都要找到zip,比较麻烦,后来发现了这个远程调试的方法,直接插上手机就可以调试了,不用那么麻烦了,而且可以直接在手机上看到实时的效果。 后来发现有一些Js前端开发还不会这个方法,今天就分享出来,大家都看看,有啥问题请多指点。 1.首先iPhone连接上Mac,点击信任,确保itunes连接成功,然后打开iPhone的“设置” - “Safari” - “高级” - 打开“JavaScript” 和 “Web检查器”
之前在公司调试Hybrid其实很蛋疼。。都是本地打开zip包,运行js,然后调试,每次都要找到zip,比较麻烦,后来发现了这个远程调试的方法,直接插上手机就可以调试了,不用那么麻烦了,而且可以直接在手机上看到实时的效果。
之所以写这个总结,还要从上周的一次移动端项目的 debug 说起。那天,测试小姐姐拿着自己的 iphone6s 过来找我,说页面打不开。我想:这怎么可能,我手机里挺好的呀,Chrome调试工具也没报错呀!就把她手机拿过来看了看,发现一进去还真就是一片空白。WTF(手动黑人问号)!!!那问题就来了,开发环境下没报错,可真机又出现了意料之外的情况,而且没法像 PC端 那样祭出 F12 大法,怎么定位问题并解决呢?最后凭借着我(谷歌)的聪明才智,找到了媲美 PC端 调试体验的方式。在此总结一波,献给各位被移动端真机调试折磨,而又无从下手的前端er们,话休烦絮,直接奉上:
日常遇到的劫持一般为DNS劫持,可在路由器里强制指定公共DNS解决。本文记录了自己家用宽带HTTP劫持的发现过程。相比DNS劫持,HTTP劫持则更为流氓,解决起来也比较棘手。
大多数App会选择H5去实现某些弱交互但是却需要热更新界面,这时候WebView就派上用场了,那么如何对WebView进行调试呢?
平时开发小程序可以在开发者工具中进行调试,开发者工具提供了类似 Chrome DevTools 的调试面板,对于前端开发者来说入门门槛比较低。
前端爱好者的聚集地 背景 最近在做微信、QQ、微博中使用js唤起App,之前也做过类似的功能,不过比较粗糙,考虑的情况不太全,而且那已经是很久之前的事情了,很多技术都已过时,现在有体验更好,功能更加完善的唤起技术,之前的很多的方案,到了现在都已是不太必要了,现在通过这篇文章分享给大家一个全面的、最新的唤起方案,希望对大家有帮忙。 最终实现的效果 用户点击H5页面的打开App或者下载按钮(这个按钮可能在一个下载入口页、各种分享页面的吸顶或吸底的banner),如果用户已经安装了App,则根据业务跳转到相
后退方法history.go(-1)如果无法后退时,会返回一个undefined,利用这一点来判断是否可以后退,不能后退时执行window.close();
最近在搞一个 jQuery v2.1.4 DOM-XSS 漏洞的复现,在网上找了很多Payload都不能用,大多数Payload都只适用于 jQuery v1.x 版本的。
前段时间,项目在进行 JWT 改造,用户的身份认证从 cookie 改成了 token。
代码思想很简单,就是打开控制台时,将页面跳转到空白页,关键在于判断控制台是否被打开。 这里写了两个方法,一个是适用于Safari的observeSafari,另一个是适用于Chrome、Firefox等浏览器的observe方法。
相较于pc端,移动端调试要更加丰富一些,下面对调试的方法进行简单汇总。 主要分为以下几点:
在安卓上面可以使用adb链接电脑,使用Chrome Inspect进行调试网页(QQ/微信的x5内核也可以),但是自从换了iPhone之后就没有这个乐趣了,所以我便开始摸索起来如果使用Chrome Inspect来调试safari浏览器(因为iPhone上面的QQ/微信没有x5内核,所以只能调试safari了)
背景是这样的,我在用 Safari看hackingwithswift这个网站时,感觉上方的一直固定的红色的和黑色的两条,如下图,太醒目了,于是便想,如何能把它们移除.
移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试工具weinre 其他方案 附录:ES6标准兼容情况 页面容器 移动设备上的各种浏览器 chrome、safari、firefox、samsung browser
2)客户端通过OpenUrl调起Safari,再二次跳转到data url 技术实现方案是首先通过调起Safari,然后跳到一个Data URI Scheme形式下的HTML页面,而添加到主屏幕的也是这个Data URI Scheme形式下的HTML页面。 OpenUrl调起Safari的实现为: [[UIApplicationsharedApplication] openURL:[NSURL URLWithString:@"http:www.xxx.com"]]; 通过该方法即可调起Safari,让Safari访问附带的URL链接,在该功能实现中,URL链接指向一个Data URI Scheme形式下的HTML页面。如下图所示:
HTTP 基础知识大家掌握的怎么样呀?对于长连接这一块的内容应该也不是什么新鲜东西了吧。毕竟 HTTP1.1 都已经发布这么久了。今天主要来看的就是长连接相关的配置,另外还会介绍几个和连接有关的内容。同时,今天的内容除了 HTTP 外,还需要一点 TCP 的知识。没办法,毕竟 Ngxin 本身就是一个网络代理服务器软件,离不开的就是各种网络相关的知识。相信大家肯定没问题的,毕竟很早前在短视频中就说过,基础能比我差的程序员估计在全国范围内都找不到几个了。
作者 | Ashley 译者 | 核子可乐 策划 | 丁晓昀 近期 Safari 推出了 16.4 版本,新版本给我们带来的不是便利、而是又一场恐怖的噩梦。我们是基于浏览器的游戏开发应用 Construct 的软件商,Safari 16.4 这个早期版本则在项目打开、项目预览和使用现有项目内容等各个方面都对 Construct 造成了毁灭式的打击。这里我想分享一点个人经验,让各位客户、开发者、监管机构乃至苹果自己感受到我们在 Safari 的这次例行发布中受到了怎样的折磨。 大多数浏览器都会提供预
由于移动端网页开发不能直接打开developer tools,导致我们调试起来稍微麻烦。好在我们有解决方案: Remote Devices 谷歌为我们提供的开发利器,让我们可以在电脑端使用developer tools进行elements检查和network监测,非常方便快捷。 使用方式:
前言 我们大前端团队内部 📖每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。 这一期共整理了 10 个问题,和相应的参考答案,文字和图片较多,建议大家可以收藏,根据文章目录来阅读。 之前分享的每周内容,我都整理到掘金收藏集 📔《EFT每周一练》 上啦,欢迎点赞收藏咯💕💕。 内容回顾: 《EFT 每周分享 —— Hybrid App 应用开发中 5 个必备知识点复习》 《EFT 每周分享 —— HTTP 的15个常
查看网站: http://tongji.baidu.com/data/browser
这两天使用 Angular2 遇到的一个 @angular/router 的 bug:
这里我们有一个指向恶意网站的 href 属性,并以 _blank 属性为 target,使其在新标签页中打开。
在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途。
近期,我一直在研究macOS上的一些持久化技术,尤其是如何利用低等级用户权限来修改文件以影响用户交互。对于macOS终端用户来说,交互最频繁的当属Dock了。
上面说 weinre 是一个远程 web 调试器。说到了它的发音,还挺幽默,哈哈。
在介绍JSAPI模式之前,首先需要介绍一下微信内置浏览器。可能很多人注意到了,在打开微信“朋友圈”链接的时候会出现进度条,如图5.1所示,这实际上就是微信内置浏览器访问页面的进度。也就是说,“朋友圈”是通过微信内置的浏览器访问的手机页面,并且微信浏览器是在微信安装时内置在微信中的。
原文地址:http://blog.csdn.net/freshlover/article/details/42640253
起因 今天刷推特的时候发现Cyber Security@cyber__sec的推文让人眼前一亮: Crash firefox, chrome, safari browsers, and also restart iPhone using this javascript code. #dos #0day #exploit //使用下面这段JavaScript代码能让firefox,chrome,safari浏览器崩溃,而且还能让iPhone重启。 继续在推特上深挖发现IT Security
本文是直接把seleniumpyppeteer 以及正常打开浏览器 的环境差异直接列出来
早在 2007 年初,苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。
浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
IOS设备在需要对时间戳进行判断的时候,如果不是使用的/则会出现问题,所以需要进行格式转换
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了)。拿来调试DeveMobile 与EaseMobile 主题 时候发现了不少问题,现在在一个个解决中。其中一个就是这个iOS Web APP中点击链接跳转到Safari 浏览器新标签页(窗口)的问题。 问题说明 iOS 上的Safari 浏览器中有一个“发送到屏幕”的功能(虽然很多小白用户都不知道这个),用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的,展示形式跟原生的应用是一样并最大限度
我们写代码的多多少少有一些出错的几率,掌握Debug还是很重要的,记得第一次入行写企业系统时,对此一无所知,后来还是去网路上以及问前辈,我印象中还是在博客园里看到有人用firebug,才知道原来有firefox这样的浏览器,那是在2010年的夏天。
iOS 上的Safari 浏览器中有一个“发送到屏幕”的功能(虽然很多小白用户都不知道这个),用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的,展示形式跟原生的应用是一样并最大限度地模拟本地APP 的效果(当然,需要开发者本身做一些代码层面的设置,见《将你的网站打造成一个iOS Web App》、《iOS / Android 移动设备中的 Touch Icons》这两篇文章)。此所谓 Web APP 是也。 DeveMobile 与EaseMobile 主题 也有这个功能。不过,现在发现了个问题,就是通过主屏幕上点击进入Web APP 形式的网页时候,点击任何一个链接就会跳转到Safari 浏览器并新建一标签页打开所属链接——这个功能真心恶心,如果这样的话还是Web APP吗?真不知苹果怎么想的,人家安卓的也不会这样啊。
Google Chrome可以即时翻译网页。可是,如果你用惯了Safari,不想安装Google Chrome,又需要对外文网页即时翻译,那么,请看下面:
我们的浏览器厂商很多,我们在日常生活中就常用到谷歌、safari、火狐、qq等浏览器。
我们通过 html、css 描述页面,浏览器会解析然后一帧帧渲染,通过 js 改变 dom 后,浏览器会重新计算布局信息然后渲染。
Sublime Text有一个缺点,当你想使用浏览器浏览你的html页面的时候,你需要在你的文件上点击鼠标右键,选择Open In Browser才可以浏览器浏览,而这是用默认浏览器浏览,如果想用第二个浏览器都没办法. 所以,可以通过SideBarEnhancements这个插件来更方便的浏览
有道翻译在咱们的日常学习工作中也是经常被用到,有道翻译提供即时免费的中文、英语、日语、韩语等多种语言的翻译,今天我们就来研究一下有道翻译的网页版,是否能通过对网页的爬取做一个简易的翻译小工具呢,一起来看看吧!
笔者之前做一个实时监控应用的时候,曾搜索过一些将 iPhone 的摄像头拍摄的画面实时传输到浏览器的方案,一个都没有。
前言 我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。 这一期共整理了 10 个问题,和相应的参考答案,文字和图
小技巧:不同类型的数据从 console 中打印出的颜色也不相同,可以借此判断数据类型
📷 经过七年的酝酿和开发,SRS在6.0中终于正式支持了HEVC(H.265),几乎全面支持,包括RTMP、FLV、SRT、TS、HLS、DASH、GB28181、WebRTC(Safari)、DVR
领取专属 10元无门槛券
手把手带您无忧上云