【移动端调试 — iPhone +Safari】的更多相关文章

移动端调试 — iPhone +Safari

1   开启iOS设备的调试功能 打开“设置”程序,进入“Safari”->“高级”页面开启“Web检查器”: 2   mac safari浏览器设置开发者工具 safari ->偏好设置 -> 高级 ->勾选在在菜单栏中显示开发菜单 3   链接USB线,在手机端发送url请求,并在mac Safari中加载本地请求,进入调试页面…

移动端页面 iPhone + Safari 页面调试 之 正确查看网络请求的姿势

如题 本文主要将 Safari + iPhone 前端开发调试  之 正确查看网络请求的 姿势 惯例 说下问题场景: 早知道safari(Mac) + iPhone 调试的方便 能解决很多日常调试问题,但有次帮人调试问题 发现是接口报错 但不知道接口数据 和传参数 在哪里查看 强行装b失败. 场景介绍完毕 作为一个尽量做到不 不求甚解的软件从业者 我是不会就此退缩呢.(其实是因为装B失败 要扳回一城)故有本文的由来 其实本文的东西也很简单. 下面简单说下: 首先那 一般调试的教程 网上搜了一通…

移动端调试Web页面

移动端调试Web页面 虽然可以在PC下,通过开发者工具,模拟移动端,但是这样只能模拟页面样式,对于代码的执行情况是无法模拟的,所以在此结合实际调试经验,针对安卓与IOS设备,进行总结. IOS 安卓 IOS 软件准备 Node.js Scoop Remotedebug-ios-webkit-adapter 说明: Scoop是一款Windows下命令行包管理工具 Scoop安装完后,通过它下载 ios-webkit-debug-proxy 安装Node模块:remotedebug-ios-web…

如何禁止 iPhone Safari video标签视频自动全屏？

最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> </video> 在iPhone safari 点击视频会弹出播放器进行全屏播放. 在网上看了看…

windows 下安装chrome 调试iphone插件 ios-webkit-debug-proxy

必备: 1. .NET Framework 4.5 及以上版本 2.powershell 5.1及以上版本 3.可正常访问  https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1 此网站(需要网络翻.墙) 打开部分图如下: 4.安装  iTunes 在window环境下,通过powershell 安装 scoop 再安装插件 ios-webkit-debug-proxy 比较方便,下面介绍一下我安装成…

移动端调试利器 JSConsole 介绍

先看这篇文章 Web应用调试:现在是Weinre和JSConsole,最终会是WebKit的远程调试协议. 我们先不看未来,从此文可见,当下的移动端调试还是 Weinre 和 JSConsole 的天下.Weinre 我们在前面已经有所了解(详见 移动端页面(css)调试之"weinre大法"),它主要是为了移动端 css 的调试,能兼容各种浏览器,支持 css 修改,且不用刷新就能在移动端看到效果.今天我们来了解下另一种利器 -- JSConsole. 移动端的调试最蛋疼的恐怕就是想…

解决iphone safari上的圆角问题

-webkit-appearance : none ; /*解决iphone safari上的圆角问题*/…

debuggap，移动端调试新方式

最近发现了一个移动端调试的新技能,这里简单描述一下基本情况. 移动端调试常遇到的问题 手机访问只能看到页面的展现,除此之外看不到任何其他信息 无法像调试PC页面那么方便的查看js.dom.network.cookie.storage等信息 js调试只能通过alert来提示了,当然经验丰富的开发者,会制作一个简单的调试信息展示页面,相当于控制台的功能. debuggap简介 run easily and debug powerfully 无需安装,就可以在windows.linux和mac上运行…

【学习】苹果iPhone safari浏览器样式重置修复按钮圆角bug

iPhone safari浏览器中,input按钮会按苹果的默认UI来渲染,例如,写的按钮明明是这个样的: 但是实际就会是这个样子: 怎么办呢? 为按钮添加:-webkit-appearance: none; 即可解决!…

CoCos2dx开发：PC端调试运行正常但打包apk文件后在手机上点击闪退

记:今天调试时出现的一个PC端调试运行正常,但打包apk文件后在手机上点击闪退的问题. 可能在不同的情况条件下,会有不同的原因导致apk安装后闪退问题.拿android studio等软件来说,开发安卓程序时会有日志log文件包含生成错误信息等,但是cocos2dx开发在命令行里编译apk,意外的错误缘由难以直面地展现给我们. 闪退的大致问题都殊途同归:资源的加载出现问题. 我今天出现这个问题之后,进行了一些尝试,在解决问题的过程当中,大致操作如下: 1.将Resources资源文件夹下的全部目…

iphone safari浏览器CSS兼容性的解决方案集合

1.iphone safari不兼容CSS的active的解决方案如下: <body ontouchstart="" onmouseover=""> </body> 参考链接:http://stackoverflow.com/questions/8330559/hover-effects-using-css3-touch-events…

【工具】PC端调试手机端 Html 页面的工具

一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.iteye.com/blog/1846858 http://blog.csdn.net/dojotoolkit/article/details/6280924…

移动端调试利器-vConsole

现在移动端开发越来越火,随之而来的问题也越来越多,今天给大家介绍一款移动端调试神器,vconsole. 一.先引用文件,可以从https://www.bootcdn.cn/vConsole/下载,也可以下载保存在本地,直接引用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo.html</title> <script src=&q…

移动端调试神器vconsole,手机端网页的调试工具Eruda

移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE/vConsolevConsole是一款由微信公众平台前端团队打造的前端调试面板,专治手机端看log难题.目前vConsole自带有2个面板,默认为“日志”面板,负责展示log. 项目开发时经常需要debug调试,但在移动端debug则会阻断代码运行,并且很难判断出错在哪里,这里我们需要借助第三方插…

移动端调试神器vConsole

vConsole.js 其实就是重写console方法,实现了类似于微信小程序的移动端调试效果 在普通html文件里使用 <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script> // init vConsole var vConsole = new VConsole(); console.log('Hello world'); &l…

Mac下的Chrome或Safari访问跨域设置，MBP上使用模拟器Simulator.app或iphone+Safari调试网页

Mac下的Chrome或Safari访问跨域设置: mac下终端启动Chrome $ open -a Google\ Chrome --args --disable-web-security 或 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security mac下终端启动Safari(试过没用!) open -a '/Applications/Safari.app' --args --…

safari无法调试iphone提示“无可检查的应用程序”的解决方法

iphone上打开safari,随便访问一个网站,mac上通过Safari的开发,我的iphone是可以看到的.如果打开APP,就提示“无可检查的应用程序”. 解决方法 使用XCode运行我们的App就可以了. 原因是打包好的APP无法通过safari调试,而Xcode运行的是可以调试的.难道需要像 Android一样需要开启APP的调试模式?…

safari 调试iPhone web页面

safari设置-打开Safari偏好者设置,选中“高级菜单”,在页面最下方看到“在菜单中显示开发菜单”的复选框,在复选框内打钩,这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone 设置-打开iPhone手机设置app 选择Safari,找到高级选项,有JavaScript开关web检查器开关,讲两个开关都打开 iPhone接上mac上,打开Safari浏览器,运行手机app里面的web页面,在开发菜单中选择连接的手机,找到调试的网页,就能在Safari里面调试了…

如何使用 UC浏览器开发者版 进行移动端调试

在 如何用 fiddler 代理调试本地手机页 一文中我们了解了如何用手机查看 PC 端写的网页(本地),但是我们只能看到页面效果,如果哪段 js 挂了,那部分样式失效了,我们该如何进行调试呢?今天为大家介绍的 UC 浏览器开发者版(安卓版)就是这样一个神器! 1.一台PC.一台手机 很显然首先你得需要一台 PC 机,一台手机,并把它们连上同一个网段的网络(推荐做法,也可以 USB 连接调试,详见UC浏览器开发者版). 2.PC.移动端文件安装 毫无疑问,移动端需要安装 UC 浏览器开发者版.而…

通过Mac远程调试iPhone/iPad上的网页(转)

我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非常不方便,所以一直没有 Web 检查器这一类工具. 但是 iOS 6 的发布解决了这个问题. iOS 6 给 Safari 带来了远程的 Web 检查器工具(Remote Web Inspector),你可以通过模拟器或者真实的设备(通过 USB 连上 Mac)进行调试.下面我讲讲详细的调试过程:…

100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全

Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式,在 Mac 中的 Safari 浏览器 同样开启开发者模式后,进行联机调试.功能彪悍. 最近在做一个页面时,发现在 iPad 的 Safari 浏览器中背景显示不全,定位到该 div 后发现所指定 css 的宽度为 100% : 到百度搜索后发现,safari 中 viewport 默认宽度为 980px,若事先未指定其初始 viewport 宽度,则会默认按照 980px 处理. 可以默认初始化 viewport 宽度或在…

Eruda 一个被人遗忘的移动端调试神器

引言 ​ 日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于fiddler.Charles.chrome devtools.Firebug.还有Safari远程调试等比较熟悉,甚至有些是我可能也没有用过的: 这里喷一句吧,谁都别给我提IE啊,IE那个不叫调试工具,那叫坑爹神器,话说最近不是又甩锅了,把自己的革命老根据地都甩了. 俗话说预先善其事必先利其器,今天想给大家分享的是一个可能被人们忽略的小工具,为什么说被人们忽略呢?因为发现g…

chrome调试、移动端调试

chrome 32版本后,添加 DevTools for Mobile 插件就可远程手机调试 DevTools for Mobile插件安装https://support.google.com/chrome/topic/3422804?hl=zh-Hans&ref_topic=3422738 chrome 32版本之前的调试需要安装 ADB插件和 android SDK 软件 Android上使用Chrome DevTools 远程调试WebView   相关文章: http://blog.cs…

移动端调试 weinre

weinre 是基于 Node 的工具,因此使用如下命令安装 weinre $ npm install -g weinre 用上面的命令将 weinre 安装到全局,然后就可以使用 weinre的命令了. Weinre 提供了6个可选的启动参数,其中下面两个参数一般会修改,其它的用默认值就可以了. --httpPort 调试服务器运行的端口,默认的 8080,如果这个端口有在用,可以改为其它端口: --boundHost 调试服务器绑定的 IP 地址,也可以是域名,默认是 localhost,还…

iPhone safari中Document事件不触发的解决方案 [冒泡]

写了一个下拉菜单,在单击空白地方的时候隐藏. 第一时间就是用$(document).click(function(){   //隐藏代码  }); 各大浏览器都没问题,唯独iPhone上的不会触发事件. 后来排查了一遍原因发现,Safari中是这样处理事件冒泡的: 1.点击某个DIV或其他元素. 2.发现没有处理该事件,继续往上冒泡. 3.直到冒泡到body下面的子节点为止,还是没有人处理该事件的话,就把该事件丢弃掉.不再往上冒泡. 4.只要在这一条冒泡链当中,有一个节点处理了该事件,它就不会丢…

解决iframe在移动端(主要iPhone)上的问题

前言 才发现已经有一段时间没有写博客了,就简单的说了最近干了啥吧.前段时间忙了杂七杂八的事情,首先弄了个个人的小程序,对的,老早就写了篇从零入手微信小程序开发,然后到前段时间才弄了个简单的个人小程序,主要是关于菜式方面制作的,原因么,就在我另外一件事情上有说到了,就是然后又弄了个个人的公众号<前端美食汇>(附:个人介绍链接).大概之前就干了这两事.不过老实说也不用多少时间.搞得好像用了我很多时间似的,哈哈,还是懒~~~ 重点补充下,以为博客的文章的侧重点会在解决项目上遇到的实际问题,而在公众号…

移动端调试神器 whistle

移动端h5页面嵌入的方式多种多样,普通的chrome真机调试功能有时就不能满足要求了. whistle通过设置wifi服务器代理的方式,可以抓包调试所有移动端请求的页面. whistle的github地址:https://github.com/avwo/whistle/blob/master/README-zh_CN.md. 总的来说,分成3步: 1. 启动代理服务器. 依托node,全局安装whistle,通过 whistle start 命令启动. 2. 浏览器设置代理服务器,用于显示抓包调…

移动端调试神器-vConsole

什么是vConsole?   官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vConsole的使用场景? 比如测试妹纸拿着手机过来跟你说某个页面打不开.你心想,怎么可能,我在电脑上用Chrome调试得好好的,也没有报错啊. 然后你接过测试妹纸的手机发现确实有个页面打不开.问题来了,移动端又不能像PC端打开控制台调试,我要怎么排错呢? vConsole就运应而生了 vConsole…

移动端调试利器之vconsole

说明 由于移动端项目在手机中调试时不能使用chrome的控制台,而vconsole是对pc端console的改写 使用方法 使用 npm 安装: npm install vconsole 使用webpack,然后js代码中: import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole let vConsole = new VConsole() // 初始化 或者找到这个模块下面的 dist/vconsole.min…

移动端调试和fiddler移动端抓包使用

这里介绍一款移动端的调试工具以及抓包工具fiddler的使用.也是初次接触,算是初次接触的总结. 1,移动端调试工具.手机截图如下 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>干货-课程-完成</title> <meta name="viewport" conten…