精华内容
下载资源
问答
  • mac的safari浏览器调试h5

    千次阅读 2019-03-05 10:27:00
    在h5开发移动端时,兢兢业业的开发的完成后,本地电脑测试,无bug,完美。...这个时候加入你在mac的Safari 浏览器上稍加调试,问题就出现了,我们可以清晰的看到错误原因和报错信息。ok,那就解决问...

    在h5开发移动端时,兢兢业业的开发的完成后,本地电脑测试,无bug,完美。在自己的新手机上测试,也没有bug,ok,交付。

    然而,在测试阶段,bug来了,这个按钮怎么点击无反应?这个样式怎么不对?。。。明明没有bug呀,难道又是兼容性问题?头疼,到底是什么原因呢。

     

    这个时候加入你在mac的Safari 浏览器上稍加调试,问题就出现了,我们可以清晰的看到错误原因和报错信息。ok,那就解决问题了。

    具体怎么调试呢,看下方:

     

    一、参考链接

    ios开发者文档

    safari开发者工具

    remote debugging safari

    二、设置iphone

    设置 -> Safari -> 高级 -> 开启web检查器

    三、设置mac

    Safari -> 偏好设置 -> 高级 -> 勾选显示开发菜单

    四、连接手机和电脑

    1、用数据线,mac转接头把iphone和mac连接起来;
    2、打开iphone的Safari浏览器中需要调试的网页;
    3、打开mac的Safari浏览器,开发 -> 手机名称 -> 选择正在调试的网站;
    4、选择元素,用电脑调试手机真机页面。

     

     

     

    转载至:https://www.cnblogs.com/camille666/p/mac_safari_debug_ios_page.html

    转载于:https://www.cnblogs.com/mufengforward/p/10475111.html

    展开全文
  • 在web开发的过程中,抓包、调试页面样式、查看请求头是很常用的技巧。其实在iOS开发中,这些技巧也能用(无论是模拟器还是真机),不过我们需要用到mac自带的浏览器Safari。所以,本文将讲解如何使用Safari对iOS程序...

    原文链接:http://blog.csdn.net/lovelyelfpop/article/details/70213326


    在web开发的过程中,抓包、调试页面样式、查看请求头是很常用的技巧。

    其实在iOS开发中,这些技巧也能用(无论是模拟器还是真机),不过我们需要用到mac自带的浏览器Safari。

    所以,本文将讲解如何使用Safari对iOS程序中的webview进行调试。

    1 打开ios模拟器或真机的Web检查器

    【设置】->【Safari】->【高级】->开启【Web检查器】
    打开iphone设备中的web检查器

    2 开启Mac上Safari的开发者模式

    【Safari】->【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】勾选
    打开Safari中的开发者模式

    3 写一个webview并加载一个网页

    #import "ViewController.h"
    @interfaceViewController ()
    
    @property (strong, nonatomic) UIWebView *webView;
    
    @end
    
    @implementation ViewController
    
     - (void)viewDidLoad {
        
        [superviewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        
        _webView = [[UIWebViewalloc] initWithFrame:self.view.bounds];
        [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
        [self.view addSubview:_webView];
     }
    
    @end
    

    4 在模拟器(真机)中打开webview/Cordova应用,并打开Safari查看网络信息

    【开发】->【iOS Simulator】->【正在调试的网站】
    如果是真机,那就是【开发】->【手机名称】->【正在调试的网站】
    注意:必须要webview在加载网页时,打开Safari才可以看到调试模式。
    打开Safari中的调试

    在弹出的调试窗口中,可以看到当前正在加载网页的各种信息,包括源码、请求头、图片、加载的资源与脚本、控制台输出等。并且它和web前端的调试方式相同,你可以直接修改网页的CSS样式,对网页布局等进行修改,而不用重新运行整个App。

    5 修改web样式和断点调试JS

    将光标选中到要修改的样式,进行修改后,可以直接在模拟器中看到修改后的效果。
    直接修改webview中的样式

    当然也可以调试js脚本

    展开全文
  • 最近在进行移动端的开发,本地运行的页面样式和真机测试时样式有区别。需要在真机上调试,查找问题。 需具备的条件: 1.苹果手机 2.苹果电脑 3.数据线 开始操作: 1.查看电脑本机ip,控制台输入命令:ifconfig |grep...

    最近在进行移动端的开发,本地运行的页面样式和真机测试时样式有区别。这个时候就需要通过设置代理使手机能够访问电脑端的网页。

    所需设备:
    1.ios手机
    2.mac电脑
    3.mac电脑安装Charles软件(一个抓包工具)

    开始操作:
    1.查看电脑本机ip,控制台输入命令:ifconfig |grep inet
    2.打开苹果手机,设置http代理(如何用iPhone手机设置代理)。输入本机IP(xx.xx.xxx.xx),和端口(8888)。
    3.打开Charles软件。在软件的页面中可以看到手机上打开运行的网址。
    4.打开手机上的safari浏览器,在浏览器中输入网址(本地开发时的网址),即可在真机上看到和电脑本地运行时的网页的一样的页面。此时在本地调试,真机也可以看到页面。

    上面的步骤只可以在真机上浏览调试的样式,还不可以在真机上调试。如果要实现在真机上调试,需要接着做一下步骤。

    4.手机链接上电脑
    5.打开Mac上Safari的开发者模式,流程是【Safari】->【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】勾选。
    在这里插入图片描述

    6.打开电脑上的Safari浏览器,按照路径:【开发】->【手机名称】->【正在调试的网址】,点击进入,就可以按照调试pc端页面的思路来调试ios的页面了。

    如果移动端利用chrome浏览器在PC端进行调试,可参考文章:https://www.imooc.com/article/282755

    展开全文
  • safari对web调试

    2016-07-13 18:05:58
    web开发中,少不了抓包,调试页面样式,js是家常便饭了,可以借助于mac自带的浏览器Safari对webview的调试 1. 打开iPhone手机的开发者模式 设置->Safari->高级->Web检查器(web inspector 这项打开)。 2. 打开...

    web开发中,少不了抓包,调试页面样式,js是家常便饭了,可以借助于mac自带的浏览器Safari对webview的调试

    1. 打开iPhone手机的开发者模式

    设置->Safari->高级->Web检查器(web inspector 这项打开)。

    2. 打开Mac上Safari的开发者模式
    Safari->偏好设置->高级->菜单中找到开发勾选

    3.在真机打开预览的界面,监控safari控制台,可以修改样式或者js




    展开全文
  • Safari调试iOS应用

    2019-06-26 15:17:40
    思路: 搜索一下 hubilder xcode 真机调试 ...HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。 系列文章目录导航: 调试方式介绍一 边改边看 调试方式介...
  • 使用Safari调试WebView

    2016-02-25 15:12:14
    在web开发的过程中,抓包、调试页面样式、查看请求头是很常用的技巧。其实在iOS开发中,这些技巧也能用(无论是模拟器还是真机),不过我们需要用到mac自带的浏览器Safari。所以,本文将讲解如何使用Safari对iOS程序...
  • iOS 用safari调试webview

    千次阅读 2018-01-10 12:01:20
    iOS 用safari调试webview需要先打开模拟器,后打开Safari,否则可能会出现在Safari-开发下看不到simulator1.打开iPhone或者模拟器上的web调试器设置-Safari-高级-web检查器 右侧按钮打开2.safari 工具栏显示开发...
  • LZ-Says:勇敢说出来,虽然...无奈着使用 Android 以及 iOS 设备分别打开进行复现,果不其然,iOS 上出现了不兼容,某些样式出现问题。 犯愁,这个怎么调试呢? 网上搜索各种方案,只有一个结果,那就是纯粹的浪费...
  • Safari调试iOS中的js

    千次阅读 2015-08-27 18:45:54
    对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式,还能跟踪分析页面资源加载性能等问题。 对于移动...
  • App混合开发现已是常态,不过作为app端开发人员,对H5页面的使用,可不能简单的局限于使用,一些简单的调试方法还是有必要了解的。..."Safari"->"高级"->"Web检查器" 二、打开电脑上Safar...
  • 使用safari对webview进行调试

    万次阅读 2015-12-01 23:37:30
    在web开发的过程中,抓包、调试页面样式、查看请求头是很常用的技巧。其实在iOS开发中,这些技巧也能用(无论是模拟器还是真机),不过我们需要用到mac自带的浏览器Safari。所以,本文将讲解如何使用Safari对iOS程序...
  • 在web开发的过程中,抓包、调试页面样式、查看请求头是很常用的技巧。其实在iOS开发中,这些技巧也能用(无论是模拟器还是真机),不过我们需要用到mac自带的浏览器Safari。所以,本文将讲解如何使用Safari对iOS程序...
  • 一开始Safari Web Inspector在调试iPhone时一切都正常,期间好像是更新了一下电脑(Safari 14.1.1),然后再调适iPhone的时候就没有元素和源码信息了。望大佬指点~ 效果如图&#...
  • 在Web开发的过程中,抓包、调试页面样式、查看请求头是很常用的技巧。其实在iOS开发中,这些技巧也能用(无论是模拟器还是真机),不过我们需要用到Mac自带的浏览器Safari。所以,本文将讲解如何使用Safari对iOS程序...
  • 转自:... 使用safari对webview进行调试 时间2016-02-25 14:35:20陈斌彬的技术博客 原文http://cnbin.github.io/blog/2016/02/25/shi-yong-safaridui-webviewjin-xing-diao-shi/ 主题i...
  • 运行app,打开webView,然后打开safari开发菜单,选择模拟器还是iPhone,选择对应的app就可以跳出Html调试界面,此处就不调试截图.   转载于:https://www.cnblogs.com/HJiang/p/7942846.html
  • 我经历过许多 CSS 代码的调试工作,有别人写的也有自己写的,有移动端平台的也有标准桌面浏览器的,从陈旧的 IE 到最新的基于 Webkit 的每日构建。经验告诉我,很多人并没有一个标准的 CSS 调试流程。我发现在大多数...
  • 我们电脑浏览器如果出现CSS兼容问题,现在很好解决,Chrome浏览器自带检查工具,火狐浏览器的FireBug也很好用,Safari、360、 IE、EDGE都有自己的调试工具。他们可以查看html+JS+CSS如何被解释的,如果被解释错了...
  • Mozilla已经实现了可以在桌面或Android上的Chrome浏览器及iOS上的Safari浏览器中启用远程调试的协议适配器,并将把它们集成到WebIDE中。\\Mozilla早在今年6月就发布了WebIDE,提供了一种在Firefox OS设备和模拟器上...
  • 1.safari-偏好设置-高级:勾选“在菜单栏中显示‘开发’菜单” 2.iphone-safari设置-高级-勾选“WEB检查器” 3.连接手机与mac后,在safari-开发中选择iphone中打开的页面即可。 PS:点击下图中的位置可以在手机上...
  • 当我在Chrome上完成调试后,我会接着在Safari或者Firefox上调试。 如果在这些“好的”浏览器上没有达到期望的效果,很有可能是代码本身违背了CSS规则。不要试图使用hack方法来解决在这些“好的”浏览器上出现的问题...
  • 開発-->Webインスぺクタ (web Inspector) Inspector 检查员; 测定器 之后选择左下角的图标,代码页面和画面分开显示 ...分开后,会看到代码页面上由于个放大镜的图标。...・这里引用的所有的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,878
精华内容 3,151
关键字:

safari样式调试