版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
对于前端开发来说,在pc端使用chrome等浏览器的开发者工具简直是好用到爆,Chrome手机模拟器可以帮助开发调试移动端web页面,然而在真机内调试起移动端web页面的时候就显得无从下手。目前已经有不少移动端的真机调试工具,本人在综合使用后推荐以下两类调试方案:chrome/safari真机调试 和 spy-debugger调试。
最近要分析web页面,在安卓和ios上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。
之前在公司调试Hybrid其实很蛋疼。。都是本地打开zip包,运行js,然后调试,每次都要找到zip,比较麻烦,后来发现了这个远程调试的方法,直接插上手机就可以调试了,不用那么麻烦了,而且可以直接在手机上看到实时的效果。 后来发现有一些Js前端开发还不会这个方法,今天就分享出来,大家都看看,有啥问题请多指点。 1.首先iPhone连接上Mac,点击信任,确保itunes连接成功,然后打开iPhone的“设置” - “Safari” - “高级” - 打开“JavaScript” 和 “Web检查器”
之前在公司调试Hybrid其实很蛋疼。。都是本地打开zip包,运行js,然后调试,每次都要找到zip,比较麻烦,后来发现了这个远程调试的方法,直接插上手机就可以调试了,不用那么麻烦了,而且可以直接在手机上看到实时的效果。
相较于pc端,移动端调试要更加丰富一些,下面对调试的方法进行简单汇总。 主要分为以下几点:
大多数App会选择H5去实现某些弱交互但是却需要热更新界面,这时候WebView就派上用场了,那么如何对WebView进行调试呢?
之所以写这个总结,还要从上周的一次移动端项目的 debug 说起。那天,测试小姐姐拿着自己的 iphone6s 过来找我,说页面打不开。我想:这怎么可能,我手机里挺好的呀,Chrome调试工具也没报错呀!就把她手机拿过来看了看,发现一进去还真就是一片空白。WTF(手动黑人问号)!!!那问题就来了,开发环境下没报错,可真机又出现了意料之外的情况,而且没法像 PC端 那样祭出 F12 大法,怎么定位问题并解决呢?最后凭借着我(谷歌)的聪明才智,找到了媲美 PC端 调试体验的方式。在此总结一波,献给各位被移动端真机调试折磨,而又无从下手的前端er们,话休烦絮,直接奉上:
平时开发小程序可以在开发者工具中进行调试,开发者工具提供了类似 Chrome DevTools 的调试面板,对于前端开发者来说入门门槛比较低。
前言 我们大前端团队内部 📖每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。 这一期共整理了 10 个问题,和相应的参考答案,文字和图片较多,建议大家可以收藏,根据文章目录来阅读。 之前分享的每周内容,我都整理到掘金收藏集 📔《EFT每周一练》 上啦,欢迎点赞收藏咯💕💕。 内容回顾: 《EFT 每周分享 —— Hybrid App 应用开发中 5 个必备知识点复习》 《EFT 每周分享 —— HTTP 的15个常
上面说 weinre 是一个远程 web 调试器。说到了它的发音,还挺幽默,哈哈。
在安卓上面可以使用adb链接电脑,使用Chrome Inspect进行调试网页(QQ/微信的x5内核也可以),但是自从换了iPhone之后就没有这个乐趣了,所以我便开始摸索起来如果使用Chrome Inspect来调试safari浏览器(因为iPhone上面的QQ/微信没有x5内核,所以只能调试safari了)
不知道使用 ios 设备的博友在浏览本站页面的时候有没有发现一个问题,所有页面评论模块都是不显示的!(记得大胡子哥有评论提醒过我移动端不能评论,还问我是不是故意这样设置的,其实这就是个bug)通过 MAC 审查可以发现控制台报错了,似乎是一个正则语法问题,但这个问题一直以来都没有得到解决,直到今天为止。
我们写代码的多多少少有一些出错的几率,掌握Debug还是很重要的,记得第一次入行写企业系统时,对此一无所知,后来还是去网路上以及问前辈,我印象中还是在博客园里看到有人用firebug,才知道原来有firefox这样的浏览器,那是在2010年的夏天。
原文地址:http://blog.csdn.net/freshlover/article/details/42640253
小技巧:不同类型的数据从 console 中打印出的颜色也不相同,可以借此判断数据类型
移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试工具weinre 其他方案 附录:ES6标准兼容情况 页面容器 移动设备上的各种浏览器 chrome、safari、firefox、samsung browser
本文探讨了尾递归调用优化在JavaScript引擎中的实现细节,并分析了尾递归调用出现调用栈溢出的原因。文章提出了两种解决方案:1.显式地定义尾递归调用;2.采用尾调用优化语法。尾调用优化语法可以解决隐式优化和调用栈丢失的问题。
自2019.05.22日离职以来,自己在家浪了两天。然后发现,浪也该浪够了,该收心找下工作了。于是屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午,看到移动端调试这里,略有感受,于是提取了下内容
前言 我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。 这一期共整理了 10 个问题,和相应的参考答案,文字和图
由于移动端网页开发不能直接打开developer tools,导致我们调试起来稍微麻烦。好在我们有解决方案: Remote Devices 谷歌为我们提供的开发利器,让我们可以在电脑端使用developer tools进行elements检查和network监测,非常方便快捷。 使用方式:
我们通过 html、css 描述页面,浏览器会解析然后一帧帧渲染,通过 js 改变 dom 后,浏览器会重新计算布局信息然后渲染。
UIWebView 是苹果继承于 UIView 封装的一个加载 web 内容的类,它可以加载任何远端的web数据展示在你的页面上,你可以像浏览器一样前进后退刷新等操作。不过苹果在 iOS8 以后推出了 WKWebView 来加载 Web,并应用于 iOS 和 OSX 中,它取代了 UIWebView 和 WebView ,在两个平台上支持同一套 API。
去年大致也是这个事件,曾经探索过尾调用(PTC)相关的内容,并总结了一片文章——朋友你听说过尾递归吗。同时在文章的最后也留下了一个坑:
前言 我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。 这一期共整理了 10 个问题,和相应的参考答案,文字和
系统自带的编写自动化脚本的工具是ScriptEditor。打开编辑器,把语言从 AppleScript切换到JavaScritp。接下来我们就来实战一下,写一个每天自动发新人日报邮件的自动化脚本。具体流程是这样的:
有不少人梦想成为奎特尔星球上的一名创世之主,但之前却对奎特尔知之甚少,为是否要侵略奎特尔星球有所顾虑。要想要入侵奎特尔星球,表面上看起来容易,但稍有不注意容易迷失。Shawn在奎特尔星球上呆了有大半年了,再加上之前在奎特尔的兄弟星球cocos2d-js上开垦了三年,略有心得,愿与你分享。
一般来说,我们使用 height:100vh 进行全屏布局,这是一种很方便的响应式方法。
在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途。
前段时间,项目在进行 JWT 改造,用户的身份认证从 cookie 改成了 token。
Hi,大家好,我是CoCo。市面上有很多不同的浏览器,每种浏览器都有数百万用户。因此,在开发一个网站或 Web 应用程序时,就需要测试它与不同浏览器的兼容性。最好、最方便的方法是使用跨浏览器检查工具。
Web Spider Fiddler - JS Hook 基本使用:https://blog.csdn.net/EXIxiaozhou/article/details/128794705 网洛者 - 反反爬虫训练平台网址:https://wangluozhe.com/
内容来源:作者 | Jartto,http://jartto.wang/2018/11/01/mobile-debug/
前端领域的发展非常迅猛,大前端的时代到来了,据说每隔12-24个月,前端的难度将增加一倍,从下面的技术栈就可以看出前端领域的丰富度和复杂度 核心概念 HTML |-- DOM |-- Element |-- Attribute JavaScript |-- 原型 Prototype |-- 作用域 Scope |-- 闭包 Closure |-- JSON |-- AJAX CSS |-- 选择器 Selector |-- 优先级 |-- 特性 Specificity |-- 盒子模型 渲染引擎 |-- T
市面上有很多不同的浏览器,每种浏览器都有数百万用户。因此,在构建一个网站或 Web 应用程序时,就需要测试它与不同浏览器的兼容性。最好、最方便的方法是使用跨浏览器检查工具。
利用Browserslist可以动态获取满足条件的浏览器的特性,在每次编译时生成满足条件的浏览器范围,结合webpack插件obsolete-webpack-plugin,生成一个browser-update-tip.js文件,并在html中引入browser-update-tip.js
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了)。拿来调试DeveMobile 与EaseMobile 主题 时候发现了不少问题,现在在一个个解决中。其中一个就是这个iOS Web APP中点击链接跳转到Safari 浏览器新标签页(窗口)的问题。 问题说明 iOS 上的Safari 浏览器中有一个“发送到屏幕”的功能(虽然很多小白用户都不知道这个),用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的,展示形式跟原生的应用是一样并最大限度
IOS设备在需要对时间戳进行判断的时候,如果不是使用的/则会出现问题,所以需要进行格式转换
我们系统程序的漏洞就叫 bug。世界上第一个 bug ,是 1946 年霍普发现了第一个电脑上的 bug,竟然是一只飞蛾“臭虫”。解决这些问题的过程叫做捉虫、调试,也就是 Debug。
最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间戳进行比较,在做的时候个人习惯使用chrome作为调试工具,
爬与反爬,就相当于矛与盾,攻与防,与普通爬虫相比,反爬虫愈发普遍,相对于普通爬虫,逆向爬虫的困难度提升了不少,非常考验选手的专业素养,当然也难倒了本渣渣这种业余选手。
Cypress和TestCafe这两个工具相比于Selenium都更加的轻量级,且在不同的方面有了改进,比如安装更简单,增加了内置等待机制,调试更加方便等。
官网地址: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
大致过程如上,在实际的展示过程中,有些是可以并行的。比如html、css下载。这就涉及到http1.1协议的下载局限和浏览器支持的并发数量了。
Weinre(Web Inspector Remote),是一种远程调试工具。功能与Firebug及chrome调试器类似,可以帮助我们即时更改页面元素、样式,调试JS等。
你是否曾经在编写网页时遇到过一些难以捉摸的问题?或者想要深入理解网页背后的运行机制?今天,我们将一起探索网页开发者模式这一强大工具,并通过它进行有效的调试。
近日,腾讯开源跨端框架 Hippy,一周即吸引3000+star。在腾讯内部,Hippy 已运行3年之久,跨 BG 共有 18 款线上业务正在使用 Hippy,日均 PV 过亿,且已建立一套完整生态。相较于其他跨端框架,Hippy 对前端开发者更友好:紧贴 W3C 标准,遵从网页开发各项规则,使用 JavaScript 为开发语言,同时支持 React 和 Vue 两种前端主流框架。本文为大家介绍了Hippy 常用调试方法和常见问题案例,希望能够帮助开发者快速上手。
领取专属 10元无门槛券
手把手带您无忧上云