Menu

宝山网页设计公司:web页面调试技能不方便,使用第三方工具

<返回列表
宝山网页设计公司

调试是Web开发的一个组成部分。可以使用调试器和控制台完成PC的调试。对于那些对控制台感兴趣的人,您可以查看Chrome调试技能控制台。

但是,如果我们的网页需要与移动设备兼容,则调试变得不那么容易。在本文中,我将介绍几种第三方工具,以帮助您完成移动Web的调试。

在移动端有许多调试工具,以下是市场上流行的。有几种工具具有不同的特性,适当的使用场景也不同。您可以根据自己的需要选择。

mf_5d6099cb738b9.jpeg

Mac+Ios+Safari Chrome+Android

Mac+Ios+Safari

如果您有Mac计算机和iPhone或iPad,则可以通过数据线连接计算机和移动终端,然后在Mac上的iPhone Safari浏览器中调试打开的网页。

此方法适用于满足以下要点的情况

高级开发人员(你钱)用mac和iphone/ipad

页面只需要在Safari浏览器中正常运行,它与微信浏览器和Android不兼容

以下是如何使用它

第一步打开iphone手机的开发者模式,流程是:【设置】->【Safari】->【高级】->开启【Web检查器】,如图

mf_5d6099cb928bc.png

第二步:打开Mac上Safari的开发者模式,流程是【Safari】->【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】勾选

mf_5d6099cbb2c1e.png

用数据线将iphone手机和mac连接起来,在电脑的safari中按照流程执行:【开发】->【手机名称】->【正在调试的网站】

mf_5d6099cbce8ba.png

最后,就可以按照调试pc端页面的思路来调试ios的页面了

mf_5d6099cbf341d.png

Chrome+Android

以前的Android系统,Chrome移动浏览器

适用于PC的Chrome浏览器

使用方法

1.使用usb将移动网段连接到PC;

2.在移动部分选择“开发者选项” - >“USB调试”;

3.打开PC的侧面镶边,在地址栏中输入chrome: //inspect并选择“发现usb设备”。您可以看到我们的移动设备,如下所示。mf_5d6099cc2afd4.png 4.单击inspect(必须在线),您可以开始调试mf_5d6099cc67ce5.png

优点:你可以调试js

缺点:仅限Chrome浏览器

weinre

API参考:http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

weinre原理

mf_5d6099cc8c59b.png

调试客户端(客户端):本地WebInspector,远程调试客户端。

调试服务器:本地HTTP服务器与调试目标页面的调试客户端通信。

调试登陆页面(目标):正在调试的页面,页面已嵌入到远程weinre js中。

客户端,登录页面和调试服务器使用XMLHttpRequest(XHR)进行HTTP通信。其通常的用例是在桌面开发环境中配置客户端和调试服务器以及在移动设备上配置调试登录页面。由于Weinre调试客户端基于Web Inspector的开发,并且Web Inspector仅与主要的WebKit浏览器兼容,因此只能通过在Chrome/Safari中打开Weinre客户端来调试它。

weinre使用方法

在要测试的页面的标题中插入脚本

Src='http://myIp: port/target/target-script-min.js #anonymous'type='text/javascript'&gt;

或者通过npm安装weinre

//全局安装命令

Sudo npm instal -g weinre

宝山网页设计公司 然后键入命令行

Weinre --boundHost [主机名| IP地址| -all-] --httpPort [port] //开始weinre

boundHost是一个可以访问weinre服务器的设备。默认值为localhost。我们可以对其进行全面配置,以确保移动和本地环境可以使用weinre。

httpPort必须是非活动端口,默认值为8080.如果8080已经忙,则必须在另一个端口上手动配置

确保调试页面所在的设备与当前开发环境(包括调试客户端和调试服务器)位于同一网段中

最后,使用Chrome或Safari打开我们启动时配置的IP和端口,因为我使用的启动命令是

Weinre --boundHost 10.13.1.91 --httpPort 8889

所以我在浏览器中打开的页面是

如果您的开始成功,则开始页面应如下所示mf_5d6099cca8f5b.png

单击调试客户端用户界面链接。目标目录是当前weinre监控的所有页面。mf_5d6099ccc3e5c.png

url中的标识对应于嵌入在#

脚本中的脚本添加的标识

制表符的使用与Chrome的

相同

移动终端在调试过程中无法重现屏幕,否则连接将丢失

vConsole Eruda

vConsole和Eruda一起解释的原因是因为它们在使用和功能方面非常相似。

eruda

官方网站

使用方法

首先用npm安装eruda

Npm安装eruda --save

然后将以下代码添加到页眉

Src='node_modules/eruda/eruda.min.js'&gt;

Src='//cdn.jsdelivr.net/npm/eruda'>

Eruda.init();

最后,运行页面后,eruda标志将出现在右下角。触摸该标志时,调试框将出现在当前页面的底部。 ! [图片](截图 )

vConsole

vConsole是由腾讯开发的移动调试工具。官方网站:

使用方法

将以下代码嵌入头部

Src='https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js'>

//init vConsole

Var vConsole=new VConsole();

效果如下

mf_5d6099cce62a7.png

单击vconsole打开调试框

eruda 和 vConsole 的优缺点

优点:你不需要其他硬件,你只需要有一个移动终端,就可以调试页面。调试可以在任何浏览器中完成,因此可以用来解决兼容性错误。

缺点:调试工具的使用取决于正常的页面加载。如果页面未打开,则不会显示该按钮;调试框占用大多数页面,调试效率低;操作按钮行为将影响页面,例如ios系统。有一个经典问题:输入框出现后页面更改导致模糊问题。使用eruda或vconsole进行调试时,单击按钮相当于移动页面,问题不再存在。

关于移动端web调试的总结:

如今,移动网络开发正变得越来越流行,调试移动网页变得越来越重要。前文总结了几种流行的移动调试工具,但存在一些问题。在这个阶段,当学生遇到与移动调试相关的问题时,他们可以返回到文章开头的表格,并根据他们的需要选择相同的工具。

宝山网页设计公司mf_5d6099cd1b12a.jpeg

更多阅读

南安企业网站设计:推荐几个网站访问统计分...

厦门网站建设 2019-09-24
网络分析工具可以帮助您收集,预测和分析对您网站的访问,使其成为网站优化和研究的非常有用的工具。市场。 网站开发的每个人和所有者都想知

厦门外贸网站开发:PR越大是否对排名有推...

厦门网站建设 2019-09-24
点击主题即可获得更多精彩内容! 网站的内部链接是事先计划和长期积累的过程。 内链站具有控制能力,持续持久性将具有稳定的SEO效果。内部链接的

宁德高端网站建设:网站除了搜索引擎还有那...

厦门网站建设 2019-09-14
SEO优化不再是网站流量的完整来源,搜索引擎流量也在逐渐减少。 不要形成网站优化的心态。以前网站的优化主要是SEO,但现在有明显的变化,

南安建设网站:企业网站怎么进行优化

厦门网站建设 2019-09-14
如何优化企业网站?如何进行网站优化?随着互联网时代的兴起,很多公司都建立了自己的官方网站,但很多公司认为通过建立官方网站,我们网站上会有很

南安营销网站开发:网站优化推广解决方案的...

厦门网站建设 2019-09-14
关于优化网络推广网站的建议 我认为很大一部分优化人员已经受到SEO网站优化计划的影响,所以今天我会写一个网站优化计划供大家参考。一般而

厦门营销网站建设:公司为什么需要进行seo...

厦门网站建设 2019-09-03
这里是厦门南希网站建设—小杨的每天分享~很多公司不明白为什么SEO(搜索引擎优化),SEO的作用是什么? 百度的搜索结果是由两
返回全部博文

Copyright © 2014-2019 低调seo厦门网站建设公司,厦门网络公司,厦门网站制作公司,厦门网站开发公司,版权所有

站点地图
扫描二维码关注我们:低调seo厦门网络公司
确 认