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

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

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

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

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

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

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

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

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

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

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！

近来这段时间一直在写内嵌在App中的Html,虽然在HBuilder中可以轻易的使用各种 浏览器 轻易 调试 Html,但是在Xcode中想 调试 Html却并不容易.Xcode的图形 调试 界面只能 调试 原生的UI.WK WebView 和UI WebView 只能显示黑屏. 如下图所示. 使用 Safari 浏览器 调试 WebView 使用 Safari 浏览器 调试 WebView 比较简单无需过多的程序配置,只需点击几个开关按钮即可. 首先打开 模拟器 或者真机设置中” Safari 浏览器 ”→”高级”→”Web检查器”的开关 如下图所示. 然后我们打开Mac电脑的 Safari 浏览器 ,打开系统偏好设置(快捷键 comm 出现这种问题的原因是在 调试 界面需要先通过chrome官方链接加载支持 调试 功能的相关依赖，但是这个链接应该是被墙了，因此需要挂梯子，之后就不需要了，这个依赖会被 浏览器 缓存下来。3. 手机端/ 模拟器 安装移动端chrome 浏览器 ，如果是配合pc端chrome 调试 ，手机端chrome版本不能比pc端chrome版本高，否则可能无法成功 调试 。此外也可以使用手机端chrome+pc端edge 调试 ，同样的， 调试 之前有必要将pc端edge更新至最新版本，edge版本号不能低于手机端chrome版本。 Overview 当下移动端 开发 过程中大量使用前段H5、js等等技术，而这些web 页面 的 调试 在Xcode控制台中不太明了，经常我们移动app运行了就是方法，但是不能显示响应的效果，这时候或许就是已经报错了，但是我们在Xcode控制台是看不到这些错误。这时候我们就可以用功能强大的 Safari 浏览器 来开启 开发 模式 连接iPhone来 调试 app脸面的web 页面 了。 Safari 设置 打开 Safari 偏好者设置，选中“高级菜单”，在 页面 最下方看到“在菜单中显示 开发 菜单”的复选框，在复选框内打钩，这样设置完毕就能在 Safari 菜单中看到 开发 菜单了 iPhone设置 打开iPhone手机设置app 选择S 每个用过 UI WebView 的 iOS 开发者 对其诸多的限制和有限的功能也深有感触。悻然，自 iOS 8推出 WebKit 框架后将改变这一窘境。在本文我将会深入WebKit来体验一下它给我们带来的好处，同时也看看在 iOS 9中新加入的 SF Safari ViewController 有些什么新的惊喜。 通用的浏览行为 所谓的通用浏览行为主要可以归纳为以下的几种： 网页载入进度 如果每个用到 WebView 的 app都要做一个专用的Controller也挺麻烦的，我以前就直接采用其它第三方写好的包来完成。 但现在，如果用 WK WebView 将变得很方便，以代码说话吧： class 在安卓上面可以使用adb链接电脑，使用Chrome Inspect进行 调试 网页(QQ/微信的x5内核也可以)，但是自从换了iPhone之后就没有这个乐趣了，所以我便开始摸索起来如果使用Chrome Inspect来 调试 safari 浏览器 (因为iPhone上面的QQ/微信没有x5内核，所以只能 调试 safari 了)如果不出意外，这个时候应该就装好了，会出现一行小绿字，就像下面这样。到这，如果不出问题，就已经装好了Scoop，接下来就可以去装远程 调试 需要的依赖了，命令也很简单，就两行。 前言虽然 Chrome DevTools 可以模拟手机的环境，但与真实环境差别比较大，所以一般会用真机 调试 ，或者就是用 模拟器 了。这篇文章主要就是介绍下在mac上如何使用 模拟器 来 调试 页面 。安装 ios simulator捆绑于xcode，直接上appStore 搜索Xcode进行安装如何使用1.打开xcode，需要新建一个项目，通过”Xcode-Open Developer Tool-Simulato... 转自IMWeb社区，作者：HuQingyang，原文链接前段时间，老板说：iPhone 又出了那么多新机型，你搞下兼容吧。我：测试机呢？老板说：没有。我：？？？这让我十分为难，毕竟巧妇难为无米之炊，于是我只好使出绝招： 模拟器 大法！一. 安装 & 启动首先需要安装 Xcode，安装完毕后，在终端中运行 xcode-select --install安装 Command-line-tools。安... 需要做的工作如下: 1. 设备端：打开手机端 Safari 的web检查器 具体步骤：设置(Setting) –> Safari –> 高级(Advanced) –> 打开web检查器(web inspector) 2. Mac端: 打开Mac端 Safari 的 开发者 模式 具体步骤: 打开 Safari –> 偏好设置 –> 高级 –> 勾选“在菜单栏中显示“ 开发 ”菜单”选项 3. 将手机通过 有时候与H5联调的时候需要看H5界面元素，这就需要开启 模拟器 和真机联调功能 1、点击 Safari 浏览器 》偏好设置》高级》在菜单栏显示“ 开发 ”菜单。 2、打开 模拟器 或者真机设置》 Safari 浏览器 》高级》web (Inspector)检查器 移动互联网时代，网页依旧是内容展示的重要媒介，这离不开 WebKit 浏览内核技术的支持与发展。在 iOS 平台下 开发者 们需要通过 WK WebView 框架来与 WebKit 打交道。 虽然苹果官方提供了关于 WK WebView 的 API 与使用说明，但这并不能满足 开发者 们的需求，各类复杂场景依旧让我们焦头烂额，而解决方案却不易寻找。此时，优秀的 开发者 们将目光移向苹果开源的 WebKit 内核代码，试图从中寻找解惑之道，却发现依旧困难重重，坎坷不断，主要问题如下： 内核源码复杂难懂：动辄几 正文从这开始～ 在App 开发 中，内嵌 WebView 始终占有着一席之地。它能以较低的成本实现Android、 iOS 和Web的复用，也可以冠冕堂皇的突破苹果对热更新的封锁。 然而便利性的同时， WebView 的性能体验却备受质疑，导致很多客户端中需要动态更新等 页面 时不得不采用其他方案。 HBuilder对前端代码的 调试 方式有边改边看、真机运行、webkit remote debug真机 调试 3种。系列文章目录导航： Safari 调试 iOS 手机概述对于HTML5的 开发 ，大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验，不仅能快速方便 调试 JavaScript、检查HTML 页面 DOM结构、实时同步更新元素CSS样式，还能跟踪分析 页面 资源加载性能等问题。对于移动平台的...