如何用 Chrome DevTools 调试 iOS Safari

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用 Chrome DevTools 调试 iOS Safari相关的知识,希望对你有一定的参考价值。

1、在Android手机上安装Chrome(ChromeforAndroid)应用超市、或者google官网即可下载。2、电脑系统安装了最新版的Chrome最新版Chrome,确保开发者工具正常使用3、Android手机装了USB驱动在设备管理器查看是否正确安装了驱动,如无,则需要到手机的官网下载,例如:小米1S的驱动一、安装AndroidSDK下载AndroidSDK,,本人的机器是windows,下载的文件为adt-bundle-windows-x86,解压并释放到D:/soft/android/adt(你也可以选择其他路径)二、允许Android手机启用USB调试1、android系统设置:“设置”》“开发人员选项”》“USB调试”;2、手机上Chrome浏览器设置:打开Chrome浏览器,点击左下角菜单按键,“设置”》“开发者工具”》“启用USB网页调试”三、运行AndroidSDK1、设置环境变量:右击“我的电脑”》“属性”》“高级”》“环境变量”》编辑“PATH”变量值,在末尾添加“;D:softandroidadtsdkplatform-tools”2、运行adb打开cmd,输入如下命令:adbforwardtcp:9222localabstract:chrome_devtools_remote四、调试1、在手机上用Chrome打开需要调试的网站2、在电脑上用Chrome打开,3、调试点击需要调试的网站,熟悉的DeveloperTools就出来了,至此,利用Chrome在android手机上调试网站的方法告一段落。 参考技术A 安装 iTunes
Windows 系统首先要安装 iTunes ,打开 Apple 官网下载 iTunes 并完成 iTunes 安装,否则计算机无法正确识别 iPhone 设备。
开启调试模式
要远程调试 IOS Safari ,必须启用 Web 检查 功能,打开 iPhone 依次进入 设置 > Safari > 高级 > Web 检查 > 启用。
ios-webkit-debug-proxy
ios-webkit-debug-proxy 是一个 DevTools proxy ,项目托管在 Github 上。其使得开发者可以发送命令到真实(或虚拟)IOS设备中的 Safari 浏览器或 UIWebViews 。
安装部署
项目地址:https://github.com/artygus/ios-webkit-debug-proxy-win32。
在 Binaries 小节点击下载链接。
下载后完成解压缩,将ios-webkit-debug-proxy-win32 目录复制到 C:\ 盘。
在系统环境变量添加 C:\ios-webkit-debug-proxy-win32。
启动 proxy
打开命令行终端,执行:
ios_webkit_debug_proxy-win32.exe -f chrome-devtools://devtools/bundled/inspector.html

输出结果如下:
ios_webkit_debug_proxy-win32.exe -f chrome-devtools://devtools/bundled/inspector.html
Listing devices on :9221
Connected :9222 to iPhone (c356a29f73043a36aa6de64b088d55aeeda8f034)
开始调试
打开 chrome 浏览器,在地址栏输入 http://localhost:9221/ ,这里会显示所有已连接的设备清单,选择一个设备并点击打开。
打开的页面可看到当前 iphone 中 Safari 浏览器打开的所有页面,点击要调试的页面链接打开即可进入调试界面。此时可能会有一个错误提示如下
Note: Your browser may block1,2 the above links with JavaScript console error:
Not allowed to load local resource: chrome-devtools://...To open a link: right-click on the link (control-click on Mac), 'Copy Link Address', and paste it into address bar.

提示浏览器禁止页面加载本地资源,需在上面的链接上点击右键复制链接,然后手动新建一个标签页将链接粘贴进去,回车访问。
根据提示说明复制链接并打开,即可看到常见的 chrome 调试窗口。
接下来,就可以进行正常的调试工作了。

vue-devtools vue调试神器

vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。

chrome商店直接安装

vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要FQ才能下载。

手动安装

第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools

git clone https://github.com/vuejs/vue-devtools.git

第二步:安装项目所需要的npm包

npm install //如果太慢的话,可以安装一个cnpm, 然后命令换成 cnpm install

第三步:编译项目文件

npm run build

第四步:添加至chrome游览器

游览器输入地址“chrome://extensions/”进入扩展程序页面,点击“加载已解压的扩展程序...”按钮,选择vue-devtools>shells下的chrome文件夹。
/**
*如果看不见“加载已解压的扩展程序...”按钮,则需要勾选“开发者模式”。
*/
技术分享图片
技术分享图片

技术分享图片

技术分享图片

到此添加完成,效果图如下:

技术分享图片

 

技术分享图片

结语:vue-devtools如何使用

当我们添加完vue-devtools扩展程序之后,我们在调试vue应用的时候,chrome开发者工具中会看一个vue的一栏,点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的,上手非常的容易,这里就细讲其使用说明了。

技术分享图片

 

技术分享图片


以上是关于如何用 Chrome DevTools 调试 iOS Safari的主要内容,如果未能解决你的问题,请参考以下文章

聊聊 Chrome DevTools 中你可能不知道的调试技巧

vue(chrome)调试工具vue-devtools安装

chrome中安装Vue调试工具vue-devtools

在远程调试窗口调整 Chrome DevTools 的停靠位置

如何用chrome修改js代码,跳过网站等待时间

谷歌chrome浏览器vue调试工具vue-devtools的安装