当前位置： >
> 谷歌浏览器怎么模拟手机？谷歌浏览器手机模式开启教程
谷歌浏览器怎么模拟手机？谷歌浏览器手机模式开启教程
　　Google浏览器是一个由谷歌公司开发的快速、简单且安全的网络浏览器，但是很多人不知道谷歌浏览器怎么模拟手机？下面是雷达下载小编给大家带来的谷歌浏览器手机模式开启教程，需要的一起来了解一下吧。
软件推荐：&&&&&&　　打开谷歌浏览器控制台，按 F12，　　然后点击右下角的设置按钮，出现如下设置框：　　除了谷歌浏览器，还有很多浏览器值得大家使用哦，以小编来看，UC浏览器、360浏览器使用起来也是很不错的。下载地址如下：　　UC浏览器电脑版请戳这里：　　360浏览器电脑版请戳这里：　　以上就是雷达下载小编给大家带来的谷歌浏览器手机模式开启教程，更多相关内容尽在雷达下载，敬请关注。
最新推荐文章
32.40MB/简体中文
腾讯视频播放器原名QQ直播，是一款由腾讯开发的用于通过互联网进行大规模视频直播的软...极客学院团队出品 · 更新于
在安卓设备上使用 Chrome 远程调试功能
你的网页内容在移动设备上的体验可能和电脑上完全不同。Chrome DevTools 提供了远程调试功能，这让你可以在安卓设备上实时调试开发的内容。
安卓远程调试支持：
在中调试网站。
在原生安卓应用中调试。
将屏幕从你的安卓设备上到你的开发机器上。
使用和来让安卓设备访问开发使用的服务器。
要开始远程调试，你需要：
安装 Chrome 32 或者之后的版本。
连接安卓设备用的 USB 线缆。
对于通过浏览器调试：安卓 4.0 以上并且安装了 。
对于通过应用调试：安卓 4.4 以上并且应用包括 WenView 组件。
提示：远程调试需要你电脑端的 Chrome 版本要高于安卓端的版本。想更好地使用此功能，请使用电脑端的
（Mac/Windows） 或者
发行版（Linux）。
如果使用远程调试的时候出现了问题，请参考 。
设置安卓设备
请按照以下说明来设置安卓设备：
1. 打开 USB 调试选项
在安卓设备上，进入设置&开发者选项。
设置页面的开发者选项
注意：在安卓 4.2 及以后的版本中，默认情况下开发者选项是隐藏的。要启用开发者选项，选择设置&关于手机然后点击版本号7次。
在开发者选项中，选中 USB 调试复选框。
在安卓上启用 USB 调试
之后会有一个警告，提示你是否要开启 USB 调试模式。选择 OK。
2. 连接你的设备
将你的安卓设备和电脑用 USB 线连接起来。
注意：如果你在 Windows 下进行开发，那么你需要为你的安卓设备安装驱动。具体可以参考安卓开发者网站上的
在 Chrome 中找到设备
在安卓设备上设置好远程调试后，在 Chrome 中找到你的设备。
在电脑端的 Chrome 里，在地址栏输入 chrome://inspect。进入后确认 Discover USB devices 已经勾选了：
**提示**：你也可以从 Chrome menu & More tools & Inspect Devices 来进入 chrome://inspect
在你的设备上，会跳出一个警告，告诉你是否要允许在电脑端进行 USB 调试。选择 OK。
提示：如果希望以后不再弹出系那个管提示，勾选 Always allow from this computer
注意：在远程调试时， Chrome 会阻止你的设备进入休眠状态。该特性对于调试相当有用，但在安全性上有所欠缺。所以在调试的时候要注意看好你的手机！
在电脑端，打开选项卡并启用 WebViews 调试后，chrome://inspect 页面会显示全部已连接的设备。
从 chrome://inspect 也卖弄查看已连接的设备
如果从 chrome://inspect 页面查找设备时遇到了问题，请参考
调试远程浏览器
在页面 chrome://inspect 上，你可以加载 DevTools 并且调试你的远程浏览器。
要开始调试，请点击你希望调试的浏览器选项卡下面的 inspect。
接着你的电脑会加载新的 DevTools。在新的 DevTools 上，你可以在你的安卓设备上和选中的浏览器实时交互。
通过电脑上的 DevTools 来调试安卓手机上的网页
比如，你可以在你的设备上使用 DevTools 来监审查网页元素：
当你的鼠标悬浮在 Elements 面板中的某个元素上时，DevTools 会在你的设备上高亮显示相关元素。
你也可以点击 审查元素
然后点击设备的屏幕，DevTools 就会在 Elements 面板中让选中的元素高亮显示。
注意：你设备的 Chrome 版本将会决定远程调试中 DevTools 的版本。由于这个原因，你在远程调试时使用的 DevTools 可能和你平常使用的不大一样。
下面是使用远程调试功能的一些提示：
按 F5（或者在Mac上 Cmd + r）来重新加载远程页面。
让设备的网络处于打开状态。使用
面板来查看实际移动设备的网络流状态。
面板来分析提交数据和 CPU 使用状态。在移动设备上运行的程序通常会比在开发机器上运行的要慢一些。
如果你是在本地的 web 服务器上运行的，使用或者 技术来让设备访问你的站点。
调试 WebViews
在安卓 4.4 及后续版本中，你可以使用 DevTools 来调试原生安卓应用中的 WebView 的内容。
将 WebViews 配置为可调试状态
你的应用程序必须允许调试 WebView。要开启 WebView 调试，在 WebView 类里面调用静态函数 setWebContentsDebuggingEnabled。
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
该设置对该应用中所有的 WebView 都会生效。
提示： WebView 的调试并不会受到应用中 manifest 文件的 debuggable 标签状态的影响。如果你想只有在 debuggable 为 true 时启用 WebView 调试，请在运行的时候测试该标签的状态。
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE))
{ WebView.setWebContentsDebuggingEnabled(true); }
在 DevTools 中打开 WebView
chrome://inspect 页面会显示设备中所有可调试的 WebView.
要开始调试，点击你想调试的 WebView 下面的 inspect。接下来就像使用一样使用 DevTools。
使用 Chrome DevTools 来调试远程安卓 Webview
在 WebView 中列出的灰色图片表示其大小以及相对设备屏幕的大小。如果你的 WebView 有设置名称，那么其名称也会列出来。
要在两个屏幕间不断转移注意力是相当不方便的。Screencast 将你设备的屏幕显示在开发机上的 DevTools 右侧。你也可以在 screencast 中与你的设备进行交互。
在 KitKat 4.4.3，screencast 既可以给浏览器选项卡使用也可以给安卓 WebView 使用。
开启截屏会话
要开启 screecast，点击远程调试窗口右侧上方的 Screencast
Screecast 图标
Screencast 面板在左侧打开并且显示设备屏幕的实时状况。
在你的电脑上与你的安卓设备实时进行交互
截屏只会显示网页内容。该截屏的透明部分涵盖了多功能框、设备键盘以及其他设备接口。
注意：由于截屏会连续捕获帧，会造成不小的性能开销。如果你的测试是对帧速率敏感的，最好禁用截屏。
使用截屏来与设备交互
当你使用截屏来互动的时候，点击会被转换为触屏，会在设备上触发适当的触控事件。电脑端的按键会发送到设备，这样就可以避免使用大拇指来打字。
其他的 DevTools 工作也可以在截屏上使用。例如，要检查元素，点击 Inspect Element
然后在截屏内点击就可以查看网页源码中对应部分。
要模拟一个缩放手势，拖动鼠标的时候按住 Shift。要在页面上滚动，使用你的触控板或者鼠标滚轮，也可以拖动鼠标指针。
你的手机不一定所有时候都能直接连接到你开发用的服务器。他们可能处于不同的网络环境下，此外，你也可能在一个受限的企业网络下进行开发。
Chrome for Android 上的端口转发使得在移动设备上测试你所开发的站点变得轻松很多。其工作原理是在你的移动设备上创建一个监听 TCP 端口，该端口映射到你的开发机器上的一个指定 TCP 端口。这些端口之间的流量通过 USB 来传输，因此该连接不需要依赖于你的网络环境。
要启用端口转发：
在你开发用的机器上打开 chrome://inspect。
点击 Port Forwarding。下面是端口转发的设置页面。
在 Device port 后面输入你的安卓设备希望监听的端口号（默认是8080）。
在 Host 后面输入你的 web 应用运行环境的 IP 地址（或者主机名称）以及端口号。
检查 Enable port forwarding 是否已经勾选。
点击 Done 来完成设置。
端口转发设置
当端口转发开启成功时，chrome://inspect 页面的端口状态将会显示为绿色。
使用端口转发来在你的安卓设备上查看本地网页
现在你可以打开一个新的 Chrome for Android 选项卡并且在你的设备上查看本地服务器的内容。
虚拟主机映射
当你在 localhost 域名上进行开发的时候，端口转发非常有效。但是有些情况下你可能需要是哟高自定义的本地域名。
例如，假设你正在使用的第三方 JavaScript SDk 只有在白名单上的域名中才能运行。所以你需要在你的端口文件中加入一个进入点，比如 127.0.0.1 production.com。又或者你需要在你的 web 服务器上通过虚拟主机来设置特定的域名。
如果你想让你的手机能够访问到你自定域名上的内容，你可以结合端口转发和代理服务器技术。代理会把来自设备上的请求映射到主机上的相应位置。
在代理上使用端口转发
虚拟主机映射要求你在主机上开启一个代理服务器。所有来自你的安卓设备的请求都会发送到这个代理上。
要在代理上使用端口转发：
在主机上安装代理软件，比如
运行代理服务器，要记住该服务器使用的端口号。 注意：代理服务器和你开发用的服务器必须在不同的端口上运行.
在 Chrome 浏览器中，进入 chrome://inspect。
点击 Port forwarding。下面是端口转发设置页面。
在 Device port 后面输入你的安卓设备希望监听的端口号。使用安卓允许的端口，比如 9000.
在 Host 处输入 localhost:XXXX，其中 XXXX 是你的代理服务器占用的端口号。
检查 Enable port forwarding 是否已经勾选。
点击 Done 来完成设置。
代理服务器的端口转发
在你的设备上设置代理
你的安卓设备需要和主机上的代理服务器交互。
要在你的设备上设置代理：
选择 设置 & WiFi。
长按你当前连接的网络。注意：代理设置适用于所有网络.
点击修改网络。
选择高级设置。代理设置页面如下：
点击代理菜单并选择手动。
在代理主机名处输入 localhost。
在代理端口号处输入 9000。
点击保存。
通过这些设定，你的设备会将它所有的请求都发给代理服务器。该代理代表你的设备发出新的请求，故而对你本地特定域名的请求会被合理地解析。
现在你就可以像在主机上那样在 Chrome for Android 上加载本地域名了。
使用虚拟主机映射技术来在安卓设备上访问特定的本地域名
提示：要恢复正常的浏览模式，在断开连接后将设备上的代理设置还原就可以了。
我在 chrome://inspect 页面无法看到我的设备
如果你在 Windows 下进行开发，请确认你是否安装好了你的设备所对应的驱动。安卓开发者网站上的
可供参考。
确认你的设备是否直接或者通过集线器连接到了你的主机上。
确认设备上 USB 调试模式 有没有打开。记得在提示是否允许 USB 调试的时候选择是。
在电脑上打开 chrome://inspect 并确认 Discover USB devices 有没有勾选。
远程调试要求你电脑上的 Chrome 版本高于安卓设备的。尽量使用 （Mac/Windows）或者
发行版（Linux）。
如果你仍然无法看到你的设备，请断开设备与主机的连接。然后在你的设备上，打开 设置 & 开发者选项。选择撤销 USB 调试授权。然后重新尝试以及。
在 chrome://inspect 页面中我无法看到我的浏览器选项卡
在你的设备中，打开 Chrome 浏览器并进入到你想调试的页面。然后刷新 chrome://inspect 页面。
我无法在 chrome://inspect 页面中看到我的 WebView
确认在你的应用中已经启用。
在你的设备上，启动应用并打开你想调试的 WebView。然后，刷新 chrome://inspect 页面。
在我的安卓设备上我无法访问 web 服务器
如果是网络限制条件导致你的设备无法连接到开发用的服务器，请尝试或者。
最后，如果远程调试仍然无法工作，你可以使用 Android SDK 中的 adb 二进制包将你的工作流恢复到最近的状态。
远程调试和 ADB
在远程调试浏览器选项卡以及 WebView 的时候你不要设置 ADB 或者 ADB 插件。Android 上的远程调试现在是标准 Chrome DevTools 的一部分。在所有的操作系统上它都可以使用：Windows，Mac，Linux 以及 Chrome OS。
如果你在使用远程调试的时候遇到了问题，你可以尝试通过 Android SDK 提供的 adb 二进制包来使用。
注意：你的安卓设备和 Chrome 之间的连接可能会中断 adb 连接。在建立 adb 连接前，取消 chrome://inspect 上对 Discover USB devices 的勾选。如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面_百度知道
如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面
我有更好的答案
关于谷歌应用问题：
1、由于谷歌之前已经退出中国大陆市场，所以在中国大陆上市的三星Android系统手机均不内置googlePlayStore以及其它的Google应用软件
2、谷歌相关应用程序如googlePlayStore在中国大陆上市的手机中无法安装使用
三星产品问答服务
主营：电子产品
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。移动端设备前端开发调试的方法技巧-马海祥博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
> 移动端设备前端开发调试的方法技巧
移动端设备前端开发调试的方法技巧
时间：&&&文章来源：马海祥博客&&&访问次数：
由于之前做过大量有响应式需求的项目，今年也配合Denis的微信机器人做了一些用于微信的移动端项目，在实习的时候，也有参与过一个针对移动端的游戏的部分开发，所以算是积累了一点移动端调试的经验，在这里分享一下。
通过移动端使用Web服务的比率越来越大，掌握移动端的前端开发和测试是非常有必要的，但本文只介绍与调试有关的内容，至于其他移动端开发知识太多太大，我们在此就不一一的介绍了。
一、响应式测试
响应式现在基本是中小型项目的标配了，先来谈谈响应式测试技巧。
1、基础的响应式测试
响应式的测试特别简单，通过改变视窗大小（也就是缩放你的浏览器）即可测试。当然，你的CSS中Media Queries判断条件设置时要使用max-width才行，如果使用max-device-width则会根据你设备的屏幕尺寸来判断。
对于Chrome浏览器，你可以将Chrome DevTools放在右边，这种布局方式尤其适合用在外接的大屏幕上，然后通过拖动DevTools快速测试响应式的显示效果。
优点就是对于Chrome开发者可以快速查看响应式变化效果。
缺点就是分辨率尺寸不会很精确，因为它的页面宽度是添加了滚动条之后的宽度，这样对Media Queries的临界值效果不好测试。
对于Firefox浏览器，不愧是早期开发的必备神器，它早就内置了响应式测试工具，可以通过 Firefox 工具 -》Web 开发者 -》自适应设计视图启用：
可以设置分辨率等参数，以及模拟touch事件、屏幕截图等功能，可以随意拖动。足够简单和流畅，很方便测试响应式的变化效果等，对于基础的响应式测试以及临界值变化情况测试，强烈推荐Firefox浏览器。
由于响应式测试太简单，于是有了一大堆的书签栏JS工具或者Chrome扩展，并且以很多交互特效、复杂的功能来吸引用户，实际上使用起来，你可能需要依靠网络才能使用，还会遇到切换缩放不够流畅、刷新不方便等等问题，在这里不推荐（具体可查看马海祥博客《》的相关介绍）。
2、Chrome模拟设备尺寸
如果你需要测试某种明确的机型，Chrome新版的Emulation就可以派上用场了，Emulation现在变成了一个手机图标，之前的Emulation面板被放在了DevTools的分裂视图中了，如果你怀念以前的Emulation面板或者需要模拟地理位置、加速计等功能，在DevTools界面摁下ESC即可打开分裂视图。
打开DevTools之后，点击这个&手机图标&即可进入Chrome手机模拟器：
在Device你可以选择预置的设备，快速切换分辨率和屏幕有关参数。此外还可以设置分辨率比率，来模拟Retina或者更高级屏幕下的效果，这样可以测试你的响应式图片是否被正确替换等，它甚至提供了网络测试，来测试低网速情况下你的页面加载情况。
慢网速的测试，往往需要用抓包工具（Charles等）来模拟，现在用Chrome也可以模拟了。
除此之外，Chrome的手机模拟器还提供了非常非常多的实用功能，比如模拟touch事件、捏等手势操作、地理位置、加速计、Retina等等。
这里的方法仅能作为基础的响应式测试，对于中小型、比较简单的项目，完全足够用了，对于稍微复杂的页面，还是需要用虚拟机或者真机测试，这样更加可靠（具体可查看马海祥博客《》的相关介绍）。
二、基于Android的移动端前端开发调试
Android系统是份额最大的移动端设备操作系统：一方面，Android是Google开发的，浏览器等也是基于Blink内核（早期版本基于Webkit），都是Google开发的，所以技术上应该是没有问题的；另一方面，Google无偿开源Android系统，结果导致很多小厂商自己乱改Android系统，各种版本遍地生花，各种BUG层出不穷。
1、Android虚拟机测试
在电脑上安装Android虚拟机，就可以用虚拟机打开进行测试，一般推荐两个：
（1）、Genymotion
Genymotion是一个很棒的Android虚拟机，但是首次安装配置需要麻烦一些，由于基于VirtualBox内核，所以要先安装VirtualBox，然后需要注册账号Genymotion，可以免费使用，但是有功能限制，如果遇到重要的项目，临时买一两个月高端账号也是OK的。
安装完成，登陆之后，选择Android版本和手机型号，即可下载对应的虚拟机包，下载好的虚拟机会显示在列表中，你可以选择开启。
安装好的虚拟机与你Host本机处于一个局域网，这样你就可以用BrowserSync之类的，开启一个局域网IP本地服务器，在移动设备上同步测试了。
比较蛋疼的是，Genymotion虚拟机里面安装APP好像比较麻烦，安装Chrome不太方便，这样不方便连接桌面版Chrome进行调试，只能使用Weinre调试，如果你有Genymotion使用这方面的经验欢迎分享。
（2）、Parallels
Parallels是基于Mac平台的虚拟机，使用它创建虚拟机的时候，可以直接下载Android系统并安装，超级傻瓜的操作，但是超级好用。
没错，它还可以装Chrome OS，只需要点击一下等待下载即可。
其他虚拟机软件应该也可以实现，不如这两种好用，如果这两种你无法使用，可以自行搜索选择其他方法尝试。Win系统可以直接安装Android SDK也可以通过虚拟机方式，这里不再赘述。
安装完虚拟机，就可以用里面的浏览器打开网页进行测试了，虚拟机与本机处于一个局域网，可以用局域网IP来调试本地页面。
虚拟机不是真机，但是要比直接用浏览器测试强一些，在桌面操作比较方便，还可以安装多个版本测试。
2、Android真机调试
桌面端的前端开发调试非常简单，因为有Firebug、Chrome DevTools等工具，直接右击打开就可以看到元素的CSS，并且可以查看各种资源、修改运行调错JS等，而移动端浏览器显然没法带有这些功能，于是可以用数据线连接设备，然后用电脑上的Chrome DevTools来调试移动设备上的页面。
首先，你的Chrome版本必须高于32，其次你的测试机Android系统高于4.0，测试机安装Chrome for Android才可以使用Chrome远程调试这项功能。
先用数据线将Android测试机连接到电脑上，需要打开测试机上面&开发者选项&中的&USB调试&功能，在Android 4.2+ 系统上&开发者选项&默认是隐藏的，所以你需要先开启&开发者选项&（开启方法：设置 -》 关于本机 -》 猛击版本号（Build number）多次即可开启开发者选项），之后如果没有开启，或者没有反应，可能是你的版本问题或者点击错了，你可以尝试把&关于本机&上所有的选项都猛击几次，就会开启。
然后在桌面版Chrome打开chrome://inspect即可查找你的设备，在设备上的Chrome打开网页，即可看到，然后就可以在桌面版Chrome DevTools调试移动设备上的页面了。
此外，还可以直接在桌面版Chrome输入URL在移动设备上打开，在本地用Nodejs或者其他功能开启一个本地服务器，用端口转接让移动设备直接访问本机localhost上的页面，再配合LiveReload、BrowserSync之类的工具，自动刷新，测试简直爽歪歪。
三、Android WebView前端开发调试
现在越来越多的移动端APP是WebView，因为开发方便，更新快捷，那么就会有调试WebView的需求，因为他们本身就是网页。
1、基于Chrome的调试
在Android 4.4（KitKat）或者更新版，你可以使用DevTools来调试原生安卓应用中的WebVies内容。
不过需要在你开发的应用中，添加有关代码才可以启用WebView的调试，这里比较有局限性，有兴趣的朋友可以试下，这里不再赘述。
2、使用Weinre调试
Weinre是一个相当简单好用的调试工具，它会在你本地创建一个监听服务器，并提供一个JavaScript，你只需要在需要测试的页面中加载这段JS，就可以被Weinre监听到，在Inspect面板中调试你这个页面。
目前Weinre也发布到NPM上了，Mac下具体使用方法如下（Win的同学请参加：远程调试工具-weinre）：
首先安装Weinre：
npm install -g weinre
安装完成之后，要在本地开启一个监听服务器，需要获取本机的局域网地址：
Mac在终端执行ipconfig getifaddr en0命令。
Win在命令行执行ipconfig命令。
这时候拿到一个IP，就本例而言，我的IP为10.189.249.254，这时候执行：
weinre --boundHost 10.189.249.254
开启本地监听服务器。
这里有一个网址，就是Weinre的一些说明，我们可以打开看下：
这里最重要的是箭头所指的这个JS，我们需要把这个JS放到我们要调试的页面中，这样访问页面的时候，加载这个JS，就会被Weinre监听到进行控制。
小提示：这个JS后面的#anonymous起到一个标识作用，为了区别，我们可以将其修改成#test放到页面中，这时候，我们的Inspect面板的地址就不是http://10.189.249.254:8080/client/#anonymous了，而是http://10.189.249.254:8080/client/#test。
当我们访问页面的时候，就会出现在监听列表中，如果有多个网页，你可以从列表中选择一个，然后就可以使用后面的Elements、Console 等面板来进行调试操作了：
Weinre非常灵活，只需要在页面中加载这个JS，然后访问即可，因此WebView可以用这种方法调试，一些低版本的Android、iOS也可以支持，Window Phone也是可以用的，在调试移动设备时你可能需要在本地搭建一个局域网IP的服务器，将设备与本机网络连接成一个局域网，用移动设备访问这个网页即可。
当然Weinre也不是万能的，相比Chrome的调试工具，它缺少JavaScript debug以及Profiles等常用功能，但是它兼容性强，可以实现基础调试功能。
四、基于iOS的移动端前端开发调试
iPhone等一系列苹果设备对前端还是相当友好的，性能够好，Safari浏览器也是不错，型号固定统一，问题也比较好解决，此外苹果公司也提供了一系列开发者工具。
如上图所示，Safari默认是隐藏开发选项的，在第一次使用的时候，需要在Safari中选择&偏好设置&-》&高级&-》&在菜单栏中显示开发选项&。
1、使用iOS Simulator调试开发
iOS Simulator是Xcode开发工具内置的iOS模拟器，因此该功能仅能在Mac系统下使用，按照如下方式即可打开：
打开之后，你可以用模拟器里面的Safari打开需要调试的网页，它可以直接打开本地localhost的页面，无须任何设置，你可以选择上面菜单中的&硬件&来模拟其他iOS设备，包括iPad等，如果你升级了你的OS X系统和Xcode 6，你还可以模拟iPhone 6和iPhone 6 Plus。
如果需要调试，打开桌面版的Safari，在&开发&中选择要调试的页面，即可打开Safari调试面板：
这样就可以进行调试了，这里马海祥给大家提供一个技巧：将URL粘贴到模拟器的地址栏时，用CMD + V是无法粘贴进去的，如果想要粘贴，先摁下CMD + V然后再用鼠标点击一下地址栏，稍等会出现Paste按钮，再用鼠标点击一下这个按钮即可粘贴进去。
2、iOS设备真机调试
模拟器已经足够强大方便了，但有些手势操作测试以及最真实的用户体验测试还是需要真机，Safari调试真机上的网页也是非常简单的。
首先需要在iPhone等设备上设置一下Safari浏览器，开启调试功能，具体步骤：&设置&-》&Safari&-》&高级&-》&Web 检查器&。使用数据线连接电脑，在设备上用Safari浏览器打开需要调试的页面，之后在桌面版的Safari开发选项中即可看到进行调试，跟用iOS Simulator一样，只不过现在换成了真机。
但是调试本地网站，你可能要将手机与电脑连在一个局域网内，然后开启一个局域网IP的服务器进行调试，稍微麻烦。
此外Safari还可以调试在iOS上面的WebView，比如用调试PhoneGap打包的APP等，方法类似，这里还有个测试用APP，会iOS开发的朋友可以看下。
3、使用MIHTool进行远程调试
MIHTool是国人开发的，基于Weinre，用于iOS设备的前端开发测试。
上面有提到Weinre大体的工作方式，即开启一个服务器，然后将JS插入到页面中，访问进行调试。MIHTool将这个过程简化了，它是一个 APP，可以直接安装到你的iOS设备里面，然后内置一个简单的浏览器可以打开你的测试页面，当它开启时，会自动向页面中插入Weinre的 JS，并告知Weinre控制台URL等信息，让你可以访问进行调试。
除此之外，它还提供了很多方便调试的功能，有兴趣的朋友可以看下官方网站的介绍和Debugging web content on iOS，感觉就是丑了一些，如果能请设计师或者一下，会好得多。
4、移动设备在线测试
移动端设备如此之多，小公司或者团队，没有这么多资金和精力购买如此多的测试设备进行测试，于是就有人买了这些设备，连接起来，提供在线调试服务。
例如用不同的设备访问你的网站，并截图：
甚至可以让你远程控制一台机器，进行测试操作：
BrowserStack就提供这种服务，它可以实时在线调试，也可以截屏、测试响应式等等。
此外，Keynote也提供这种服务，当然这里的Keynote不是Mac上的幻灯片APP，它提供更加真实的Mobile测试，我简单的试了一下，果然比较卡，应该是真机测试：
五、其他移动端调试方法和技巧
接下来，再跟大家介绍几种其他移动端调试方法和技巧：
1、BrowserSync同步操作
BrowserSync是多终端测试工具，在没有使用这个BrowserSync之前的原始的测试流程一般是这样的：先把本地的网页上传到远程服务器（因为好多设备都要去访问一个固定的地址），然后将网址输入到各个测试机的测试浏览器里面手动打开(或者使用浏览器插件等，生成二维码扫一下），然后手机开始下载页面，需要等待下载，观看效果进行测试，每个测试机都要操作一遍，测试其他网页的时候，每个测试机重新输入网址、刷新；如果代码有修改，需要重新上传服务器进行刷新。
而BrowserSync这个工具，可以用你局域网IP创建一个本地服务器，生成一个类似http://10.189.249.135:3002的URL，这样所有与你电脑处在一个局域网的设备，都可以访问到你本地的页面。
建议使用无线路由器搭建一个无线局域网，所有设备都连入这个无线局域网，Win系统电脑用软件开启Wifi共享也是可以的，Mac就比较悲剧了，只有在插网线的时候，可以开启Wifi共享功能。
BrowserSync还会监听文件变动，当监听的文件发生变动，会自动刷新所有连接本地服务器的页面，BrowserSync最主要的功能是同步，同步一切操作，当你在某个浏览器中触发的操作，会在所有测试浏览器中同步操作，例如在电脑上滚动页面，所有手机都会滚动页面；电脑上更换了URL测试另一个页面，所有手机都跳转到另一个页面。
应用BrowserSync工具之后的新版测试流程就变成这样了：用BrowserSync 开启本地服务器，所有测试设备连接到局域网中，依次打开 http://10.189.249.135:3002/（BrowserSync创建的本地服务器地址），在一台设备操作，观察其他设备的情况，修改了CSS、HTML或者JS代码，保存一下，自动在所有设备自动刷新。
BrowserSync的使用非常简单，在要创建服务器的目录下面执行：browser-sync start --server --files=&*&命令即可，表示创建一个服务器并监听该目录下的文件变动，它也有提供Grunt和Gulp插件，更多的用法移步BrowserSync官方文档，这里不再赘述。
BrowserSync的原理大体是这样的，它会在HTML页面里面插入JS，然后监听页面操作，所以当你滚动页面或者跳转新页面，BrowserSync可以捕获到这个操作，通过Socket.io向所有Client的JS发出操作指示，其他设备也会随之scroll或者location.href跳转等，实在太巧妙。
此外，两个BrowserSync的小提示：BrowserSync默认请求index.html，如果你的目录里面没有这个文件夹，会返回Cannot GET /，这时候你需要指定具体的目录、文件。
在开启BrowserSync的命令中，--files=&*&表示要监听变动的文件，如果你指定了--files=&css/*.css&就表示只监听css/下的所有css文件变动，如果遇到修改代码没有自动刷新的问题，可能是你监听的路径和文件有问题，对于CSS的修改，它会采用无刷新注入的方式，JS和HTML的修改，它会采用刷新的方式。
2、Charles代理应用
Charles是Mac系统下面的抓包、代理工具。如果你电脑是Win系统，可以使用Fiddler实现本节要介绍的技巧。
使用场景举例：当我们在本地开发时使用内网登陆功能（需要同域），往往需要绑定Host，比如将本机127.0.0.1绑定为www.mahaixiang.cn。这样我们访问本地服务器时使用www.mahaixiang.cn，才可以正常使用&登陆&等等服务（需要用到Cookie）。
那我们用移动端设备测试这个页面的时候，也需要修改移动端设备上的Host，因此Android需要root，iPhone需要越狱，而且每次都要开启，极为不方便，这时候，我们就可以使用Charles这里抓包工具做一个代理。
当打开Charles时，它会自动在本机开启一个代理服务，默认接口为8888，这时候，我们设置同局域网内的移动设备的代理为本机局域网 IP，即可通过Charles转发请求，在移动设备上访问电脑可以访问的内容，基本原理如下图：
通过这个代理服务，移动设备的请求被转移到到电脑上发送出去，并将电脑得到的响应返回给移动设备，其他同类问题（想用手机访问只有电脑才能访问的内容）均可用这种方式解决，此外，因为经过Charles代理，因此可以使用Charles的查看有关请求和响应、做本地资源映射等等功能，来简化开发和调试BUG。
提供一个Charles的小技巧：Charles只提供了全局监听和Firefox监听，但我常用的是Chrome浏览器，我只想监听Chrome浏览器中某个页面的请求信息，也可以通过设置代理来解决，这里使用SwitchySharp代理插件（GAE 翻墙必备），增加一个新的情景模式，绑定本地Charles代理。
这样当我们想抓包某个页面时，只需要打开Charles并勾掉 Proxy-》Mac OS X Proxy和Mozilla Firefox Proxy，之后再在SwitchySharp中勾选这个情景模式，即可清爽的只监听Chrome浏览器发送的请求了。
关于Charles的使用，可以自行搜索教程，Fiddler同样原理，不再赘述。
六、回顾总结
由于篇幅较长，最后我们在一起来回顾总结一些要点：
1、移动端前端重构项目开发流程最佳实践
新建项目相关文件，然后应用BrowserSync等工具（可以配合 Grunt等）启动本地服务器，在Chrome中启用Emulation来模拟iPhone等设备的尺寸，进行编码开发，这样就可以无刷新、比较直观的看到手机上的效果。
开发基本完成，将测试机、虚拟机等打开联入局域网，输入本地服务器地址，开始测试，对文件的修改实时刷新在所有设备中，即时看到效果。
对于有点复杂的BUG或者问题，使用Safari或者Chrome连接虚拟机或者真机进行调试。
2、不同测试场景下需要用到的技术和工具
响应式测试：Chrome DevTools面板右侧拉伸快速查看效果；Firefox响应式工具进一步调整；Chrome Emulation精细测试。
Android设备测试：使用Android虚拟机；高版本Android测试机，使用Chrome连接调试，Android 4.4+的WebView修改APP源代码，也可以用Chrome调试。
低版本系统和其他品牌手机以及WebView：统统可以用Weinre来解决。
iOS设备测试：使用Xcode自带iOS模拟器，使用Safari调试；WebView也可以被电脑上Safari调试；测试机连接电脑，也可以用Safari调试；MIHTool可以在iOS设备上使用，提供类似Weinre的调试功能（具体可查看马海祥博客《》的相关介绍）。
测试多种设备：BrowserStack和Keynote。
使用BrowserSync可以创建本地局域网IP服务器，并同步操作、监听刷新，极大减少测试操作，提高测试效率。
当移动端设备无法访问某项资源时，使用Charles做代理，通过电脑去访问。
马海祥博客点评：
移动互联网时代，浏览器发展的趋势、浏览器调试工具发展的未来一定是基于移动端调试的便利性、远程调试的广泛支持，我可以大胆预测支持多终端跨设备跨浏览器的远程调试工具将会越来越多。
本文为原创文章，如想转载，请注明原文网址摘自于http://www.mahaixiang.cn/ydseo/1439.html，注明出处；否则，禁止转载；谢谢配合！
您可能还会对以下这些文章感兴趣！
从2月1日开始，2018年春运大幕即将正式开启，有关部门公布：今年春运全国预计发送旅客30亿人次。“一票难求……
2012年，SEO优化技术全面保守化，Google和百度在打击人工外链方面做出了大量算法更新，外链能自然的就自然……
中国互联网的三只巨船BAT（指中国互联网公司百度集团(Baidu)、阿里巴巴集团(Alibaba)、腾讯帝国(Tencent)三……
SEO链轮(SEO Link Wheels)是从国外引入国内的，一种比较新颖的SE……
SEO链轮(SEO Link Wheels)是指通过在互联网上建立大量的独立站点……
通过分析服务器日志的数据，我们可以看出蜘蛛的活跃程度、亲和程……
最近看到很多的博主和站长都发帖讨论关于泛域名解析的问题，也看……
用这个方法的的确可以快速的提高网站权重，而且非常快速。因为这……
在搜索引擎优化中，一个网站的SEO策略能最终影响到网站未来的优……
本月热点文章}