safari调试iOS app web页面的步骤

Overview

当下移动端开发过程中大量使用前段H5、js等等技术，而这些web页面的调试在Xcode控制台中不太明了，经常我们移动app运行了就是方法，但是不能显示响应的效果，这时候或许就是已经报错了，但是我们在Xcode控制台是看不到这些错误。这时候我们就可以用功能强大的Safari浏览器来开启开发模式连接iPhone来调试app脸面的web页面了。

Safari设置

打开Safari偏好者设置，选中“高级菜单”，在页面最下方看到“在菜单中显示开发菜单”的复选框，在复选框内打钩，这样设置完毕就能在Safari菜单中看到开发菜单了

iPhone设置

打开iPhone手机设置app 选择Safari，找到高级选项，有JavaScript开关web检查器开关，讲两个开关都打开

调试

到此，准备工作完成。这时候讲iPhone链接到mac上，打开Safari浏览器，运行手机app里面的web页面，在开发菜单中选择连接的手机，找到调试的网页，就能在Safari里面调试了

手机截屏

Safari调试窗口

Safari控制台

在Safari中鼠标右键，选择检查元素，就可以看见Safari控制台了。如果看不到检查元素选项，依照上面Safari设置打开开发选项

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • IOS 开发之UITextField的光标操作扩展

    IOS 开发之UITextField的光标操作扩展 简介 在iOS开发中,有时候需要完全自主的定义键盘,用于完整的单词输入,例如计算机应用中,需要一次性的输入sin(,在移动光标时要完整的跳过sin(,在删除时也要完整的删除,这就需要对光标的位置进行精确控制,而ios并没有相关的函数可以直接操作光标,只给出了选择某个区域的功能,本文将介绍基于区域选择设计的UITextField扩展,用于获取光标位置以及移动光标. 实现原理 光标位置的获取 在textField中,有一个属性称之为selected

  • 详解iOS 裁剪圆形图像并显示(类似于微信头像)

    详解iOS 裁剪圆形图像并显示(类似于微信头像)

    本文主要讲解如何从照片库选择一张照片后将其裁剪成圆形头像并显示,类似于微信头像那种模式. 本文的方法也适用于当时拍照获取的图像,方法类似,所以不再赘述. 本文主要是在iOS 10环境下使用,此时如果要使用使用系统照片库.照相机等功能需要授权,授权方法如下: 右键点击工程目录中的"Info.plist文件-->Open As -->Source Code",打开复制以下你在应用中使用的隐私权限设置(描述自己修改): <key>NSVideoSubscriberAc

  • 简单谈谈axios中的get,post方法

    学习vue和nodejs的过程当中,涉及到了axios,今天为了测试,写了get和post两个方法来跟node服务端交互,结果因为header和参数弄了好久,在此记录一下,同时分享: 由于刚接触axios,在测试方法中,写的都是很简单的东西,不过能够实现基础功能,大神看到的话..非常欢迎指导.. //GET方法 axios.get(url, { params: { 'key': 'value' } }).then(function (response) { alert(''.concat(res

  • IOS 长链接与短链接之间的转换

    IOS 长链接与短链接之间的转换 首先需要将字符串使用md5加密,添加NSString的md5的类别方法如下 .h文件 #import <CommonCrypto/CommonDigest.h> @interface NSString (md5) -(NSString *) md5HexDigest; @end .m文件 #import "NSString+md5.h" @implementation NSString (md5) - (NSString *) md5Hex

  • 详解Vue 2.0封装axios笔记

    详解Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐.已有的用户可以继续使用,但以后不再把

  • iOS通过Runtime实现友盟统计的实例代码

    在友盟官网可以看到相应的步骤,申请appkey,导入SDK,然后在AppDelegate里面写入相应的代码,下面就是关键的代码: 实现页面的统计需要在每个UIViewController中配对调用如下方法: - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [MobClick beginLogPageView:@"PageOne"];//("PageOne"为页面名称,可

  • iOS实时录音和播放功能

    需求:最近公司需要做一个楼宇对讲的功能:门口机(连接WIFI)拨号对室内机(对应的WIFI)的设备进行呼叫,室内机收到呼叫之后将对收到的数据进行UDP广播的转发,手机(连接对应的WIFI)收到视频流之后,实时的展示视频数据(手机可以接听,挂断,手机接听之后,室内机不展示视频,只是进行转发.) 简单点说就是手机客户端需要做一个类似于直播平台的软件,可以实时的展示视频,实时的播放接收到的声音数据,并且实时将手机麦克风收到的声音回传给室内机,室内机负责转发给门口机. 这篇文章介绍iOS怎么进行实时的录

  • safari调试iOS app web页面的步骤

    safari调试iOS app web页面的步骤

    Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报错了,但是我们在Xcode控制台是看不到这些错误.这时候我们就可以用功能强大的Safari浏览器来开启开发模式连接iPhone来调试app脸面的web页面了. Safari设置 打开Safari偏好者设置,选中"高级菜单",在页面最下方看到"在菜单中显示开发菜单"的复选

  • iOS逆向工程使用LLDB的USB连接调试第三方App

    iOS逆向工程使用LLDB的USB连接调试第三方App

    LLDB是Low Level Debugger的简称,在iOS开发的调试中LLDB是经常使用的,LLDB是Xcode内置的动态调试工具.使用LLDB可以动态的调试你的应用程序,如果你不做其他的额外处理,因为debugserver缺少task_for_pid权限,所以你只能使用LLDB来调试你自己的App.那么本篇博客中就要使用LLDB来调试从AppStore下载安装的App,并且结合着Hopper来分析第三方App内部的结构.LLDB与Hopper的结合,会让你看到不一样的东西,本篇博客就会和你

  • ios App加载本地HTML网页,点击网页链接跳转到app页面的方法

    一.如何在APP里加载本地html文件内容: 首先准备一个html文件,比如内容如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <tit

  • android Web跳转到app指定页面并传递参数实例

    下面将实现 Web跳转到app指定页面并传递参数 总结 先看效果图: h5页面代码: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title

  • iOS APP实现微信H5支付示例总结

    微信H5支付流程 1.发起下单请求(调用统一下单接口)注:交易类型trade_type=MWEB 2.统一下单接口返回支付相关参数给商户后台,如支付跳转url(参数名"mweb_url"),商户通过mweb_url调起微信支付中间页.如:https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx27142704550165900edae5270331515985&package=600759311&

  • 使用Chrome浏览器调试Android App详解

    使用Chrome浏览器调试Android App详解

    个人一直对Chrome情有独钟,Chrome除了更快之外,对开发者的支持更友好.内置强大的Developer Tools,相信Web开发简直爱不释手!而且Chrome Store里提供各种各样的插件,没有你用不到,只有你想不到.现在任何事基本Chrome全部办的到,有时候就在想,如果可以用Chrome调试Android App该多方便,而如今Facebook刚刚开源了一个工具Stetho,从此Chrome调试Android不再是梦. 调试工具 在Android开发中除了一些官方自带的一些调试工具

  • 利用Pycharm + Django搭建一个简单Python Web项目的步骤

    一.Pycharm中安装Django 此教程默认你已安装并配置了Python 3.7.6) 1.File->Settings 二.搭建Django项目 1.File->New Project 2.新窗口打开,会出现以下的文件 简单解释一下这几个文件: **init.py:**这是一个初始化的空文件,一般我们不需要动它. settings.py: 这是一个配置文件,里面有关于语言.时区.安装的app声明等等信息: urls.py: 这个文件里指明了在访问一个页面时要调用的视图啊等的映射,确保在访

  • iOS微信H5页面橡皮回弹效果的踩坑记录

    业务需求 近期开发的项目有一部分是与微信公众号相关的H5页面,在Android端微信上页面效果展示无异常,但是在 iOS端 微信多多少少会出现一些意想不到的bug.此次主要针对移动端H5页面在iOS端产生的 橡皮回弹(橡皮筋效果)问题做一下相关记录,希望对遇到类似问题的同学有所帮助.

  • 分享js粘帖屏幕截图到web页面插件screenshot-paste

    分享js粘帖屏幕截图到web页面插件screenshot-paste

    在很多场合下,我们可能有这样的需求:提供个屏幕截图上传到系统,作为一个凭证.传统的操作方式是:屏幕截图,保存文件到本地,在web页面上选择本地文件并上传,这里至少需要三步.有没有可能直接将截图粘帖到web页面上,然后上传?答案是:可以的.这就是本文要介绍的内容了. 由于我的项目有上传屏幕截图这样的需求,为了用户体验更佳,减少操作步骤,我在网上搜了一遍之后,找到了一些眉目.为了便于复用和共享,我又对该功能做了一些封装,于是便有了这个插件 screenshot-paste.运行效果如下图: 插件调用

  • iOS app 右滑返回操作的两种方法

    前提条件,存在A和B两个页面,A是主界面,A push 到 B 方法一:如果B页面的返回按钮要用自定义的按钮(在iOS7中,如果使用了UINavigationController,那么系统自带的附加了一个从屏幕左边缘开始滑动可以实现pop的手势.但是,如果自定义了navigationItem的leftBarButtonItem,那么这个手势就会失效.) 在A界面: - (void)viewDidAppear:(BOOL)animated { self.navigationController.i

随机推荐