通过chrome在windows中调试运行在iphone-safari上的页面

大道至简 大道至简     2022-08-22     432

关键词:

本文重点讨论如何在 Windows 系统中通过chrome 浏览器调试运行在 iPhone Safari 浏览器中的网页。如果你有一台 iMac/MacBook,可忽略该文档。iMac 环境下,直接通过 USB 将 iphone 与 iMac/MacBook 链接,之后在 iMac/MacBook 中打开 Safari 进入调试模式,即可对运行在手机中的页面进行调试。详情见:Using Web Inspector to Debug Mobile Safari 或 Safari Web Inspector Guide

安装 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 调试窗口。

接下来,就可以进行正常的调试工作了。

最后

本文地址:http://www.cnblogs.com/kelsen/p/6368550.html

如果您有任何建议或疑问请在下面留言交流。

如何在运行wsl时在windows中设置vs代码调试?(代码片段)

...适用于Chrome的调试器使用create-react-app创建的React应用程序通过npmstart在bash(WSL)中启动服务器这样做是为了启动一个新的浏览器窗口并提供应用程序,但我无法设置任何断点。他们都报告Unverifiedbreakpoint。这是我的launch.json:"vers... 查看详情

在 Windows 容器中运行 Visual Studio 远程调试器(由 Docker 管理)

】在Windows容器中运行VisualStudio远程调试器(由Docker管理)【英文标题】:RunningVisualStudioRemoteDebuggerinWindowsContainer(Dockermanaged)【发布时间】:2016-07-2500:55:27【问题描述】:我尝试在WindowsServer2016TP4上的Windows容器中运行VisualStudio远... 查看详情

在 Chrome 的调试器控制台中运行我自己的脚本?

】在Chrome的调试器控制台中运行我自己的脚本?【英文标题】:RunmyownscriptinsideChrome\'sdebuggerconsole?【发布时间】:2011-07-1212:16:21【问题描述】:我厌倦了在Chrome的开发者控制台中重新输入相同的命令。是否可以加载我保存在本地... 查看详情

chrome调试,js正常运行,但找不到代码,无法调试

1.有网页B.html,在B.html中引用C.js。另有A.html通过jquery的load(B.html")载入B.html,载入后C.js能正常运行,但是在Chrome调试器中找不到C.js,无法调试。如果加debugger显然影响调试效率。这个问题好歹还能调试,虽然麻烦点。2.如果通... 查看详情

在 Windows 10 上使用 Intellij IDEA 在 WSL 2 中运行和调试 Java

】在Windows10上使用IntellijIDEA在WSL2中运行和调试Java【英文标题】:RunandDebugJavainWSL2withIntellijIDEAonWindows10【发布时间】:2020-02-1411:07:00【问题描述】:IntellijIDEA安装在Windows上。使用maven构建的java应用程序需要本地库(带有JNI)并在... 查看详情

通过虚拟机搭建windows内核调试环境

今天我们来记录下通过虚拟机搭建windows内核调试环境。这里是官方文档。 1.在虚拟机设置中为目标计算机创建命名管道 2.在目标计算机中开启调试 3.在windbg中输入目标计算机(虚拟机)的地址信息 4.在windbg菜单中点... 查看详情

是否可以通过 Internet 调试 Windows 桌面应用程序?

】是否可以通过Internet调试Windows桌面应用程序?【英文标题】:IsitpossibletodebugaWindowsDesktopApplicationovertheinternet?【发布时间】:2016-03-0517:48:34【问题描述】:我经常遇到程序在我的系统(已安装和在开发环境中)上运行良好但在... 查看详情

如何在调试模式下运行 wildfly,作为 Windows 上的服务?

...将Wildfly作为服务运行。当我需要调试时,我将关闭它并通过standalone.bat-debug启动Wildfly。我想要的是始终打开调试开关,当它作为服务运行时?【问题讨 查看详情

在 XCode 中调试 - 通过代码和断点运行 [关闭]

】在XCode中调试-通过代码和断点运行[关闭]【英文标题】:DebugginginXCode-runningthroughcodeandbreakpoints[closed]【发布时间】:2012-10-0220:06:34【问题描述】:我想知道如何在xcode中进行最佳调试。我知道如何设置断点,但理想情况下我希... 查看详情

旧的调试会话阻止使用 vs 代码在 chrome 中进行调试

】旧的调试会话阻止使用vs代码在chrome中进行调试【英文标题】:Olddebugsessionpreventingdebugginginchromewithvscode【发布时间】:2021-01-0303:49:50【问题描述】:使用VSCode在chrome中调试时,我从Chrome收到以下警告:看起来浏览器已经从旧的... 查看详情

在运行时通过在 2D 视图中单击特定代理来访问它,调试

】在运行时通过在2D视图中单击特定代理来访问它,调试【英文标题】:AccessingspecificAgentduringRuntimebyclickingonitin2D-view,debugging【发布时间】:2020-12-0610:16:24【问题描述】:我正在调试我的模拟。有一个病人(代理人)被困在不应... 查看详情

C++ 应用程序仅在使用本地 Windows 调试器时运行,而不是在哪个 exe 文件中运行

】C++应用程序仅在使用本地Windows调试器时运行,而不是在哪个exe文件中运行【英文标题】:C++applicationrunonlywhenuselocalwindowsdebugger,notwhichexefile【发布时间】:2019-06-1110:17:07【问题描述】:当我在VisualStudio2017中使用本地Windows调试... 查看详情

如何调试在 phantomjs 中运行的 ember-cli 测试

...ember-cli应用程序进行了验收测试,并且测试在Chrome中顺利通过。但是,在phantomjs中,我的测试失败了——UI的创建方式不同,我正在尝试找出原因。(我认为测试是因为https://gi 查看详情

从 Windows 7 Enterprise 到 Samsung Galaxy Tab A 在 Chrome 开发人员工具中进行远程调试时未检测到设备

】从Windows7Enterprise到SamsungGalaxyTabA在Chrome开发人员工具中进行远程调试时未检测到设备【英文标题】:NodevicesdetectedwhenremotedebugginginChromeDeveloperToolsfromWindows7EnterprisetoSamsungGalaxyTabA【发布时间】:2018-01-1513:14:25【问题描述】:我在S... 查看详情

在 WebStorm 中调试 TS

...bStorm【发布时间】:2016-08-1722:16:23【问题描述】:服务器通过gulp启动。在运行配置中,我创建了一个JavaScript调试并设置了服务器url。Chrome中的扩展程序可用。作为构建系统,我使用Webpack。在调试模式下,我可以看到连接成功但... 查看详情

reactnative怎么调试智能电视

reactnative调试智能电视可以通过摇晃设备或是选择iOS模拟器的ShakeGesture选项打开开发菜单。如果是在iOS模拟器中运行,可以按下Command⌘+D快捷键Android模拟器对应的则是Command⌘+M(windows上可能是F1或者F2)或是直接在命令行... 查看详情

如何用chromedevtools调试iossafari

1、在Android手机上安装Chrome(ChromeforAndroid)应用超市、或者google官网即可下载。2、电脑系统安装了最新版的Chrome最新版Chrome,确保开发者工具正常使用3、Android手机装了USB驱动在设备管理器查看是否正确安装了驱动,如无,则需... 查看详情

windows逆向od调试器工具(ce中获取子弹动态地址前置操作|od中调试指定地址的数据)(代码片段)

...前置操作在上一篇博客【Windows逆向】OD调试器工具(CE工具通过查找访问的方式找到子弹数据基地址|使用OD工具附加游戏进程|在OD工具中查看子弹数据地址|推荐)基础上,继续调试后续的内容;OD调试期间中途崩溃,重新读取下子弹数... 查看详情