【Chrome】Chrome-devtools:对ios-safari移动端的H5页面进行调试(ios-webkit-debug-proxy)-阿里云开发者社区

开发者社区> 行者武松> 正文

【Chrome】Chrome-devtools:对ios-safari移动端的H5页面进行调试(ios-webkit-debug-proxy)

简介:
+关注继续查看

说在前头

要看干货的,可跳过该“说在前头”章节

该类文章,百度上“一挖一麻袋”,但说句不好听的,“一个能打的都没有”,总结如下:

  1. scoop:win7下,搞这个都烦的一批,到最后“scoop install ios-webkit-debug-proxy”,跟我说要翻墙?
  2. 下了一堆有的没的npm插件,最后还是没法用。
  3. 到最后一步了,NMP跟我讲“能看,但没法debug调试”,我砸键盘了好吗?
  4. ......

吓得我赶紧放了一张老婆镇楼

镇楼

既然写了这篇文章,说明这类问题都已经解决了,那我们言归正传,讲讲我们要 实现什么

chrome-devtools对IOS移动端的H5页面进行调试

简单来说,就是 ——

我对“提交”btn绑定了“console.log(1)”则,我点击移动端H5页面的“提交”时,PC端的Chrome会输出1

有人问了

Q:我移动端的H5页面一样可以放到PC端的chrome下进行调试啊,为什么要调试真机呢?比如:

反方意见

A:这个还是要看需求的,如果你的业务不需要,自然也就不需要了,举个栗子:

  1. App嵌入H5时,你如何调试一些原生交互,如何知道原生是否定义了方法?
  2. 对H5页面进行多指触摸的时候,PC端如何模拟并响应调试?
  3. 运用一些第三方插件库或API的时候,内含严苛的判断,非真机不好调试,咋弄?
  4. ......

接下来就是干货了,让你任意调试H5页面,WebView页面,查看该APP是否存在WebView以及找到它的线上地址!


一、环境(测试成功的案例)

  1. PC chrome浏览器(版本45、46)
  2. IOS safari浏览器(11.2.6)
  3. win系统(win7、win10)
  4. 一根USB数据线

二、软件工具准备

我全放在github集成了,开不开心,please star,fork

github:chrome_ios_safari_ios-webkit-debug-proxy

这里最好“Download ZIP”,下拉不知道要拉几年

当然为了防止“Download ZIP”也很慢,所以我把文件的源地址在这儿逐一列出,可自行分别下载,都是必须的

  1. iTunes
  2. ios-webkit-debug-proxy-1.8-win64-bin.zip
  3. Chrome45.0.2454.85_64_installer

TIPS:谷歌为45版本是有原因的,当然最新的也可以,后面会讲,总归会麻烦一点

当然如果失效的话,来我github里慢慢down,(^▽ ^)


三、设置iphone Safart浏览器

设置 > Safart浏览器 > 高级 > 打开Web检查器

如下图:

iphone01


四、打开iTunes,以及数据线连接

iphone连接上PC后,会有“是否信任该计算机”的提示,都按确认,iTunes也将会检索到该iphone设备。有以下图,则说明连接成功。

iTunes01


五、打开ios-webkit-debug-proxy-1.8-win64-bin解压的目录

例如,我是解压在F盘的,放个图观摩下

win01

打开cmd,进入该盘下,执行以下命令

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

出现以下提示,则连接成功!

cmd01


六、核心教程

上面说到端口监听为9221,则打开chorme45输入http://127.0.0.1:9221/

45-01

点击“逗逗”(也就是你的设备),你会发现里面是空白的,说明你还没有打开H5页面,用safari打开一个H5页面,刷新chrome,就会发现多了几条数据

45-02

划重点,你对你需要调试的页面,进行审查元素,我这边举例调试“百度”

将该地址复制到地址栏,则进入调试界面!

45-04iphone02

宁哥!宁哥!哦,走错片场了。 控制台输入

alert('Hello World!')

移动端弹出,成功

iphone03

控制台死活按不下去的,说的就是你,高版本chrome,等会聊

我们对“百度一下”这个btn进行一个DIY的绑定,试试控制台是否真的好用

点击ios上的“百度一下”,果然弹出了true,OK

接下来,我们试试断点,点进我们刚才绑定的方法,进入chrome缓存中,进行断点调试

点击“百度一下”,发现进不去!接下来就是黑科技 ——

双击右上角箭头按钮

45-0745-08

再点击“百度一下”发现进来了!输入this,返回的就是当前btn dom元素

45-09

在此鼓掌(^▽ ^)

你说你怎么知道这儿有效的?......一口老血,一把辛酸泪


七、无法调试的另类问题集合

1、Chrome高版本控制台无法输入的问题

问题描述:chrome其他版本,也一样只需要双击右上角的断点箭头,就能debugger调试,不过控制台却死活按不下去 解决方案:按F12,控制台有一堆抛错,每次控制台回车,右边会增加一条error提示

58-01

点击控制台抛错提示,将该行判断“if(error){console.error(error) ......”改成“if(!error){console.error(error)......” 也就是把它掉,然后ctrl+s解决问题。 TIPS:如果被刷新的话,又得重来,就这点来说,并不是很方便。

在这儿,请教一下大神,有没有方式可让inspector.js永久映射到workspace,解决刷新重来的方式

2、Chrome断开连接

问题描述:chrome下出现“Detached from the target”字样,调试中止

45-10

解决方案:cmd开启的服务“ios_webkit_debug_proxy”重开,清除chrome缓存,重启chrome解决,以及不要干一些黑操作,该调试页面极不稳定。

3、cmd打开debug_proxy服务时,连接不上手机,未有响应

问题描述:执行“ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html”该语句时,如下展示

cmd02

没有连接设备的响应,或返回error,warn等提示未有设备连接 解决方案:查看iTunes是否连接上你的设备,重新插拔一下USB接口,重启服务乃至重启电脑进行尝试,如仍不行,请下载其他版本进行尝试

github:google/ios-webkit-debug-proxy

TIPS:要注意的是,如果这步已经跪了,那打开chrome输入9221的端口也一定是空白页。

4、Chrome低版本无法调试的问题

问题描述:在30-版本的情况下,无法调出inspector.html调试页面

解决方案:30+版本,已经废弃devtools.html页,30以下chrome应在url中输入

chrome-devtools://devtools/devtools.html?ws=localhost:9222/devtools/page/1

则进入调试页。

TIPS:page/1与9222是端口9221中审查dom元素内的传值,应保持一致。


关于

make:o︻そ╆OVE▅▅▅▆▇◤(清一色天空)

blog:http://blog.csdn.net/mcky_love

掘金:https://juejin.im/user/59fbe6c66fb9a045186a159a/posts

lofter:http://zcxy-gs.lofter.com/

github:https://github.com/gs3170981?tab=repositories

sf:https://segmentfault.com/u/mybestangel/articles


结束语

鬼知道我尝试了多少个解决方案,下载了多少个chrome版本,那些无用的文章写出来,加上一堆的分享党占屏百度首页

你的良心不会疼吗?

也难怪说,谷歌是最好的搜索引擎,心酸。



原文发布时间:2018年06月29日
原文作者:清一色天空
本文来源掘金,如需转载请紧急联系作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
chrome爬页面上表格某列的数据
有的时候会有这样一个需求,页面上有个大表格,我需要复制里面的一列到本地。比如,我要从表格里面,复制列出来的所有机器IP(这样比数据库导出方便点~) 首先,先用chrome的开发者工具,找到要复制的列中的某一个单元格,然后选择复制xpath。这样会复制下来这个元素的xpath路径,比如: //
2829 0
第二十四章:页面导航(十五)
保存和恢复页面状态特别是当您开始使用多页面应用程序时,将应用程序的页面视为数据的主要存储库非常有用,而仅仅是作为底层数据的临时可视化和交互式视图。这里的关键词是暂时的。如果您在用户与之交互时保持基础数据是最新的,那么页面可以显示和消失而不必担心。
491 0
fbh
Chrome浏览器强制刷新页面(不使用缓存)
在Chrome浏览器中按下F5或 Ctrl+F5 都没用,Chrome总是会强制使用页面缓存进行刷新,如何不使用页面缓存进行刷新? Chrome官方推荐使用如下快捷键,就可以不使用页面缓存进行刷新 Windows和Linu...
3873 0
第二十四章:页面导航(十三)
App类中介在Xamarin.Forms应用程序中,在公共代码项目中执行的第一个代码是通常名为App的类的构造函数,该类派生自Application。 在程序终止之前,此App对象保持不变,并且程序中的任何代码都可以通过静态Application.Current属性使用它。
378 0
第二十四章:页面导航(七)
操纵导航堆栈有时需要改变正常的面向堆栈的导航流程。例如,假设页面需要来自用户的一些信息,但首先它导航到提供一些指令或免责声明的页面,然后从那里导航到实际获取信息的页面。当用户完成并返回时,您将希望跳过包含说明或免责声明的页面。
477 0
html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计
序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例 一,背景:目前移动端大多数图片或视频列表页面的显示,列出...
988 0
+关注
行者武松
杀人者,打虎武松也。
17142
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载