开发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_proxy和RemoteDebug 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. http跨域访问

    if (Request.Headers.Get("Origin") != null) { filterContext.HttpContext.Response.AddHeader( ...

  2. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  3. MySQL学习总结（二）数据库以及表的基本操作

    上一节中详细的介绍了关于MySQL数据库的安装过程,接下来我们就该对数据库以及表进行一些基本的操作了. 1.数据类型 MySQL数据库中提供了整数类型.浮点数类型.定点数类型.日期和时间类型.字符串类 ...

  4. 【剑指Offer面试题】 九度OJ1510：替换空格

    c/c++ 中的字符串以"\0"作为结尾符.这样每一个字符串都有一个额外字符的开销. 以下代码将造成内存越界. char str[10]; strcpy(str, "01 ...

  5. PCIe调试心得_DMA part1

    作者 :East  FPGA那点事儿 1.PCIe的DMA介绍在PCIe中需要使用DMA的项目,一定要先看XAPP1052,里面包含一个DMA的参考设计,对初学者有极大的帮助. XAPP1052中包含 ...

  6. makefile之wildcard函数

    $(wildcard PATTERN) 函数功能: 获取匹配 PATTERN 的所有对象 返回值: 使用空格分割的匹配对象列表 1. 示例1

  7. cocos2d-x发生undefined reference to `XX'异常 一劳永逸解决办法

    cocos2d-x发生undefined reference to `XX'错误 一劳永逸解决方法 参考文章: http://blog.csdn.net/kafeidev/article/detail ...

  8. iOS应用代码段瘦身办法

    iOS应用代码段瘦身办法 大型app应对苹果官方代码段大小限制的小伎俩… 背景 苹果官方文档 对二进制 __TEXT 段大小有限制: 代码实在瘦不下去怎么办? 解决方案 利用 rename_secti ...

  9. ELK-“线上标准文档”——测试

    Elasticstack官网:https://www.elastic.co 本文档仅限搭建过程参考,使用相关的文档,不在本文档讨论范围之内. 一切依据的核心即是Elasticstack官网. 查看支持 ...

  10. Hadoop中MapReduce计算框架以及HDFS可以干点啥

    我准备学习用hadoop来实现下面的过程: 词频统计 存储海量的视频数据 倒排索引 数据去重 数据排序 聚类分析 ============= 先写这么多