最新消息:iOS编程开发交流群(6906921) ,Mac.Cocoa开发交流群(7758675) 欢迎iOS/macOS开发编程爱好及学习者加入!

iOS开发之Safari调试WebView页面

iOS 天狐 12660浏览 1评论

在iOS开发过程中,难免会加入html5页面来实现文章详情等等类似功能。

我们都知道火狐等PC浏览器有类似firebug,审查元素等工具来调试网页样式与脚本,查看请求参数与请求头等等。

在iOS开发中,这些网页检查器功能也是存在的(无论是模拟器还是真机),我们需要用到Mac自带的浏览器Safari。所以,本文将讲解如何使用Safari对iOS程序中的WebView进行调试。

1. 打开模拟器/真机的开发者模式(模拟器是默认开启的)

"设置"->"Safari"->"高级"->"Web检查器" 打开

a5664ee2-b1bf-41c9-966b-9186322075b4

2. 打开Mac上Safari的开发者模式

开启 Safari  ->“偏好设置” -> “高级” -> “在菜单栏中显示开发选项”

e4bb8406-bafe-41a3-9a90-2221d0e74573

4. 在模拟器/真机中打开APP中的WebView页面,并打开Safari

当有WebView加载网页时,打开Mac Safari调试模式 网页检查器。 “开发” ->“Simulator或者你的真机名称” ->“网页文档名称”

18884ee0-b08a-4db9-9893-d714266cf0cc

在弹出的网页检查器中,可以看到当前正在加载网页的各种信息,包括元素源码、网络、资源与脚本、控制台输出等。并且它和Web前端的调试方式相同,你可以直接修改网页的CSS样式,对网页布局源码等进行修改,使用调试器进行脚本调试,而不需要重新运行整个APP。

859d7231-085a-49cf-afc5-41833c9549e8

JSPatch调试

JSPatch与WebView有点不同,

当有JavaScriptContext加载时,打开Mac Safari调试模式 网页检查器。 “开发” ->“Simulator或者你的真机名称” ->“JSContext”。

在资源tab中即可进行断点调试了

调试器tab中也可以进行单步调试等详细工作

资源

所有资源列出了 JSPatch 所有执行中的脚本文件,点开文件后可以对其进行断点调试。(有时候调试器tab识别的文件不全)。

通过 [JPEngine evaluateScript:script] 接口执行的脚本,在资源列表里都表示为 main.js

通过 [JPEngine evaluateScriptWithPath:filePath] 接口执行的脚本,在资源列表里会以原文件名表示。

 

最后如果还不出现Simulator或者你的真机名称,尝试重启Mac Safari!!!

enjoy it!

 

转载请注明:天狐博客 » iOS开发之Safari调试WebView页面

微信 OR 支付宝 扫描二维码
为天狐 打赏
非常感谢你的支持,哥会继续努力!
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)