如何在 PC 机上测试移动端的网页？

如何在 PC 机上测试移动端的网页？如果用 HTML5 写的页面，想兼容 iOS、Android 平台的手机，在 PC 机上看有些效果可能不准确，但不可能在每个移动终端都放上去看下效果吧，一般用什么工具呢？模拟器？有没有更好的工具推荐？我知道可以用 Opera 移动版，还可以用 Safari 修改 UA 成 iPad，Chrome也中可以设置，你们都是这样测吗？1 条评论分享按投票排序按时间排序21 个回答赞同94反对，不会显示你的姓名大猫，微信前端开发工程师招聘处,不要因为我是…zhuchenShao邵、moahmn、圈圈等人赞同调试:打开chrome 输入网址,按F12呼出调试器,按esc就会底下再冒上来一坨,选 emulation 在Chrome里开发网页你懂的,各种好除了字体是不一样的,导致文字宽度都可能不一样,继续导致在手机里会掉下去什么的还有Retina什么的,1px的线之类的iOS:然后Safari里直接能调出来调试器这个傲娇的公司...,在PC下推荐用 VMWare 跑个 Mavericks 这OS比较吃硬件,我用的是Alienware,之前Thinkpad W500跑的略累Android:然后Chrome里直接能出来调试器官方: Android SDK | Android Developers不过强烈推荐 Genymotion - 完爆 Android SDK 模拟器速度贼快编辑于 2014-03-31 13 条评论 • 作者保留权利赞同7反对，不会显示你的姓名邓欣欣，男建跃史、太乙真人、Baku菌等人赞同更新下答案，好像最新版的 chrome 本身已经支持 ADB 了，所以就不再需要安装那些插件啦~~=======================================================================================1. Chrome To MobilePC机上安装该chrome插件；在手机端安装chrome浏览器，登录chrome帐号，启用“Chrome 转发至移动设备服务”；在PC端上输入对应要调试的网址，然后点击发送到手机，则会将该网址发送到手机端。免去了移动端上输入网址困难的烦恼。注：ios chrome 与android chrome 都支持该功能2-1. 调试—有线Android chrome + Wndows/Mac OSAndroid SDK(1) 安装Android SDK下载>解压>设置PATH为/platform-tools/(2) 手机启用USB调试模式设置>开发者>开启USB调试模式(3) chrome启用USB网页调试设置> 开发者工具 > 启用USB网页调试(4)用USB线连接移动设备(5)开启adb服务器命令行进入sdk/platform-tools目录>输入adb forwrad tcp: localabstract:chromedevetoolsremote(6)访问localhost:注：启动服务遇到错误的情况, 运行adb kill-server。 iOS Chrome不支持这种方式调试ADB Plugin + MAC(2013-6-24更新)今天偶然发现了这个方案, 有MAC的同学可以完全取代上面的使用SDK调试方法, 毕竟每次启动命令行挺麻烦的. 步骤如下: (1)下载 Chrome Canary(2)下载 ADB Plugin 并安装在Chrome Canary上(3) 开启手机 "USB调试模式"注: 若手机已经开启过, 可以先关闭再开启, 避免手机没有记录下你机器的物理地址.(4) 开启手机chrome USB网页调试(5)点击ADB插件, 有惊喜.iOS Safari + MAC该方法只适用safari6.0+的版本。(1) 手机进入偏好设置，点击safari，开启web检查器；(2) Mac下进入safari的偏好设置，显示“开发”菜单；(3) 手机链接Mac，查看MAC Safari “开发”菜单，会有你的ios设备名的一行选项，这下面的子菜单就是你的ios safari上打开的网页2-2. 调试—无线weinre该方案我这不介绍了，有兴趣的读者可以网上搜之。因为我很讨厌这种调试方式，一个是要引入额外通信脚本，IP一边，脚本地址又要变；一个是速度慢得要死。用过一次后，就被我抛弃了。MIHTool该方法只适用于iOS系统，具体用法就不多说了，直接点击标题链接吧，方便，强大，易上手，移动端有Iphone和Ipad的，我推荐直接用这个工具了。因为没有那么多繁琐的安装步骤。3. HOST绑定(1) PC和MAC开启代理服务器FiddlerFiddler只有windows版，所以该方法只适合windows系统。Fiddler>Tools>Fiddler Options>ConnectionsNproxynode编写；安装简单： npm install nproxy -g使用方便： nproxy默认运行在8989端口，加-p选项和端口号可以设置运行的端口适用于win和mac，同时也具备了fiddler的文件替换功能，具体可以点击标题链接查看更详细的功能。注：该工具目前暂时无法代理手机端下的https请求，已经反馈给作者，期待修复。(2) 手机端设置代理进入wifi设置，选择手动输入代理服务器，输入PC和MAC的IP及相关端口即可。此时，手机使用的就是你桌面机器的hosts。PS: Android上有个设置代理的应用，叫DroidProxy，可以帮你保存设置过的代理地址，这样你就不用每次都再去输入代理地址了。 iOS大家可以补充下。我的心得和总结我自己使用的方案如下：Chrome To Mobile（必备了，没什么选择）调试上：iOS设备上使用 MIHTOOL，实在是方便。Android机上只选择usb调试， weinre太恶心了，太恶心了= =！hosts绑定上：我选择的是nproxy，一行命令就开启了代理，且资源消耗小，另一方面，撸主有MAC- -!编辑于 2013-12-25 添加评论 • 作者保留权利赞同3反对，不会显示你的姓名于江水，前端 http://yujiangshui.com郭彦江、飞刀宽、sdau xing 赞同2015-1-29 更新：自荐一篇文章移动端前端开发调试--------看了一下， @大猫前辈的比较简单，但是移动端不一定跟手机模拟功能效果一样，一般需要使用实际设备做辅助测试。目前我采用的方案：chrome 手机模拟功能 —— 快速高效调试。http://browsersync.io 同步测试 —— 快速看到真实移动端的效果。大体步骤就是：开启 browsersync 的本地服务器，chrome 手机模拟功能打开，电脑做 wifi，手机连入局域网并打开 browsersync 创建的本地服务器就可以看到效果。然后编写代码，保存，手机和 chrome 自动刷新看到效果，移动端出现问题，在 chrome 调整，编辑代码，保存看效果。browsersync 的引入，不再需要重复刷新，而且多设备同时测试直接看到效果，而且在一台设备上的操作（例如滚动）在其他设备上也同时滚动！就是最近手残电脑装了个网卡驱动，一做 wifi 就掉线 T T编辑于 2015-01-29 2 条评论 • 作者保留权利赞同6反对，不会显示你的姓名孙芋头，http://www.html-js.com 前端乱炖-最专业的…知乎用户、肖旺、杨辉等人赞同不要相信修改ua，移动端浏览器远没有那么简单。支持的功能不完整，还有些特性跟桌面不一样。例如一些触摸特性，桌面浏览器表现不给力。保险的方式就是用模拟器，xcode中的ios模拟器，还有android模拟器。ios模拟器可以直接访问本机localhost，很方便。android的貌似不行，要本机搭建服务器然后用ip地址调试。mac下有个weinre的软件，可以在手机上用类似chrome developer tool的东西来调试结构和控制台。很方便。android的做的比较少，没什么经验。发布于 2012-06-29 5 条评论 • 作者保留权利赞同1反对，不会显示你的姓名王懿婷，前路漫漫为时不晚qiang wang 赞同还可以上传代码包到新浪SAE（或者自己的空间），然后周围人各种手机各种测。。嗯还比较准确。。编辑于 2015-05-04 1 条评论 • 作者保留权利赞同4反对，不会显示你的姓名劳永超，走向无家的潮水刘伟展、小镰、知乎用户等人赞同1. 桌面浏览器窗口宽度改变可以一定程度帮助测试响应式开发。代码尽量兼容桌面的会更加方便些。2. iOS和Android的调试。Android下通过电脑上的Chrome来远程审查模拟器或者设备的元素。最方便的情况是usb连接设备，然后从chrome选择Inspect Devices。Remote Inspector好像还可以配置，ADB可以桥接电脑和手机/模拟器的通讯。具体Google。iOS下通过Safari远程审查模拟器内的浏览器的元素。如下面几个图：图1 Safari打开开发菜单图2 菜单里面能看到模拟器里面正在查看的网页。图3 帅发布于 2014-05-15 1 条评论 • 作者保留权利赞同3反对，不会显示你的姓名周子贤，不想当音乐家的美工不是好码农蜘蛛怕嗎、sydney tan、知乎用户赞同我是把chrome缩放到320px做的，全部做完后在手机把每个页面跑一遍，有问题再改发布于 2014-02-13 添加评论 • 作者保留权利赞同4反对，不会显示你的姓名知乎用户，这就是我和你们不同的地方。log琥珀、Trinea、Vince Wen 等人赞同http://emulator.mobilewebsitesubmit.com/screenResolution.php?url=http://zhihu.com编辑于 2013-12-22 1 条评论 • 作者保留权利赞同0反对，不会显示你的姓名黑猫，http://okiilemon.comChrome(33)自带的Mobile emulation(https://developers.google.com/chrome-developer-tools/docs/mobile-emulation，链接里面有使用说明)，测试起来就很方便了。可以精确指定屏幕尺寸，还支持触摸、地理位置、重力传感的模拟。Firefox27的开发者工具里面有个「响应式设计模式」，也可以限制屏幕尺寸，不过相比Chrome弱爆了。它们的好处是调试起来极为方便，缺点是没有真正的安卓模拟器那么完美。所以我有时候还会使用Genymotion，一个Andriod虚拟机，速度快，运行极为流畅。编辑于 2014-03-03 添加评论 • 作者保留权利赞同7反对，不会显示你的姓名草依山，每天刷刷半小时知乎， …blur xie、马wayne、李晶等人赞同开发及调试：可以使用最新版的chrome，我这里的是19.0.1084.56，在开发者工具的设置里把Emulate touch events勾选上，这样就可以用鼠标模拟swipeleft,swiperight,tap这类事件。MAC上使用最新版的safari,IOS设备升级到IOS6，设备用线连接到电脑，可以在safari的开发里看到设备，这里可以使用开发者工具来真机调试。屏幕大小可以自己写一个小的测试页面，用一个iframe载入你的页面，设置iframe的宽高，用这样的方式在PC上模拟设备的宽高类似这样http://www.testiphone.com/http://iphone4simulator.com/Android设备上的chrome是支持远程调试，具体开启方法Google一下吧这里有一个非常有用的书签，包含各种小工具http://stevesouders.com/mobileperf/mobileperfbkm.php远程打log可以试试这个http://jsconsole.com/ 我用的时候非常不爽，很慢真机测试：主要就是代理的使用了windows可以用fiddler作代理mac下可以用Charles如果你跟我一样不用windows又不花钱买Charles可以用nginx作代理在开发机上设置代理，比如nginx的可以这样配置，同时配置一个独立域名http://touch.renren.com到开发机，保证开发机和调试设备在同一个局域网内。server { resolver 8.8.8.8; resolver_timeout 1s; listen 8888; location / { if ($host ~* http://touch.renren.com) {proxy_pass http://127.0.0.1; }if ($host !~* http://touch.renren.com) {proxy_pass $scheme://$host$request_uri; }proxy_set_header Host $http_host; proxy_buffers 256 8k; proxy_max_temp_file_size 0; proxy_connect_timeout 30; proxy_cache_valid 200 302 10m; proxy_cache_valid 301 1h; proxy_cache_valid any 1m; } }零碎的写这些，同学们可以多补充补充，我有想到，回来补，有不对的也欢迎指正发布于 2012-06-30 2 条评论 • 作者保留权利赞同1反对，不会显示你的姓名杜武，早睡早起kousuke 赞同推荐安卓的UC开发者版，好用到爆，真机调试非常方便，有wifi的情况下，不需要任何额外的插件或设置。发布于 2015-03-16 1 条评论 • 作者保留权利赞同0反对，不会显示你的姓名维克多，一般稍微严肃点的话题我都匿了我觉得直接在chrome中打开就可以了，挺好用的啊发布于 2012-06-30 添加评论 • 作者保留权利赞同0反对，不会显示你的姓名知乎用户，网站开发攻城狮最好的方法就是拿你自己，同事或者朋友的手机测试，这是我认为最靠谱的方法。手机千差万别，分辨率也千奇百怪。用不同的系统测试不同的网页即可。发布于 2013-04-05 添加评论 • 作者保留权利赞同0反对，不会显示你的姓名Jasin Yip，http://jasinyip.com电脑里用localhost的话，用手机访问电脑的内网ip（前提是手机和电脑在同一个局域网下）发布于 2014-03-03 添加评论 • 作者保留权利赞同0反对，不会显示你的姓名zoro，伪IT男chrome的F12中的模拟器 + opera 手机模拟器 + 一款叫keynote的手机模拟器（Mobile and Web Performance Testing, Monitoring and Analytics）发布于 2014-05-29 添加评论 • 作者保留权利赞同0反对，不会显示你的姓名知乎用户，前端码农挺好用的发布于 2014-06-09 添加评论 • 作者保留权利赞同0反对，不会显示你的姓名知乎用户，深圳 / Java / 只要是代码都想写两行Chrome拓展: Ripple Emulator 1.安装地址https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc2.截图:3.打开你的页面,然后如下轻点:4.在右侧面板选择你渴望的测试的设备: 5.好,介绍完毕,爽了编辑于 2014-10-15 添加评论 • 作者保留权利赞同0反对，不会显示你的姓名龙翊，前端/laravel/网络安全/学生这个问题太老了，我来为说chrome的答案po一个新图吧。发布于 2015-02-06 2 条评论 • 作者保留权利赞同0反对，不会显示你的姓名知乎用户Responsinator发布于 2015-07-17 添加评论 • 作者保留权利赞同0反对，不会显示你的姓名dcxdcx用谷歌浏览器调试发布于 2015-08-12 添加评论 • 作者保留权利更多

如何在 PC 机上测试移动端的网页？相关推荐

PC上测试移动端网站和模拟手机浏览器
1. PC上测试移动端网站和模拟手机浏览器 1) PC上测试移动端网站和模拟手机浏览器的5种方法 http://www.jb51.net/softjc/144941.html 2) 结论使用场景: ...
php判断电脑浏览器模拟手机访问网页,在PC上测试移动端网站和模拟手机浏览器的5大方法...
查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...
java模拟手机浏览web_在PC上测试移动端网站和模拟手机浏览器的5大方法
查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...
在PC上测试移动端网站和模拟手机浏览器的5大方法
原文: https://www.cnblogs.com/coolfeng/p/4708942.html 最近公司要开发网站的移动版,让我准备准备知识,话说本人开发移动网站的经验还真不多,最悲剧的事情就 ...
如何在PC端应用中运行小程序？
小程序逐渐打通所有应用场景,打破移动端和PC端的边界,解决了频繁在桌面设备和移动设备间跳转带来的「割裂感」,使用户在办公.学习.娱乐时带来极大便利.在未来,小程序将成为万物互联的连接器,打破物理边界. ...
如何在PC端快速下载B站视频，不是唧唧Down，学不会来打我！！！
如何在PC端快速下载B站视频,亲测可用学不会来打我!!! 哔哩哔哩如今已经从开始小众网站,慢慢进入了越来越多的人的视野和生活中.现在除了看动漫,我们还可以在上面看纪录片.电影.连续剧.科普.以及各种 ...
如何在PC上正确播放4K HDR视频--有惊喜
现在4K UHD HDR规格的影视剧片源真的越来越多了,如果你是个下载党,或者朋友丢给你个NET Flix最新剧集,一看是4K HDR,欣喜若狂,当然第一步是如何分辨这到底是不是一部真正的HDR视频, ...
问：PC机上的两个dns,是首用dns的查不到再查备用的，是么？
问:PC机上的两个dns,是首用dns的查不到再查备用的,是么? 如果有两个DNS服务器,那么客户机会优先向主DNS服务器发起查询,如果主DNS在规定时间内应答,那么以主DNS的应答为准.如果主DN ...
pc 页面在移动端怎么获取放大倍数、_百度移动搜索开放适配服务的3种方法
为了提升用户的移动搜索结果浏览体验,百度移动搜索对具有对应手机站的PC站提供"开放适配"服务. 如果您同时拥有PC站和手机站,且二者能够在内容上对应,您可向百度"提交&q ...

如何在 PC 机上测试移动端的网页？

如何在 PC 机上测试移动端的网页？相关推荐

最新文章

热门文章