移动端有时候我们要调试手机网站. Chrome怎么调试手机页面呢? 毕竟有时候手机支持的JS度跟PC不一样。最开始就遇见了.手机端浏览器不支持执行string.includes.

PC端支持该函数, 当时没用Chrome调试手机页面的方式。后面是直接在JS里面添加Alert才发现includes方法是undefined. 最后换成了string.indexof才解决的。这个问题还花费了些许时间。

第一步: 手机通过USB连接电脑,选择USB调试模式

第二步: 打开chrome, 按F12 - > More tools - > Inspect devices -> Devices 里面就可以看到自己的设备了。

第三步: 点击设置后, 如果已经打开了浏览器，点击inspect 就可以在浏览器打开相应的页面了。

如果没有打开浏览器请打开浏览器，进入需要调试的页面。那么右边就会看到对应页面的链接，点击右边的Inspect就可以了

　　　　　　　  点击后就会弹出窗口看到里面的js和html代码了.

手机调试 --- 通过chrome测试手机网站的更多相关文章

  1. MAC下如何配置Android手机调试（将测试手机加入到Mac系统的调试列表中）

    第一步: 查看usb设备信息 在 终端输入:system_profiler SPUSBDataType     可以查看连接的usb设备的信息 比如我的usb信息如下(部分内容): 查看到我的Andr ...

  2. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

  3. 如何在电脑上测试手机网站（补充）和phonegap

    颜海镜 介绍了专业人士精准测试手机网站的经验 http://www.cnblogs.com/yanhaijing/p/3557261.html, 因为太专业了,稍显复杂和琐碎,这里我介绍下我一直关注的 ...

  4. xamarin.forms uwp app部署到手机移动设备进行测试，真机调试（device portal方式部署）

    最近学习xamarin.刚好 手上有一个lumia 930.所以试一试把uwp app部署到手机上,并真机调试一把. 目前环境: 1.开发pc电脑是win10,版本1607.加入了insider,所以 ...

  5. Nginx学习总结（2）——Nginx手机版和PC电脑版网站配置

    考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...

  6. Ubuntu杂记——Ubuntu下以USB方式连接Android手机调试

    在Ubuntu下进行Android开发,发现自己的手机就算打开USB连接.USB调试还是连不上,一直都是显示??????.百度了很多,发现都是要改“ /etc/udev/rules.d/50-andr ...

  7. Web程序员开发App系列 - 调试Android和IOS手机代码（补图）

    Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...

  8. web设计经验<九>教你测试手机网页的5大方法

    我们知道手机浏览器的使用量每天都在增长,根据StatCounter的统计数据,手机和平板的使用量约占30%的网络流量,这意味着消费者耗费在移动版网页上的时间比以往任何时候都高.可即使具备诸如移动端优先 ...

  9. 手机调试 fiddler

    使用Fiddler调试手机程序 | 前端和运维利器 2015-11-27  zhy97031  文章来源  阅 688  转 4 转藏到我的图书馆   微信分享:   作者:Uncle Chen 原文 ...

随机推荐

  1. Excel VBA语句集

    Excel VBA语句集 引子 最近批阅学生成绩,用Excel 处理学生成绩,用到VBA 提高办公效率.需要经常查阅VBA的一些用法 正文 定制模块行为 (1) Option Explicit '强制 ...

  2. 数据库操作类《SqlHelper》

    一．背景 在看了一本书叫<Visual Studio 2010(C#)Windows数据库项目开发>后,觉得很多编程技术需要积累,因为一个简单的项目里包含的技术太多了,容易忘记.每次需要用 ...

  3. java之Collection框架

    Collection的一些框架类的关系图: 1 Collection简介 Collection的定义 public interface Collection<E> extends Iter ...

  4. spring cloud学习(六) 配置中心-自动更新

    上一篇学习了spring cloud config的基本使用,但发现有个问题,就是每次更改配置后,都需要重启服务才能更新配置,这样肯定是不行的.在上网查资料了解后,spring cloud支持通过AM ...

  5. WebDriver高级应用实例（5）

    5.1对象库(UI Map) 目的:能够使用配置文件存储被测试页面上的元素的定位方式和定位表达式,做到定位数据和程序的分离.方便不具备编码能力的测试人员进行修改和配置. 被测网页的网址: http:/ ...

  6. Vue2.5开发去哪儿网App 首页开发

    主页划 5 个组件,即 header  icon  swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...

  7. div居中的几种方式

    摘自:https://www.cnblogs.com/ones/p/4362531.html DIV居中的几种方法   1. 1 body{ 2 text-align:center; 3 } 缺点:b ...

  8. 10-05 Java 内部类概述和讲解

    内部类的概述 /* 内部类概述: 把类定义在其他类的内部,这个类就被称为内部类. 举例:在类A中定义了一个类B,类B就是内部类. 内部的访问特点: A:内部类可以直接访问外部类的成员,包括私有. B: ...

  9. NoSQL -- Redis使用

    NoSQl简介: ubuntun CTRL+alt+F1 图形切换到命令行 CTRL+alt+F7  命令行切换到图形界面 redis介绍 + 实践 Redis是什么? Redis 安装 edis是当 ...

  10. Scala使用Akka模拟RPC机制代码2

    RemoteMessage.scala //对象要序列化才能通过网络传输 这个地方没有大括号....这有这个extends声明 trait RemoteMessage extends Serializ ...