开发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. [cocos2dx笔记010]用于UI的事件管理器

    cocos2dx有一个编辑器:cocostudio.眼下来说,已经是比較好用了.仅仅要载入导出的资源.就能够用上了.省去手动搭建面的麻烦. 可是.非常多须要事件的地方,操作比較麻烦,所以这里提供一个事 ...

  2. 【Unity】开发WebGL内存概念具体解释和遇到的问题

    自增加unity WebGL平台以来.Unity的开发团队就一直致力于优化WebGL的内存消耗. 我们已经在Unity使用手冊上有对于WebGL内存管理的详尽分析,甚至在Unite Europe 20 ...

  3. freeswitch编译java esl

    一.背景假设源代码路径为/home/freeswitch 二.编译安装libesl.a1. cd /home/freeswitch(源代码的根目录) 执行./configure,以便生成必要的Make ...

  4. blender, 创建多边形面片

    按a键清除所有选择,进入Edit Mode,选vertex select方式.然后按住control,使用MLB连续画多个顶点,形成一个多边形,如图所示: 然后同时选中两个端点,点Make Edge/ ...

  5. Redis(十七)：批量操作Pipeline

    大多数情况下,我们都会通过请求-相应机制去操作redis.只用这种模式的一般的步骤是,先获得jedis实例,然后通过jedis的get/put方法与redis交互.由于redis是单线程的,下一次请求 ...

  6. Javascript Event事件-总结

    一.事件类型 例如:mouseover鼠标移动到.keydown键盘按下 二.事件目标 是发生的事件或与之相关的对象,window.document和Element对象是最常见的事件目标 三.事件对象 ...

  7. Entity Framework底层操作封装V2版本号（2）

    这个类是真正的数据库操作类.上面的那个类仅仅是调用了这个封装类的方法进行的操作 using System; using System.Collections.Generic; using System ...

  8. C#实现麦克风採集与播放

    在网络聊天系统中.採集麦克风的声音并将其播放出来.是最基础的模块之中的一个.本文我们就介绍怎样高速地实现这个基础模块. 一. 基础知识 有几个与声音採集和播放相关的专业术语必需要先了解一下,否则.后面 ...

  9. MySQL编程API

    1.MySQL API数据结构 MySQL API中用到了很多结构体类型,下面就简单说一下常用的结构体. MYSQL 连接数据库前,必须先创建MYSQL变量,此变量在很多MySQL API函数中会用到 ...

  10. 折腾kali linux2.0

    偶然的机会了解到了kali linux这个用于渗透测试的linux发行版,于是就从官网下了iso,但是制作启动盘老出错.网上查了下说在linux下用dd命令特别简单,于是转到ubuntu下制作启动盘, ...