Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >Remote debugging on iOS with Safari Web Inspector

Remote debugging on iOS with Safari Web Inspector

一缕殇流化隐半边冰霜

发布于 2024-02-14 01:24:19

发布于 2024-02-14 01:24:19

1860

举报

文章被收录于专栏：冰霜之地冰霜之地

之前在公司调试Hybrid其实很蛋疼。。都是本地打开zip包，运行js，然后调试，每次都要找到zip，比较麻烦，后来发现了这个远程调试的方法，直接插上手机就可以调试了，不用那么麻烦了，而且可以直接在手机上看到实时的效果。

后来发现有一些Js前端开发还不会这个方法，今天就分享出来，大家都看看，有啥问题请多指点。

1.首先iPhone连接上Mac，点击信任，确保itunes连接成功，然后打开iPhone的“设置” - “Safari” - "高级" - 打开“JavaScript” 和 “Web检查器”

2.打开Mac上的Safari，选择“偏好设置” - “高级” - "在菜单栏中显示“开发”菜单"

3.打开iPhone上的Safari或者运行PhoneGap程序，到某一个界面，回到Mac上的Safari上，选择“开发”，然后选择你的iPhone，就可以查看到那个一个Web界面了

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-02-14，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

使用Safari或者Chrome远程调试IOS Safari中的页面

https iphone ios

【转载请注明出处】：https://blog.csdn.net/huahao1989/article/details/108020899

后端老鸟

2020/08/15

23.6K0

使用Safari或者Chrome远程调试IOS Safari中的页面

移动web真机调试方案

微信 iphone webview

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

csxiaoyao

2019/09/18

1.5K0

移动web真机调试方案

微信 iphone webview

对于前端开发来说，在pc端使用chrome等浏览器的开发者工具简直是好用到爆，Chrome手机模拟器可以帮助开发调试移动端web页面，然而在真机内调试起移动端web页面的时候就显得无从下手。目前已经有不少移动端的真机调试工具，本人在综合使用后推荐以下两类调试方案：chrome/safari真机调试和 spy-debugger调试。

CS逍遥剑仙

2019/09/03

3.1K0

如何调试移动端页面

微信 iphone ios

作者：汪娇娇时间：2018年6月2日之前一段时间过于忙碌，积压了很多博客，现在慢慢来还债啦～～大家都知道，挂在PC端上的页面一旦出现问题，是比较容易进行调试的，只要下载对应的浏览器，打开控制台，打断点或直接看一下出问题的点，一般都能很快查出问题。但一旦移动端页面出现问题，尤其市面上安卓那么多机型，出了问题，连个调试方法都没有。那么，下面就给大家介绍一下我使用的一些调试方法吧。一、Chrome DevTools 1、用数据线将电脑和手机连接起来； 2、打开手机的开发者模式 + USB 调试接口； 3、

jojo

2018/06/04

3.7K0

前端必须知道的开发调试知识 - 笔记

iphone console 笔记前端调试

小技巧：不同类型的数据从 console 中打印出的颜色也不相同，可以借此判断数据类型

TagBug

2023/03/17

1.1K0

前端必须知道的开发调试知识 - 笔记

Safari/Chrome调试WebView

webview ios html 网站

大多数App会选择H5去实现某些弱交互但是却需要热更新界面，这时候WebView就派上用场了，那么如何对WebView进行调试呢？

conanma

2021/06/08

1.5K0

移动端网页调试

android github 网站

自2019.05.22日离职以来，自己在家浪了两天。然后发现，浪也该浪够了，该收心找下工作了。于是屁颠屁颠的拿起了《在你身边为你设计》这本书看了一下午，看到移动端调试这里，略有感受，于是提取了下内容

Jimmy_is_jimmy

2019/07/31

1.4K0

在Windows上调试iPhone/iPad的safari浏览器

远程调试 ipad 连接浏览器调试

在安卓上面可以使用adb链接电脑，使用Chrome Inspect进行调试网页(QQ/微信的x5内核也可以)，但是自从换了iPhone之后就没有这个乐趣了，所以我便开始摸索起来如果使用Chrome Inspect来调试safari浏览器(因为iPhone上面的QQ/微信没有x5内核，所以只能调试safari了)

用砖头敲代码

2023/03/25

4.4K0

在Windows上调试iPhone/iPad的safari浏览器

iPhone页面的常用调试方法

某些页面需要设置HOST才能进行访问，在iPhone上不好设置HOST，所以需要一些代理工具帮助我们

书童小二

2018/09/03

3.4K0

iPhone页面的常用调试方法

学会前端调试技巧，提升排错效率

我们系统程序的漏洞就叫 bug。世界上第一个 bug ，是 1946 年霍普发现了第一个电脑上的 bug，竟然是一只飞蛾“臭虫”。解决这些问题的过程叫做捉虫、调试，也就是 Debug。

黄啊码

2022/06/20

1.9K0

一文读懂H5移动开发调试技巧

内容来源：作者 | Jartto，http://jartto.wang/2018/11/01/mobile-debug/

IT大咖说

2018/12/24

1.5K0

Web Albums(iPhone) 的蛋疼明文密码

iphone ios 腾讯云开发者社区 https 网络安全

一款蛮不错的的Picasa相册同步软件，并且还有个密码保护功能，看起来很帅的样子。设置密码之后习惯性的想看下密码保存在什么地方，是不是明文的，于是随便在文件夹下翻了翻，不小心就找到了。娃哈哈，蛋疼啊，如果忘记密码了去软件目录下找到这个文件：

obaby

2023/02/23

5240

移动端前端开发调试-将safari设置iPhone模拟器

最近一直在做手机网页开发调试，换手机换来换去很不方便。所以总结了两个办法。第一个将safari设置iPhone模拟器：步骤： 1. 打开safari 2. 点击右侧的齿轮，选择“偏好设置” 3. 选择“高级”选项卡 --- 勾选在菜单栏中显示“开发”菜单 4. 关闭对话框 5. F10, 在工具栏将显示开发选项卡 6. 用户代理选择要设置的UA 第二个谷歌浏览器设置各种UA 1. 打开谷歌浏览器 2. 点击右侧菜单按钮，选择“更多工具”--“开发工具”（快捷键F11火ctrl+shift+i） 3

Vicsh

2018/05/16

8.5K0

如何在IOS上调试Hybrid应用

最近在找关于在xcode上调试Hybrid应用的方法，比如我想进行断点调试、日志打印已经屏幕适配等等，刻意去搜了下方法，虽然之前已经大致知道了，这里系统归纳一下，原文在https://developers.redhat.com/blog/2017/07/12/how-to-debug-your-mobile-hybrid-app-on-ios/，配图还是用的文中的配图，这里只是翻译一下。正如你所知，有时候在一个手机设备上调试程序是一件非常困难的事。对于Android和网页应用来说，我们有Chrome De

糊糊糊糊糊了

2018/05/09

1.7K0

如何在IOS上调试Hybrid应用

iOS 真机调试微信小程序

微信访问管理 ios iphone

平时开发小程序可以在开发者工具中进行调试，开发者工具提供了类似 Chrome DevTools 的调试面板，对于前端开发者来说入门门槛比较低。

三水清

2018/08/28

8.6K10

移动端Web开发调试之Weinre调试教程

原文地址:http://blog.csdn.net/freshlover/article/details/42640253

一个会写诗的程序员

2018/08/20

2.2K0

移动端Web开发调试之Weinre调试教程

前端-移动端调试痛点？——送你五款前端开发利器

android ios iphone

之所以写这个总结，还要从上周的一次移动端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。WTF（手动黑人问号）！！！那问题就来了，开发环境下没报错，可真机又出现了意料之外的情况，而且没法像 PC端那样祭出 F12 大法，怎么定位问题并解决呢？最后凭借着我（谷歌）的聪明才智，找到了媲美 PC端调试体验的方式。在此总结一波，献给各位被移动端真机调试折磨，而又无从下手的前端er们，话休烦絮，直接奉上：

grain先森

2019/03/29

1.5K0

前端-移动端调试痛点？——送你五款前端开发利器

Safari 18.0 WebKit 新特性介绍

safari webkit 动画浏览器网站

干扰控制功能允许你在浏览网页时隐藏干扰项，例如登录横幅、Cookie 偏好弹窗、新闻通讯注册覆盖层等。该功能适用于 iOS 18、iPadOS 18 和 macOS Sequoia 上的 Safari。

ACK

2024/09/26

4800

Safari 18.0 WebKit 新特性介绍

Mac 自带浏览器 Safari 如何开启 Web 网页开发者调试模式？

开发者浏览器 mac safari web

大家好，我是猫头虎，今天为大家带来一篇关于 Safari 浏览器如何开启开发者调试模式的详细教程！Safari 是 macOS 的默认浏览器，虽然在开发者圈子中不如 Chrome 普及，但其内置的开发工具功能强大，尤其在调试 iOS 和 macOS 系统的网页表现时非常有用。跟着这篇教程，让我们快速掌握开启 Safari 开发者调试模式的方法吧！🎯

猫头虎

2025/01/08

3.2K0

Mac 自带浏览器 Safari 如何开启 Web 网页开发者调试模式？

移动端真机调试方法总结

android iphone javascript webview

最近要分析web页面，在安卓和ios上的性能差异，除了操作系统本身不同之外，应该还多地方要探究的，第一步就是要在真机上分析。所以总结一下几个方法。

winty

2019/12/20

1.7K0

相关推荐

使用Safari或者Chrome远程调试IOS Safari中的页面

更多 >

一缕殇流化隐半边冰霜0

LV.1

这个人很懒，什么都没有留下～

作者相关精选

换一批

加入讨论

的问答专区 >

相关课程

一站式学习中心 >

低代码实战营

微搭低代码

💥开发者 MCP广场重磅上线！

精选全网热门MCP server，让你的AI更好用 🚀