精华内容
下载资源
问答
  • H5 移动端调试全攻略

    2020-10-11 18:22:54
    文章来源:http://jartto.wang/2018/11/01/mobile-debug/随着移动设备的高速发展,H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就...

    文章来源:http://jartto.wang/2018/11/01/mobile-debug/

    随着移动设备的高速发展,H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧,修 Bug 于无形。

    一、概要

    因为移动端操作系统分为 iOSAndroid 两派,所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式,才能让你事半功倍。

    文章会列举目前适合移动端调试的多种方案,快来选择你的最佳实践吧!

    二、iOS 设备

    Safari:iphone 调试利器,查错改样式首选,需要我们做如下设置:

    • 浏览器设置:Safari - 偏好设置 - 高级 - 勾选「在菜单栏中显示开发」菜单

    • iphone 设置:设置 - Safari - 高级 - 打开 Web 检查器

    大功告成,这时候通过手机的 Safari 来打开 H5 页面,我们通过浏览器开发选项可以看到:

    iOS 模拟器:不需要真机,适合调试 WebviewH5 有频繁交互的功能页面。

    首先下载 Xcode ,运行项目,选择模拟器 iphonex,编译后就会打开模拟器,如下:

    可以看到 H5 已经在「壳子」中运行起来了,下来就可以尝试调用 Webview 的方法,和「壳子」交互了。更多的调试技巧可以参考文章:iOS 模拟器调试。

    具体的调试功能还是依赖浏览器的开发选项,与上无异,就不赘述了。

    三、抓包

    Charles:Mac OS 系统首选的抓包工具,适合查看、控制网络请求,分析数据情况。

    Charles 抓包首先需要配置手机代理,Wifi - 配置代理(IP 地址) - 手动,如下图:

    配置好手机代理,这时候打开 Charles ,就会收到确认提醒,选择允许。接下来就可以捕获手机的请求了,但是这些都是常规操作,我们来点高级的。

    有意思的是:我们可以用本地文件来替换线上文件,方便调试,远程定位线上问题。

    选择 Structure,找到需要替换的文件,右键菜单 - Map Local,如下图:

    这时候就会打开一个弹窗,填写具体的配置:

    OK,大功告成,快去改动本地文件吧,从此再也不怕线上调试了。需要注意的是如果抓取 HTTPS 请求,要安装信任证书,下文会详细说明。

    与之相应的是 Windows 平台的 Fiddler,功能大致相似,这里就不细说了。

    四、Spy-Debugger

    spy-debugger:移动端调试的利器,便捷的远程调试手机页面、抓包工具。

    我们先来安装:

    > sudo npm install spy-debugger -g
    

    启动命令:

    > spy-debugger
    

    这时候,控制台会打印出如下信息,说明服务已经启动了:

    正在启动代理
    本机在当前网络下的IP地址为:10.200.24.46
    node-mitmproxy启动端口: 9888
    浏览器打开 ---> http://127.0.0.1:50389
    

    最后一步,设置手机代理:10.200.24.46,端口号:9888。补充说明一下:

    • Android 设置代理步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动

    • iOS 设置代理步骤:设置 - 无线局域网 - 选中网络 - HTTP 代理手动

    接下来,尝试一下抓包:

    再打开调试页面:

    HTTPS 抓包,需要安装根证书,下文会详细说明。

    五、Whistle

    上面推荐了一款操作简单的调试利器,升级一下,看看更加强大的调试工具 whistle

    whistle:基于 Node 实现的跨平台 Web 调试代理工具。

    whistle(读音[ˈwɪsəl],拼音[wēisǒu])是基于 Node实现的跨平台抓包调试代理工具,有以下基本功能:

    1. 查看 HTTPHTTPS请求响应内容

    2. 查看 WebSocketSocket 收发的帧数据

    3. 设置请求 hosts、上游 http/socks 代理

    4. 修改请求 url 、方法、头部、内容

    5. 修改响应状态码、头部、内容,并支持本地替换

    6. 修改 WebSocketSocket 收发的帧数据

    7. 内置调试移动端页面的 weinrelog

    8. 作为 HTTP 代理或反向代理

    9. 支持用 Node 编写插件扩展功能

    大致了解后,我们来尝试安装:

    sudo npm install -g whistle
    

    淘宝镜像:npm install whistle -g –registry=https://registry.npm.taobao.org

    whistle 安装完成后,执行命令 whistle helpw2 help,查看 whistle 的帮助信息:

    run       Start a front service
    start     Start a background service
    stop      Stop current background service
    restart   Restart current background service
    help      Display help information
    

    这里只列出部分命令,更多请 w2 help 查看。

    看到上面的操作,我们何不试试缩写 w2 start 来启动服务:

    w2 start
    

    看到如下的输出,说明服务已经正常启动了:

    这时候在浏览器打开链接,同时手机上配置代理(同 Charles),接下来就可以愉快的调试了。值得注意的是,whistle 的功能远非如此,更多的扩展请移步官网文档,贴张图先预览下:

    记得开启拦截 HTTPS:勾选 Capture HTTPS CONNECTs

    六、安装 HTTPS 证书

    对于 Charles,按照如下操作安装证书:

    help-SSL - Proxying - install Charles root
    

    弹出安装证书的提示框:

    按照提示去手机浏览器打开:chls.pro/ssl,安装信任证书即可。

    对于 spy-debuggerHTTPS 抓包,需要安装根证书,选择 RootCA,扫描二维码按照提示信任证书。安装证书的时候需要注意以下几件事情:

    1.手机必须先设置完代理后再通过(非微信)手机浏览器访问 http://s.xxx (地址二维码)安装证书;
    2.手机首次调试需要安装证书,已安装了证书的手机无需重复安装;
    3.手机和 PC 保持在同一网络下(比如同时连到一个 WIFI 下);

    切记:移动设备和 PC 必须在一个 WIFI 下。

    七、真机调试

    上面说了很多,但是实际开发过程中,我们不会等上线了才去验证兼容性,所以你可能需要提前「真机调试」。这里提供两种方式:

    Chrome Remote Devices:依赖 Chrome 来进行远程调试,适合安卓手机。

    首先,开启 Android 手机的「开发者选项」,勾选 「USB 调试」。
    然后,Chrome 中输入:chrome://inspect,进入调试页面。

    很全面的一篇文章,可以参考:Chrome 远程调试。

    localhostip,扫描二维码手机显示,这个比较简单。

    可以在浏览器安装一个 Chrome 插件,用于将当前页面链接转换成二维码,这样就能边开发边真机预览,非常方便。

    八、调试工具

    这里推荐一款调试工具:vConsole,一个轻量、可拓展、针对手机网页的前端开发者调试面板。安装很简单:

    npm install vconsole
    

    如果未使用 AMD/CMD 规范,可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展,建议在 <head> 中引入:

    <head>
      <script src="path/to/vconsole.min.js"></script>
      <script>
     var vConsole = new VConsole();
      </script>
    </head>
    

    如果使用了 AMD/CMD 规范,可在 module 内使用 require() 引入模块:

    var VConsole = require('path/to/vconsole.min.js');
    var vConsole = new VConsole();
    

    请注意,VConsole 只是 vConsole 的原型,而非一个已实例化的对象。

    所以在手动 new 实例化之前,vConsole 不会被插入到网页中。大概功能如下图:

    看起来很完美,但是有个小缺点:网络请求,需要刷新页面,可是很多内嵌的 H5 页面是没有机会刷新页面的,所以需要客户端童鞋配合增加刷新的功能方便调试。

    九、场景分析

    既然移动端调试有这么多种方案,那在实际操作中,我该如何取舍?

    说了这么多钟方案,这里总结一下各个方案的适用场景,根据不同的场景去选择最佳的调试方案,这样才能更快速的输出,Carry 全场:

    1.SafariiPhone 调试利器,查错改样式首选;
    2.iOS 模拟器:不需要真机,适合调试 WebviewH5 有频繁交互的功能页面;
    3.CharlesMac OS 系统首选的抓包工具,适合查看、控制网络请求,分析数据情况;
    4.Fiddler:适合 Windows 平台,与 Charles 类似,查看、控制网络请求,分析数据情况;
    5.Spy-Debugger:移动端调试的利器,便捷的远程调试手机页面、抓包工具;
    6.Whistle:基于 Node 实现的跨平台 Web 调试代理工具;
    7.Chrome Remote Devices:依赖 Chrome 来进行远程调试,适合安卓手机远程调试静态页;
    8.localhostip:真机调试,适合远程调试静态页面;
    9.vConsole:内置于项目,打印移动端日志,查看网络请求以及查看 CookieStorage

    十、白屏处理

    移动端的白屏是最头疼的问题,这里顺带提供几种分析问题的思路,以供参考。

    1.方案分析 ☆

    一般上线后出现问题,我们最容易想到的就是:是否是新代码引起的问题。所以有效解决手段就是「控制变量法」。

    2.代码注释法 ☆

    莫名奇妙的白屏,适合页面无异常日志,同时无请求发送,问题集中在单一页面的情况。这种问题比较直观,肯定是某一页面出现了代码异常或是无效的 return,导致页面渲染终止,但并不属于异常。这时候,「代码注释法」将是你的最佳选择,逐行去注释可以代码,直到定位问题。

    3.类库异常,兼容问题 ☆

    这种场景也会经常遇到,我们需要用可以调试页面异常的方式,如 SafariSpy-DebuggerWhistlevConsole 查看异常日志,从而迅速定位类库位置,从而找寻替换或是兼容方案。

    4.try catch ☆☆

    如果你的项目没有异常监控,那么在可疑的代码片段中去 Try Catch 吧。

    5.Debug 包 ☆☆☆

    在你的项目中装上 [vConsole](https://link.zhihu.com/?target=http%3A//jartto.wang/2018/11/01/mobile-debug/),并配合客户端 debug 插件,360 度无死角监控异常,这才是最有效的方式。

    6.ES6 语法兼容 ☆

    一般我们都会通过 Babel 来编译 ES6 ,但是额外的第三方类库如果有不兼容的语法,低版本的移动设备就会异常。所以,先用上文讲述的调试方法,确定异常,然后去增加 [polyfill](https://link.zhihu.com/?target=https%3A//polyfill.io/v2/docs/examples) 来兼容吧。

    最后
    
    欢迎关注「前端瓶子君」,回复「交流」加入前端交流群!
    回复「算法」,你可以每天学习一道大厂算法编程题(阿里、腾讯、百度、字节等等)或 leetcode,瓶子君都会在第二天解答哟!
    另外,每周还有手写源码题,瓶子君也会解答哟!
    》》面试官也在看的算法资料《《
    “在看和转发”就是最大的支持
    
    展开全文
  • 【前端面试题】—21道有关移动端面试题(附答案) 前端发展到今天,移动端的流量已经超越了PC端。比如对绝大部分人来说,每天使用手机上网的时间要远高于使用笔记本电脑、计算机的上网时间。因此移动端变得越来越...

    【前端面试题】21道有关移动端的面试题(附答案)

    前端发展到今天,移动端的流量已经超越了PC端。比如对绝大部分人来说,每天使用手机上网的时间要远高于使用笔记本电脑、计算机的上网时间。因此移动端变得越来越重要。每个人的手机屏幕大小不同、系统不同,因此移动端屏幕的响应式适配、移动端兼容性、浏览器的操作Bug等是移动端部分的面试题主要考察的内容。

    1、在移动端,单击穿透是什么?

    单击穿透现象有3种。

    • 单击穿透问题:单击蒙层(mask)上的“关闭”按钮,蒙层消失后,发现触发了按钮下面元素的 click事件。

    • 页面单击穿透问题:如果按钮下面恰妤是一个有href属性的a标签,那么页面就会发生跳转。

    • 跨页面单击穿透问题:这次没有蒙层了,直接单击页内按钮跳转至新页,然后发现新页面中对应位置元素的 click事件被触发了。

    有4种解决方案。

    (1)只用 touch。

    这是最简单的解决方案,完美解决单击穿透问题,把页面内所有 click都换成 touch事件( touchstart、 touched、tap)。

    (2)只用 click

    因为单击会带来300ms的延迟,所以页面内任何一个自定义交互都将增加300ms的延迟。

    (3)轻触〔tap)后延迟350ms再隐藏蒙层。

    改动最小,缺点是隐藏蒙层变慢了,350ms还是能感觉到慢的。

    (4)添加 pointer-events:none样式。

    这比较麻烦且有缺陷,不建议使用。蒙层隐藏后,给按钮下面的元素添上pointer-events:none样式,让 click穿过去,350ms后去掉这个样式。恢复响应的缺陷是蒙层消失后的350ms内,用户单击按钮下面的元素没反应,如果用户单击速度很快,一定会发现。

    2、如何实现自适应布局?

    通过以下几种方式实现。

    (1)可以使用媒体查询做响应式页面。

    (2)用 Bootstrap的栅格系统。

    (3)使用弹性盒模型。

    3、在移动端( Android、ioS)怎么做好用户体验?

    从以下几方面做好用户体验

    (1)清晰的视觉纵线。

    (2)信息的分组。

    (3)极致的减法。

    (4)利用选择代替输入。

    (5)标签及文字的排布方式。

    (6)依靠明文确认密码。

    (7)合理地利用键盘。

    4、如何解决 Android浏览器查看背景图片模糊的问题?

    这个问题是 devicePixelRatio的不同导致的,因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,所以苹果系统当初就把 iPhone4的960×640像素的分辨率在网页里更改为480×320像素,这样 devicePixelRatio=2。

    而 Android的 device PixelRatio比较乱,值有1.5、2和3。

    为了在手机里更为清晰地显示图片,必须使用2倍宽高的背景图来代替img标签(一般情况下都使用2倍)。

    例如一个div的宽高是100px×100px,背景图必须是200px×200px,然后设置 background-size;contain样式,显示出来的图片就比较清晰了。

    5、如何解决长时间按住页面出现闪退的问题?

    通过以下代码设置样式。

    element {-webkit-touch-callout:none;}

    6、如何解决 iPhone及iPad下输入框的默认内阴影问题?

    通过以下代码设置样式。

    element { -webkit-appearance:none;}

    7、在iOS和 Android下,如何实现触摸元素时出现半透明灰色遮罩?

    通过以下代码设置样式。

    element {-webkit-tap-highiight-color:rgba (255, 255, 255, 0)}

    8、在旋转屏幕时,如何解决字体大小自动调整的问题?

    通过以下代码设置样式。

    html, body, form, fieldset, p, div, hl, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:100%;}

    9、如何解决 Android手机圆角失效问题?

    通过 background-clip:padding-box为失效的元素设置样式。

    10、如何解决0S中 input键盘事件 keyup失效问题?

    通过以下代码解决。

    <input type='text' id='testInput"><script type="text/javascript">document. getElementById('testInput') .addEventListener('input', function(e){var value =e .target .value;});</script>

    11、如何解决iOS设置中 input按钮样式会被默认样式覆盖的问题?

    设置默认样式为none。解决方式如下。

    input,textarea { border:0;-webkit-appearance:none;}

    12、如何解决通过 transform进行skew变形、 rotate旋转会出现锯齿现象的问题?

    通过以下代码设置样式。

    -webkit-transform:rotate(-4deg) skew(10deg) translateZ(0);transform:rotate(-4deg) skew(10deg) translateZ(0);outline:lpx solid rgba(255, 255, 255, 0);

    13、如何解决移动端 click事件有300ms延迟的问题?

    300ms延迟导致用户体验不好。为了解决这个问题,一般在移动端用 touchstart、 touchend、 touchmove、tap(模拟的事件)事件来取代 click事件。

    14、在iOS中,以中文输入法输入英文时,如何解决字母之间可能会出现六分之一空格的问题?

    可以用正则表达式去掉空格。

    this .value =this .value .replace ( / \u2006/g,' ')

    15、如何解决移动端HTML5音频标签audio的 autoplay属性失效问题?

    因为自动播放网页中的音频或视频会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和 Android系统通常都会禁止自动播放和使用 JavaScript的触发播放,必须由用户来触发才可以播放。

    解决这个问题的代码如下。

    document addEventListener (' touchstart', function( ) {//播放音频document .getElementsByTagName ('audio ) [0]. play ( );//暂停音频document getElementsByTagName ('audio) [0]. pause ( );});

    16、如何解决移动端HTML5中date类型的input标签不支持 placeholder属性的问题?

    代码如下。

    < input placeholder = "请输入日期 " type="text" onfocus="(this .type='date')" name="date">

    17、如何通过HTML5调用 Android或iOS的拨号功能?

    HTML5提供了自动调用拨号的标签,只要在a标签的href中添加tel:协议就可以了。

    拨打固定电话的代码如下。

    < a href="te1:021-12345678">单击拨打021-12345678</a>

    拨打手机号码的代码如下。

    < a href="te1:12345678901">单击拨打12345678901</a>

    18、如何解决上下拖动滚动条时的卡顿问题?

    通过以下代码设置样式。

    body { -webkit-overflow-scrolling:touch; overflow-scrolling:touch;

    Android3+和iOS5+支持CSS3的新属性 overflow- scrolling,该属性也可以解决上述问题。

    19、如何禁止复制或选中文本?

    通过以下代码设置样式。

    Element {-webkit-user-select:none;-moz-user-select:none ;-khtml-user-select:none ;user-select:none;

    20、如何解决 Android手机的默认浏览器不支持 websocket的问题?

    解决办法就是把通信层的websocket改成websocket+http双协议,对外封装成Net。业务层对 websocket的调用都改成对Net的调用。

    Net默认连接websocket,如果不攴持,就自动切换到http长轮询。

    http的长轮询在使用的时候会有卡顿现象。

    21、说说你所知道的移动端响应式适配的方法。

    对于简单一点的页面,一般高度直接设置成固定值,宽度一般撑满整个屏幕。

    对于稍复杂一些的页面,利用百分比设置元素的大小来进行适配,或者利用flex等CSS属性设置一些需要定制的宽度。

    对于再复杂一些的响应式页面,需要利用CSS3的媒体查询属性来进行适配,大致思路是根据屏幕的大小,设置相应的CSS。

     

    展开全文
  • 前端发展到今天,移动端的流量已经超越了PC端。比如对绝大部分人来说,每天使用手机上网的时间要远高于使用笔记本电脑、计算机的上网时间。因此移动端变得越来越重要。每个人的手机屏幕大小不同、系统...

    前端发展到今天,移动端的流量已经超越了PC端。比如对绝大部分人来说,每天使用手机上网的时间要远高于使用笔记本电脑、计算机的上网时间。因此移动端变得越来越重要。每个人的手机屏幕大小不同、系统不同,因此移动端屏幕的响应式适配、移动端兼容性、浏览器的操作Bug等是移动端部分的面试题主要考察的内容。

    1、在移动端,单击穿透是什么?

    单击穿透现象有3种。

    • 单击穿透问题:单击蒙层(mask)上的“关闭”按钮,蒙层消失后,发现触发了按钮下面元素的 click事件。

    • 页面单击穿透问题:如果按钮下面恰妤是一个有href属性的a标签,那么页面就会发生跳转。

    • 跨页面单击穿透问题:这次没有蒙层了,直接单击页内按钮跳转至新页,然后发现新页面中对应位置元素的 click事件被触发了。

    有4种解决方案。

    (1)只用 touch。

    这是最简单的解决方案,完美解决单击穿透问题,把页面内所有 click都换成 touch事件( touchstart、 touched、tap)。

    (2)只用 click

    因为单击会带来300ms的延迟,所以页面内任何一个自定义交互都将增加300ms的延迟。

    (3)轻触〔tap)后延迟350ms再隐藏蒙层。

    改动最小,缺点是隐藏蒙层变慢了,350ms还是能感觉到慢的。

    (4)添加 pointer-events:none样式。

    这比较麻烦且有缺陷,不建议使用。蒙层隐藏后,给按钮下面的元素添上pointer-events:none样式,让 click穿过去,350ms后去掉这个样式。恢复响应的缺陷是蒙层消失后的350ms内,用户单击按钮下面的元素没反应,如果用户单击速度很快,一定会发现。

    2、如何实现自适应布局?

    通过以下几种方式实现。

    (1)可以使用媒体查询做响应式页面。

    (2)用 Bootstrap的栅格系统。

    (3)使用弹性盒模型。

    3、在移动端( Android、ioS)怎么做好用户体验?

    从以下几方面做好用户体验

    (1)清晰的视觉纵线。

    (2)信息的分组。

    (3)极致的减法。

    (4)利用选择代替输入。

    (5)标签及文字的排布方式。

    (6)依靠明文确认密码。

    (7)合理地利用键盘。

    4、如何解决 Android浏览器查看背景图片模糊的问题?

    这个问题是 devicePixelRatio的不同导致的,因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,所以苹果系统当初就把 iPhone4的960×640像素的分辨率在网页里更改为480×320像素,这样 devicePixelRatio=2。

    而 Android的 device PixelRatio比较乱,值有1.5、2和3。

    为了在手机里更为清晰地显示图片,必须使用2倍宽高的背景图来代替img标签(一般情况下都使用2倍)。

    例如一个div的宽高是100px×100px,背景图必须是200px×200px,然后设置 background-size;contain样式,显示出来的图片就比较清晰了。

    5、如何解决长时间按住页面出现闪退的问题?

    通过以下代码设置样式。

    element {
    -webkit-touch-callout:none;
    }
    

    6、如何解决 iPhone及iPad下输入框的默认内阴影问题?

    通过以下代码设置样式。

    element 
    {
     -webkit-appearance:none;
    }
    

    7、在iOS和 Android下,如何实现触摸元素时出现半透明灰色遮罩?

    通过以下代码设置样式。

    element {
    -webkit-tap-highiight-color:rgba (255, 255, 255, 0)
    }
    

    8、在旋转屏幕时,如何解决字体大小自动调整的问题?

    通过以下代码设置样式。

    html, body, form, fieldset, p, div, hl, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:100%;
    }
    

    9、如何解决 Android手机圆角失效问题?

    通过 background-clip:padding-box为失效的元素设置样式。

    10、如何解决0S中 input键盘事件 keyup失效问题?

    通过以下代码解决。

    <input type='text' id='testInput">
    <script type="text/javascript">
    document. getElementById('testInput') .addEventListener('input', function(e){var value =e .target .value;
    });
    </script>
    

    11、如何解决iOS设置中 input按钮样式会被默认样式覆盖的问题?

    设置默认样式为none。解决方式如下。

    input,
    textarea {
     border:0;
    -webkit-appearance:none;
    }
    

    12、如何解决通过 transform进行skew变形、 rotate旋转会出现锯齿现象的问题?

    通过以下代码设置样式。

    -webkit-transform:rotate(-4deg) skew(10deg) translateZ(0);
    transform:rotate(-4deg) skew(10deg) translateZ(0);
    outline:lpx solid rgba(255, 255, 255, 0);
    

    13、如何解决移动端 click事件有300ms延迟的问题?

    300ms延迟导致用户体验不好。为了解决这个问题,一般在移动端用 touchstart、 touchend、 touchmove、tap(模拟的事件)事件来取代 click事件。

    14、在iOS中,以中文输入法输入英文时,如何解决字母之间可能会出现六分之一空格的问题?

    可以用正则表达式去掉空格。

    this .value =this .value .replace ( / \u2006/g,' ')
    

    15、如何解决移动端HTML5音频标签audio的 autoplay属性失效问题?

    因为自动播放网页中的音频或视频会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和 Android系统通常都会禁止自动播放和使用 JavaScript的触发播放,必须由用户来触发才可以播放。

    解决这个问题的代码如下。

    document addEventListener (' touchstart', function( ) {
    //播放音频
    document .getElementsByTagName ('audio ) [0]. play ( );
    //暂停音频
    document getElementsByTagName ('audio) [0]. pause ( );
    });
    

    16、如何解决移动端HTML5中date类型的input标签不支持 placeholder属性的问题?

    代码如下。

    < input placeholder = "请输入日期 " type="text" onfocus="(this .type='date')" name="date">
    

    17、如何通过HTML5调用 Android或iOS的拨号功能?

    HTML5提供了自动调用拨号的标签,只要在a标签的href中添加tel:协议就可以了。

    拨打固定电话的代码如下。

    < a href="te1:021-12345678">单击拨打021-12345678</a>
    

    拨打手机号码的代码如下。

    < a href="te1:12345678901">单击拨打12345678901</a>
    

    18、如何解决上下拖动滚动条时的卡顿问题?

    通过以下代码设置样式。

    body {
     -webkit-overflow-scrolling:touch;
     overflow-scrolling:touch;
    

    Android3+和iOS5+支持CSS3的新属性 overflow- scrolling,该属性也可以解决上述问题。

    19、如何禁止复制或选中文本?

    通过以下代码设置样式。

    Element {
    -webkit-user-select:none;
    -moz-user-select:none ;
    -khtml-user-select:none ;
    user-select:none;
    

    20、如何解决 Android手机的默认浏览器不支持 websocket的问题?

    解决办法就是把通信层的websocket改成websocket+http双协议,对外封装成Net。业务层对 websocket的调用都改成对Net的调用。

    Net默认连接websocket,如果不攴持,就自动切换到http长轮询。

    http的长轮询在使用的时候会有卡顿现象。

    21、说说你所知道的移动端响应式适配的方法。

    对于简单一点的页面,一般高度直接设置成固定值,宽度一般撑满整个屏幕。

    对于稍复杂一些的页面,利用百分比设置元素的大小来进行适配,或者利用flex等CSS属性设置一些需要定制的宽度。

    对于再复杂一些的响应式页面,需要利用CSS3的媒体查询属性来进行适配,大致思路是根据屏幕的大小,设置相应的CSS。

    推荐阅读

    【前端面试题】—19道有关前端测试的面试题(附答案)

    【前端面试题】—26道HTTP和HTTPS的面试题(附答案)

    【前端面试题】11—18道有关模块化开发的面试题(附答案)

    【前端面试题】10—21道关于性能优化的面试题(附答案)

    【前端面试题】09—44道常见Augluar基础面试题(附答案)

    本文完〜

    展开全文
  • 文章来源:http://jartto.wang/2018/11/01/mobile-debug/ 随着移动设备的高速发展,H5 开发也成为了 ... 如果这篇文章对你有帮助,「在看」是最大的支持 》》面试官也在看的算法资料《《 “在看和转发”就是最大的支持

    点击上方“蓝色字体”,选择“设为星标

    做积极的人,而不是积极废人!

    文章来源:http://jartto.wang/2018/11/01/mobile-debug/

    随着移动设备的高速发展,H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧,修 Bug 于无形。

    一、概要

    因为移动端操作系统分为 iOS 和 Android 两派,所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式,才能让你事半功倍。

    文章会列举目前适合移动端调试的多种方案,快来选择你的最佳实践吧!

    二、iOS 设备

    Safari:iphone 调试利器,查错改样式首选,需要我们做如下设置:

    • 浏览器设置:Safari - 偏好设置 - 高级 - 勾选「在菜单栏中显示开发」菜单

    • iphone 设置:设置 - Safari - 高级 - 打开 Web 检查器

    大功告成,这时候通过手机的 Safari 来打开 H5 页面,我们通过浏览器开发选项可以看到:

    iOS 模拟器:不需要真机,适合调试 Webview 和 H5 有频繁交互的功能页面。

    首先下载 Xcode ,运行项目,选择模拟器 iphonex,编译后就会打开模拟器,如下:

    可以看到 H5 已经在「壳子」中运行起来了,下来就可以尝试调用 Webview 的方法,和「壳子」交互了。更多的调试技巧可以参考文章:iOS 模拟器调试。

    具体的调试功能还是依赖浏览器的开发选项,与上无异,就不赘述了。

    三、抓包

    Charles:Mac OS 系统首选的抓包工具,适合查看、控制网络请求,分析数据情况。

    Charles 抓包首先需要配置手机代理,Wifi - 配置代理(IP 地址) - 手动,如下图:

    配置好手机代理,这时候打开 Charles ,就会收到确认提醒,选择允许。接下来就可以捕获手机的请求了,但是这些都是常规操作,我们来点高级的。

    有意思的是:我们可以用本地文件来替换线上文件,方便调试,远程定位线上问题。

    选择 Structure,找到需要替换的文件,右键菜单 - Map Local,如下图:

    这时候就会打开一个弹窗,填写具体的配置:

    OK,大功告成,快去改动本地文件吧,从此再也不怕线上调试了。需要注意的是如果抓取 HTTPS 请求,要安装信任证书,下文会详细说明。

    与之相应的是 Windows 平台的 Fiddler,功能大致相似,这里就不细说了。

    四、Spy-Debugger

    spy-debugger:移动端调试的利器,便捷的远程调试手机页面、抓包工具。

    我们先来安装:

    > sudo npm install spy-debugger -g
    

    启动命令:

    > spy-debugger
    

    这时候,控制台会打印出如下信息,说明服务已经启动了:

    正在启动代理
    本机在当前网络下的IP地址为:10.200.24.46
    node-mitmproxy启动端口: 9888
    浏览器打开 ---> http://127.0.0.1:50389
    

    最后一步,设置手机代理:10.200.24.46,端口号:9888。补充说明一下:

    • Android 设置代理步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动

    • iOS 设置代理步骤:设置 - 无线局域网 - 选中网络 - HTTP 代理手动

    接下来,尝试一下抓包:

    再打开调试页面:

    HTTPS 抓包,需要安装根证书,下文会详细说明。

    五、Whistle

    上面推荐了一款操作简单的调试利器,升级一下,看看更加强大的调试工具 whistle

    whistle:基于 Node 实现的跨平台 Web 调试代理工具。

    whistle(读音[ˈwɪsəl],拼音[wēisǒu])是基于 Node实现的跨平台抓包调试代理工具,有以下基本功能:

    1. 查看 HTTPHTTPS请求响应内容

    2. 查看 WebSocketSocket 收发的帧数据

    3. 设置请求 hosts、上游 http/socks 代理

    4. 修改请求 url 、方法、头部、内容

    5. 修改响应状态码、头部、内容,并支持本地替换

    6. 修改 WebSocket 或 Socket 收发的帧数据

    7. 内置调试移动端页面的 weinre 和 log

    8. 作为 HTTP 代理或反向代理

    9. 支持用 Node 编写插件扩展功能

    大致了解后,我们来尝试安装:

    sudo npm install -g whistle
    

    淘宝镜像:npm install whistle -g –registry=https://registry.npm.taobao.org

    whistle 安装完成后,执行命令 whistle help 或 w2 help,查看 whistle 的帮助信息:

    run       Start a front service
    start     Start a background service
    stop      Stop current background service
    restart   Restart current background service
    help      Display help information
    

    这里只列出部分命令,更多请 w2 help 查看。

    看到上面的操作,我们何不试试缩写 w2 start 来启动服务:

    w2 start
    

    看到如下的输出,说明服务已经正常启动了:

    这时候在浏览器打开链接,同时手机上配置代理(同 Charles),接下来就可以愉快的调试了。值得注意的是,whistle 的功能远非如此,更多的扩展请移步官网文档,贴张图先预览下:

    记得开启拦截 HTTPS:勾选 Capture HTTPS CONNECTs

    六、安装 HTTPS 证书

    对于 Charles,按照如下操作安装证书:

    help-SSL - Proxying - install Charles root
    

    弹出安装证书的提示框:

    按照提示去手机浏览器打开:chls.pro/ssl,安装信任证书即可。

    对于 spy-debuggerHTTPS 抓包,需要安装根证书,选择 RootCA,扫描二维码按照提示信任证书。安装证书的时候需要注意以下几件事情:

    1.手机必须先设置完代理后再通过(非微信)手机浏览器访问 http://s.xxx (地址二维码)安装证书;
    2.手机首次调试需要安装证书,已安装了证书的手机无需重复安装;
    3.手机和 PC 保持在同一网络下(比如同时连到一个 WIFI 下);

    切记:移动设备和 PC 必须在一个 WIFI 下。

    七、真机调试

    上面说了很多,但是实际开发过程中,我们不会等上线了才去验证兼容性,所以你可能需要提前「真机调试」。这里提供两种方式:

    Chrome Remote Devices:依赖 Chrome 来进行远程调试,适合安卓手机。

    首先,开启 Android 手机的「开发者选项」,勾选 「USB 调试」。
    然后,Chrome 中输入:chrome://inspect,进入调试页面。

    很全面的一篇文章,可以参考:Chrome 远程调试。

    localhost 转 ip,扫描二维码手机显示,这个比较简单。

    可以在浏览器安装一个 Chrome 插件,用于将当前页面链接转换成二维码,这样就能边开发边真机预览,非常方便。

    八、调试工具

    这里推荐一款调试工具:vConsole,一个轻量、可拓展、针对手机网页的前端开发者调试面板。安装很简单:

    npm install vconsole
    

    如果未使用 AMD/CMD 规范,可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展,建议在 <head> 中引入:

    <head>
      <script src="path/to/vconsole.min.js"></script>
      <script>
     var vConsole = new VConsole();
      </script>
    </head>
    

    如果使用了 AMD/CMD 规范,可在 module 内使用 require() 引入模块:

    var VConsole = require('path/to/vconsole.min.js');
    var vConsole = new VConsole();
    

    请注意,VConsole 只是 vConsole 的原型,而非一个已实例化的对象。

    所以在手动 new 实例化之前,vConsole 不会被插入到网页中。大概功能如下图:

    看起来很完美,但是有个小缺点:网络请求,需要刷新页面,可是很多内嵌的 H5 页面是没有机会刷新页面的,所以需要客户端童鞋配合增加刷新的功能方便调试。

    九、场景分析

    既然移动端调试有这么多种方案,那在实际操作中,我该如何取舍?

    说了这么多钟方案,这里总结一下各个方案的适用场景,根据不同的场景去选择最佳的调试方案,这样才能更快速的输出,Carry 全场:

    1.SafariiPhone 调试利器,查错改样式首选;
    2.iOS 模拟器:不需要真机,适合调试 Webview 和 H5 有频繁交互的功能页面;
    3.CharlesMac OS 系统首选的抓包工具,适合查看、控制网络请求,分析数据情况;
    4.Fiddler:适合 Windows 平台,与 Charles 类似,查看、控制网络请求,分析数据情况;
    5.Spy-Debugger:移动端调试的利器,便捷的远程调试手机页面、抓包工具;
    6.Whistle:基于 Node 实现的跨平台 Web 调试代理工具;
    7.Chrome Remote Devices:依赖 Chrome 来进行远程调试,适合安卓手机远程调试静态页;
    8.localhost 转 ip:真机调试,适合远程调试静态页面;
    9.vConsole:内置于项目,打印移动端日志,查看网络请求以及查看 Cookie 和 Storage

    十、白屏处理

    移动端的白屏是最头疼的问题,这里顺带提供几种分析问题的思路,以供参考。

    1.方案分析 ☆

    一般上线后出现问题,我们最容易想到的就是:是否是新代码引起的问题。所以有效解决手段就是「控制变量法」。

    2.代码注释法 ☆

    莫名奇妙的白屏,适合页面无异常日志,同时无请求发送,问题集中在单一页面的情况。这种问题比较直观,肯定是某一页面出现了代码异常或是无效的 return,导致页面渲染终止,但并不属于异常。这时候,「代码注释法」将是你的最佳选择,逐行去注释可以代码,直到定位问题。

    3.类库异常,兼容问题 ☆

    这种场景也会经常遇到,我们需要用可以调试页面异常的方式,如 SafariSpy-DebuggerWhistlevConsole 查看异常日志,从而迅速定位类库位置,从而找寻替换或是兼容方案。

    4.try catch ☆☆

    如果你的项目没有异常监控,那么在可疑的代码片段中去 Try Catch 吧。

    5.Debug 包 ☆☆☆

    在你的项目中装上 [vConsole](https://link.zhihu.com/?target=http%3A//jartto.wang/2018/11/01/mobile-debug/),并配合客户端 debug 插件,360 度无死角监控异常,这才是最有效的方式。

    6.ES6 语法兼容 ☆

    一般我们都会通过 Babel 来编译 ES6 ,但是额外的第三方类库如果有不兼容的语法,低版本的移动设备就会异常。所以,先用上文讲述的调试方法,确定异常,然后去增加 [polyfill](https://link.zhihu.com/?target=https%3A//polyfill.io/v2/docs/examples) 来兼容吧。

    最后

    欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

    回复「算法」,加入前端算法源码编程群,每日一刷(工作日),每题瓶子君都会很认真的解答哟!

    回复「交流」,吹吹水、聊聊技术、吐吐槽!

    回复「阅读」,每日刷刷高质量好文!

    如果这篇文章对你有帮助,「在看」是最大的支持

    》》面试官也在看的算法资料《《

    “在看和转发”就是最大的支持

    展开全文
  • 常见的H5C3面试题

    千次阅读 2020-02-27 18:09:54
    1: 移动端和PC端页面加载的内容是一样的,代码多了,会出现隐藏无用的元素,加载时间加长导致文件增大,影响加载速度,流量消耗也相对比较大。 2: 局限性,响应式局限性较大,不适合一些大型的门户网或者电商网站...
  • 1、移动端你们一般采用什么布局?移动端设计稿是多大的尺寸? ● 定宽布局 ● 一般移动端设计稿是640或者750的尺寸 2、移动布局自适应不同屏幕的几种方式 (1)响应式布局 (2)100%布局(弹性布局) (3)...
  • PC 端移动端什么的我不管甚至好多前端主要的工作内容就是开发移动端,因为移动端的内容五花八门:微信小程序、支付宝小程序、京东小程序、快应用、微信公众平台、微信小游戏、混合App、H5等…打开招聘软件,可以看到...
  • H5常见面试题及答案(一)

    千次阅读 2020-02-10 15:43:53
    h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容 noscript - 可选脚本内容(对于不支持...
  • 甚至好多前端主要的工作内容就是开发移动端,因为移动端的内容五花八门:微信小程序、支付宝小程序、京东小程序、快应用、微信公众平台、微信小游戏、混合App、H5等… 打开招聘软件,可以看到目前的岗位对前端的要求...
  • 甚至好多前端主要的工作内容就是开发移动端,因为移动端的内容五花八门:微信小程序、支付宝小程序、京东小程序、快应用、微信公众平台、微信小游戏、混合App、H5等… 打开招聘软件,可以看到目前的岗位对前端的要求...
  • 小编个人觉得PC端的定位就是用户视觉浏览路线,可以显示较多的内容,而移动互联网终端的定位就是便携。下面是小编给大家带来的html5面试题pc端和移动端区别介绍,感兴趣的朋友参考下
  • h5面试题总结

    2021-08-12 08:22:07
    组件化开发 移动端适配方案有哪些 viewport适配 通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度 vw适配 vw是相对单位,1vw表示屏幕宽度的1% rem适配 借助media实现rem适配 弹性盒子(flex)...
  • 1、1px边框在移动端中,如果给元素设置一个1px的像素边框的话,那么在手机上看起来是会比一个像素粗的。解决方法:使用伪类元素模拟边框使用transform缩放。2、click的300ms延迟问题在移动端中,click事件是生效的,...
  • html-js-移动端面试

    2020-12-12 16:10:46
    前端学科面试题 1:HTML页面进行重绘和重排(回流) 1.1 问题分析 ​ 该问题主要考核 html中的优化 与 重点概念 1.2 核心问题讲解 浏览器的运行机制: 构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成...
  • H5+css3面试题总结

    万次阅读 多人点赞 2019-08-22 08:59:41
    H5+css3面试题总结 哈喽,各位小伙伴们,又到了一年一度的毕业季,俗话说的话:毕业等于失业。一毕业就要面临着找工作的压力。我们程序员也是一样,程序员找工作更辛苦。因为还会有技术面试。所以我给大家总结了我...
  • 2021年前端面试题及答案

    万次阅读 多人点赞 2020-02-11 19:29:34
    前端面试汇总(2020年) 一 大纲 1、前言 2、前端工程化 3、前端设计模式 ...8、*前端基础知识点面试题 ...由于新冠肺炎疫情,现在成天呆在家里,加上也要准备面试,就在家里看面试题...
  • 移动端面试题

    2021-08-17 15:55:02
    1、在移动端,单击穿透是什么? 单击穿透现象有3种。 单击穿透问题:单击蒙层(mask)上的“关闭”按钮,蒙层消失后,发现触发了按钮下面元素的 click事件。 页面单击穿透问题:如果按钮下面恰妤是一个有href属性的...
  • h5面试题集合

    2016-11-03 17:58:00
    一.闭包的理解: 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。 闭包三个特性: 1.... 2....
  • mask') } 10、pc端与移动端字体大小的问题 html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6 { -webkit-text-size-adjust:100%; } pc端字体正常显示,但ios真机就出现,h1、span等标签字体比较大。 ...
  • H5+C3面试题总结

    2020-11-06 09:33:50
    3.支持本地离线存储 4.新增了canvas标签 5.新增视频和音频标签 ... localStorage 长期存储数据,浏览器关闭后数据不丢失 sessionStorage 数据在浏览器关闭后自动删除 ...1.去掉或者丢失样式的时候能够让页面呈现
  • 1、PC端和移动端有什么区别  从我个人角度来说,我觉得PC端的定位就是用户视觉浏览路线,可以显示较多的内容,而移动互联网终端的定位就是便携,体现的是“Anyone Anytime Anywhere”的理念,它不是替代PC的设备...
  • 如何阻止事件冒泡和默认事件
  • 微信小程序基础面试题 1.微信小程序的优劣势? 优势: ①容易上手,基础组件库比较全,基本上不需要考虑兼容问题; ②开发文档比较完善,开发社区比较活跃,支持插件式开发; ③良好的用户体验:无需下载,通过搜索...
  • 原标题:移动端常见面试题一:移动端兼容解决方案移动端 经常出现的兼容问题1.安卓浏览器看背景图片,有些设备会模糊因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机devicePixoRadio比较乱,有...
  • HTML5常见面试题PC端和移动端区别

    千次阅读 2019-03-28 10:06:23
    本篇文章小编就给大家分享一下HTML5常见的面试题,即PC端和移动端区别,下面和小编一起来了解一下吧。 PC端和移动端有什么区别: 从我个人角度来说,我觉得PC端的定位就是用户视觉浏览路线,可以显示较多的内容,而...
  • 1)一般而言,小公司做笔试;大公司面谈项目经验;做地图的一定考算法 2)面试官喜欢什么样的人 ü技术好、自信、谦虚、善于沟通、表达。 ü喜欢追究原理 5.2面试内容 1.2.1简历上的项目 ü介绍下你的项目吧?...
  • 面试题

    2021-01-08 01:17:32
    面试题 SEO优化,如何做?作为前端开发人员,你能做什么? web性能优化? 浏览器兼容性,常见的浏览器内核? h5和css3中新增的内容 position定位,有几种 区别是什么 flex弹性盒 rem和em和vw 盒模型 如何清除浮动 ...
  • 移动端兼容:主要概括了 H5 中经常遇到的样式问题、系统兼容问题、原生 App 混合开发的问题 小程序的兼容和优化:第二部分主要是针对微信小程序中遇到的兼容问题、开发过程中 API 的疑难点、小程序的优化点 希望通过...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,215
精华内容 886
关键字:

h5移动端面试题