需要在ipad上调试代码, 经过一番搜索(多在google搜到的), 稍微整理下 : ).

1. Settings -> Safari -> Advanced/Developer -> Debug Console

  最容易搜到的就是这个, 在桌面选择"设置", 找到"Safari", 点"高级/开发者", 据说下面会有个"调试控制台(debug console)"按钮, 但是我死活没能找到, 可能是safari较旧引起的.

  即使可以使用, 功能也是很有限的, 各种吐槽.

    开启按钮的图文解说

2 firebug lite

  2.1

    当然也可以在页面中嵌入firebug lite;

  2.2

    或者建个新书签加载firebuglite;

    查看如何新建

  2.3

  也可以利用后台, 判断参数, 修改传回的内容;

  <?php if(isset($_GET['debug'])): ?>
    <script type="text/javascript" src="firebuglite.js"></script>
  <?php endif; ?>

3 edge inspect

  这是我觉得蛮好的, 但是后期可能要交$;

  大致的步骤是:

    PC上下载该软件 -- PC中的Chrome浏览器安装edge inspect 插件 -- ipad上安装"行动客户端"(你如果是ios, 点击那个iOS按钮就可以了)

    具体看这里

  目前用到两个比较实用的特性:

  连接设置完以后, PC和ipad 可以同步刷新页面;

  另外, 在PC的开发者工具中, 修改页面可以实时显示到ipad中, 就像PC调试一样, 只不过显示在ipad.

  (远程调试原理大致是新建个服务器, 让移动设备访问).

4 IOS设备上Safari浏览器的前端调试解决方案

  3.1 IOS模拟器
    http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary/
    https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
    http://www.ychong.com/safari-ios-iphone-itouch-web-dev-inspector/

    如果是iOS6以上的, 直接开启远程调试就可以, 但是PC必须是Mac系统, 因为Mac才可以装safari 6.x;

    同理, 如果ipad是一代的, 那也不行哦;

    当然愿意在PC装虚拟机也可以.

  3.2xcode中的IOS模拟器.

5 Chrome user agent switcher

  另外还有一个简洁的模拟方式, PC上的Chrome的开发者工具中,

  点击右下角的"齿轮", 打开设置面板, 选中override一栏,

  其中可以修改 user agent, 同时选中"Emulate touch event"可以模拟移动端特有的触摸事件, 但是也不会妨碍鼠标事件的触发.

  如果仅仅是测试页面布局和鼠标事件, 那用这个最为方便.

ipad/iphone中的前端调试的更多相关文章

  1. Delphi XE4 For IOS中程序的调试(虚拟机,真实机和win32)

    安装完之后,大家可以看一下XE4可以新建的工程类型: File->New: 是不是多出了FireMonkey Mobile Application这一个选项呀! 然后你再点击这个菜单项,弹出Fi ...

  2. iOS中web app调试(mac)

    原文 iOS中web app调试(mac).md 目录 一.真机联调配置 二.mac上Safari配置及真机联调 三.iOS模拟器使用 四.在iOS模拟器中安装app 近期公司vue项目开发,目的是一 ...

  3. iOS开发——高级篇——iPad开发、iPad开发中的modal

    一.iPad简介 1.什么是iPad一款苹果公司于2010年发布的平板电脑定位介于苹果的智能手机iPhone和笔记本电脑产品之间跟iPhone一样,搭载的是iOS操作系统 2.iPhone和iPadi ...

  4. iOS开发UI篇—iPad开发中得modal介绍

    iOS开发UI篇—iPad开发中得modal介绍 一.简单介绍 说明1: 在iPhone开发中,Modal是一种常见的切换控制器的方式 默认是从屏幕底部往上弹出,直到完全盖住后面的内容为止 说明2: ...

  5. iPad开发中UIPopoverController的使用

    什么是UIPopoverController 是iPad开发中常见的一种控制器 跟其他控制器不一样的是,它直接继承自NSObject,并非继承自UIViewController 它只占用部分屏幕空间来 ...

  6. iPhone页面的常用调试方法

    在iPhone中调试,大体上与上文 安卓中的移动页面调试 类似,区别主要是iOS系统中的一些限制,导致某些工具无法使用. 本文基于此,简要介绍在iPhone中如何调试页面. 最终可以实现在Mac平台使 ...

  7. 4张图看懂delphi 10生成ipa和在iPhone虚拟器上调试(教程)

    4张图看懂delphi 10生成ipa和在iPhone虚拟器上调试(教程) (2016-02-01 03:21:06) 转载▼ 标签: delphi ios delphi10 教程 编程 分类: 编程 ...

  8. 【转】手机web前端调试页面的几种方式

    前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...

  9. 理解活在Iphone中的那些App (四)

    App生存环境之宿主环境 终于开始说一些技术性的话题了,从这里开始的一些技术细节的东西,以前我也没有太刻意的注意过.为了写这个也是刚刚看了一点资料,如果有纰漏,恳请指出. 一个App生存的宿主环境主要 ...

随机推荐

  1. HTML5的 input:file上传类型控制(转载)

    http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...

  2. MySQL 初识01

    最近开始学习MySQL 所以将这两天所学习到的知识简单小结一下 1.status 显示数据库信息 2.数据类型: a.字符串: char(m):固定长度的字符,最多255个字符: varchar(m) ...

  3. lintcode-60-搜索插入位置

    60-搜索插入位置 给定一个排序数组和一个目标值,如果在数组中找到目标值则返回索引.如果没有,返回到它将会被按顺序插入的位置. 你可以假设在数组中无重复元素. 样例 [1,3,5,6],5 → 2 [ ...

  4. Chrome Extension & Dark Theme

    Chrome Extension & Dark Theme https://chrome.google.com/webstore/detail/eimadpbcbfnmbkopoojfekhn ...

  5. js canvas captcha

    js canvas captcha https://thejackalofjavascript.com/building-a-captcha-using-html5-canvas/ https://a ...

  6. Delphi xe7组件和控件的安装方法

    暂时我所遇到的所有控件安装方法大体与下面两种相同. 若有不同大家提出来,一起想办法解决. .dproj格式的组件安装方法: raise组件 安装详细步骤如下: 一.设置搜索路径1. 将本包中的文件连同 ...

  7. 【bzoj4813】[Cqoi2017]小Q的棋盘 树上dfs+贪心

    题目描述 小Q正在设计一种棋类游戏.在小Q设计的游戏中,棋子可以放在棋盘上的格点中.某些格点之间有连线,棋子只能在有连线的格点之间移动.整个棋盘上共有V个格点,编号为0,1,2…,V-1,它们是连通的 ...

  8. media="screen"是什么意思?

    <link rel="stylesheet" href="css/main.css" type="text/css" media=&q ...

  9. BZOJ4487 JSOI2015染色问题(组合数学+容斥原理)

    逐个去除限制.第四个限制显然可以容斥,即染恰好c种颜色的方案数=染至多c种颜色的方案数-染至多c-1种颜色的方案数+染至多c-2种颜色的方案数…… 然后是限制二.同样可以容斥,即恰好选n行的方案数=至 ...

  10. [HDU3710] Battle Over Cities [树链剖分+线段树+并查集+kruskal+思维]

    题面 一句话题意: 给定一张 N 个点, M 条边的无向连通图, 每条边上有边权 w . 求删去任意一个点后的最小生成树的边权之和. 思路 首先肯定要$kruskal$一下 考虑$MST$里面去掉一个 ...