开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素。其实可以通过将设备连接到PC,使用PC的开发者工具检测

一、针对android设备

1、在android设备上开始开发者模式

2、将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices

3、在手机上打开网页的时候,chrome就会检测到网页,可以直接调试

二、针对IOS设备

PS:如果使用的是MAC电脑,可以直接在safari的开发里面找到,我的Iphone里面可以检测网页

1、在Iphone的设置-》safari-》高级-》web检查器。打开

2、在电脑上安装ios_webkit_debug_proxyRemoteDebug iOS WebKit Adapter

3、启动RemoteDebug iOS WebKit Adapter

remotedebug_ios_webkit_adapter --port=9000

4、在chrome地址栏输入:chrome://inspect/#devices,在Discover network targets里面增加localhost:9000,就可以在chrome里面调试手机页面了

通过chrome浏览器调试手机页面(IOS和Android)的更多相关文章

  1. Chrome调试手机页面

    新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chro ...

  2. 【前端调试手机页面】分享一款便捷的调试工具--spy-debugger

    spy-debugger  :  微信调试,各种WebView样式调试.手机浏览器的页面真机调试.便捷的远程调试手机页面.抓包工具,支持:HTTP/HTTPS,无需USB连接设备. github地址: ...

  3. Google Chrome浏览器调试入门————转载只为自己查看方便

    Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...

  4. chrome://inspect调试html页面空白,DOM无法加载的解决方案

    chrome://inspect调试html页面空白,DOM无法加载的解决方案 先描述一下问题 有一段时间没碰huilder hybird app 开发了,今天调试的时候 chrome://inspe ...

  5. 使用fiddler4做代理调试手机页面

    由于一般手机不能改host,手机页面如果涉及到各个域名ip的混合使用,在手机上调试看效果非常麻烦. 使用fiddler4做代理,手机跟电脑连到同一个局域网,手机上网通过电脑做个代理上网,那么一切请求就 ...

  6. chrome浏览器调试功能之后端篇

    作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后 ...

  7. flex chrome浏览器调试flex程序

    flex chrome浏览器调试出现空白的解决方法: 1,为chrome安装flash player,禁用chrome自带的flash player:参考:http://www.jb51.net/ar ...

  8. chrome浏览器调试线上文件映射本地文件

    chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不 ...

  9. Android 获取手机(ios,android)的设备唯一码(mac地址, IMEI)

    { /*获取手机(ios,android)的设备唯一码(mac地址, IMEI)2018年02月16日 ⁄ 综合 ⁄ 共 2697字 ⁄ 字号 小 中 大 ⁄ 评论关闭 app中总会用到客户端下载量数 ...

随机推荐

  1. C#解析XML文件

    想实现:C#读取XML文件内的内容至List XML文件:AppAttr.xml  其中,一定是要ArrayOfAppAttr(红色部分AppAttr为你的实体类名) <?xml version ...

  2. 将textarea滚动至底部:

    var textarea = document.getElementById('id');textarea.scrollTop = textarea.scrollHeight;

  3. django之整体复习

    1. 配置文件: media: avatar = models.FileField(upload_to='avatar') sessiongs MEDIA_ROOT=os.path.join(BASE ...

  4. Redis(十四):主从复制

    当数据量变得庞大的时候,读写分离还是很有必要的.同时避免一个redis服务宕机,导致应用宕机的情况,我们启用sentinel(哨兵)服务,实现主从切换的功能. 主从复制 Redis 支持简单且易用的主 ...

  5. mysqldump全量备份+mysqlbinlog二进制日志增量备份

    日常的数据备份及恢复测试,是DBA工作重中之重的事情,所以要做好备份及测试,日常的备份常见有mysqldump+binlog备份.xtrabackup+binlog备份,无论那一种,几乎都少不了对bi ...

  6. LeetCode总结 -- 树的求和篇

    树的求和属于树的题目中比較常见的,由于能够有几种变体,灵活度比較高,也能够考察到对于树的数据结构和递归的理解. 一般来说这些题目就不用考虑非递归的解法了(尽管事实上道理是跟LeetCode总结 -- ...

  7. dataGridViewX操作

    private void dataGridView1_RowStateChanged(object sender, DataGridViewRowStateChangedEventArgs e) { ...

  8. MySql导入导出数据库(含远程导入导出)

    一.导入导出本地数据库    导出: 1.先运行cmd,cd 到mysql安装目录中的bin文件夹 2.mysqldump -u root -p 数据库名 > 导出文件名.sql 其他情况下: ...

  9. 自定义流水号的autocode

    ; } }; ); dac.executeUpdate(); , TimeUnit.); ); ); } ); }}

  10. java 新特性学习笔记

    java 1.7 Files.write(path,list,StandardCharsets.UTF_8,StandardOpenOption.APPEND); String preTime = F ...