App混合开发现已是常态,不过作为app端开发人员,对H5页面的使用,可不能简单的局限于使用,一些简单的调试方法还是有必要了解的。

关于如何在使用webview过程中,如何对web内对内容进行调试,这里会简单讲一下步骤。

一、真机或Simulator  打开"设置"->"Safari"->"高级"->"Web检查器"

二、打开电脑上 Safari  ->“偏好设置” -> “高级” -> “在菜单栏中显示开发选项”

下面我会使用模拟器进行测试。

三、这时,我们不运行app,可以先查看一下Simulator,发现是没有东西的。

四、然后我们运行app,并打开一个webview,加载一个h5页面。在此查看 步骤三 ,会发现如下:

红框内就是我们正在运行的webview页面。

我们打开safari,点击一下上面的红框,会弹出一个网页检查器,类似下图:

这里显示的就是webview上的内容,我们可以通过这个进行一些调试,就跟windows下 按F12调试一个道理。

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

五、这边我以《百度》举例

1、webview加载百度网站“http://www.baidu.com”

2、打开safari的网页检查器

3、比如我要修改这几个名字

按1、2、3步骤进行操作:

最后的结果如下:

当然这是最基础、最简单的操作,像其他改某段字体大小,label长度等等,你都可以尝试看看

如果你懂一点前端web开发,那就如虎添翼了,web调试信手拈来。。。

enjoy ~

iOS开发Safari调试WebView页面的更多相关文章

  1. iOS之Safari调试webView/H5页面

    之前做过混合开发,用的是JavaScriptCore+OC+UIWebView. Safari调试功能真的很有用,通过它可以轻松定位问题的所在,下面说说怎么调试. 开启Safari开发菜单 在Mac的 ...

  2. iOS之safari调试iOS app web页面

    Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报 ...

  3. 配合前端开发,调试前端页面bug

    同事开发的H5页面  在iOS10.1的手机上会有bug 先下载ios10.1的模拟器,安装到xcode上,注意给电脑腾出足够的空间 https://stackoverflow.com/questio ...

  4. iOS开发的调试技巧

    关于本文: 1.模拟器的快捷键 2.覆盖安装注意事项 3.给模拟器相册增加照片 4.模拟器中程序的数据 5.安装旧版本的模拟器 6.模拟慢网速 7.异常断点与符号断点 1.模拟器的快捷键 常用的模拟器 ...

  5. iOS开发之微信聊天页面实现

    在上篇博客(iOS开发之微信聊天工具栏的封装)中对微信聊天页面下方的工具栏进行了封装,本篇博客中就使用之前封装的工具栏来进行聊天页面的编写.在聊天页面中主要用到了TableView的知识,还有如何在俩 ...

  6. iOS开发中调试小技巧

    对于软件开发而言,调试是必须学会的技能,重要性不言而喻.对于调试的技能,基本上是可以迁移的,也就是说你以前在其他平台上掌握的很多调试技巧,很多也是可以用在iOS开发中.不同语言.不同IDE.不同平台的 ...

  7. iOS开发之——从零开始完成页面切换形变动画

    前言 某天我接到了UI发给我的两张图: 需求图.png 看到图的时候我一脸懵逼,显然我需要做一个页面切换的指示动画.老实说,从大三暑假开始做iOS开发也一年有余了,但是遇到复杂动画总是唯恐避之不及,只 ...

  8. iOS - 开发中调试小技巧

    对于软件开发而言,调试是必须学会的技能,重要性不言而喻.对于调试的技能,基本上是可以迁移的,也就是说你以前在其他平台上掌握的很多调试技巧,很多也是可以用在iOS开发中.不同语言.不同IDE.不同平台的 ...

  9. iOS使用Safari调试UIWebView

    1.设置Safari "Safari"->"偏好设置"->"高级",勾选"在菜单栏中显示开发菜单" 2.设置 ...

随机推荐

  1. 网页web前端学习技巧

    1. 写js效果时一定要注意先分析好效果的行为,尽量用最简单通用性的代码.分析步骤可以是1.先把要实现的功能一步一步的写在纸上(即自然语言)2.再根据自然语言翻译成机器语言,用jquery写的代码一定 ...

  2. android调用系统相机

    Intent intent = new Intent(); intent.setPackage("com.android.camera"); intent.setAction(Me ...

  3. 001---Hibernate简介( 开源O/R映射框架)

    该系列教程是使用hibernate3,hibernate4和3有区别(集成spring,使用等),请注意 001---Hibernate简介(开源O/R映射框架) ORM(Object Relatio ...

  4. unity 判断是安卓还是IOS平台

    功能概述 储值功能,点击一个按钮(mSprites["Recharge"]),实现储值功能,在IOS平台上,该按钮下的功能全部隐藏,在安卓平台上正常显示按钮,实现相应功能 #if ...

  5. TP框架 增删查

    TP框架添加数据到数据库1.使用数组方式添加造模型对象 2.使用AR方式 强类型语言存在的方式 3.使用自动收集表单添加 :只能用POST方式,提交数据一个操作方法实现两个逻辑:A显示页面B得到数据 ...

  6. [netty源码分析]3 eventLoop 实现类SingleThreadEventLoop职责与实现

    eventLoop是基于事件系统机制,主要技术由线程池同队列组成,是由生产/消费者模型设计,那么先搞清楚谁是生产者,消费者内容 SingleThreadEventLoop 实现 public abst ...

  7. javascript基础-BOM原理

    图解:  1. Loction: 拼接参数时,应编码decodeURIComponent/encodeURIComponent(). 2. History: pushState+replaceStat ...

  8. npm 一条命令更换淘宝源

    一条命令更换淘宝源 npm config set registry https://registry.npm.taobao.org

  9. 2-SAT算法

    参考blog 参考论文 参考论文 题目 & 题解 裸2-SAT poj3683 poj3207 poj3678 poj3648 2-SAT + 二分法 poj2723 poj2749 hdu3 ...

  10. win10下面visual studio, sublime ctrl+shift+f快捷键失效的原因

    在visual studio 和sublime中,经常遇到ctrl+shift+f不能用,然后输入法总是自动切换成繁体中文. 实在百思不得其解. 今天才发现,我用的windows 10自带的微软拼音输 ...