{"action":"opened","issue":{"url":"https://api.github.com/repos/confidence68/blog/issues/26","labels_url":"https://api.github.com/repos/confidence68/blog/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/confidence68/blog/issues/26/comments","events_url":"https://api.github.com/repos/confidence68/blog/issues/26/events","html_url":"https://github.com/confidence68/blog/issues/26","id":92807968,"number":26,"title":"电脑上调试手机网站的几种方法","user":{"login":"confidence68","id":3736355,"avatar_url":"https://avatars.githubusercontent.com/u/3736355?v=3","gravatar_id":"","url":"https://api.github.com/users/confidence68","html_url":"https://github.com/confidence68","followers_url":"https://api.github.com/users/confidence68/followers","following_url":"https://api.github.com/users/confidence68/following{/other_user}","gists_url":"https://api.github.com/users/confidence68/gists{/gist_id}","starred_url":"https://api.github.com/users/confidence68/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/confidence68/subscriptions","organizations_url":"https://api.github.com/users/confidence68/orgs","repos_url":"https://api.github.com/users/confidence68/repos","events_url":"https://api.github.com/users/confidence68/events{/privacy}","received_events_url":"https://api.github.com/users/confidence68/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-07-03T06:56:11Z","updated_at":"2015-07-03T06:56:11Z","closed_at":null,"body":"手机网站开发，最让人头疼的是网站的兼容问题，不同的手机可能会出现一些莫名的问题。手机网站常见问题及解决方案，我会在后面的文章陆续发表，大家可以看一下。\r\n\r\n本文主要讲解电脑上如何调试手机网站：\r\n\r\n<h2>一、安卓手机的调试：</h2>\r\n\r\n<h3>1、最常见的安卓手机的调试方法是用chrome浏览器调节，既方便有简单。（chrome的版本要在v20.0以上）</h3>\r\n\r\n按F12,调出代码调试器，如下图\r\n\r\n<center>![enter image description here][1]</center>\r\n\r\n可以让代码调试器左右结构显示\r\n\r\n<!--more-->\r\n\r\n\r\n按照下面画红色圈圈的地方进行操作，如下图：\r\n\r\n<center>![enter image description here][2]</center>\r\n\r\n您可以看到有很多设备可以选择\r\n\r\n<center>![enter image description here][3]</center>\r\n\r\n选择Emulate就可以对您的网站进行模拟调试了！\r\n\r\n<h2>2、安装安卓虚拟机，这种方式可以模拟真机，效果更好一些！</h2>\r\n\r\n\r\n方法如下：\r\n地址http://www.genymotion.cn/\r\n打开上面的地址，注册下载。\r\n\r\n安装方法参见：http://www.genymotion.cn/#theme=guide\r\n\r\n\r\n安装好了以后，有时候不能安装软件，需要破解，下面写写破解步骤！\r\n\r\n<h3>第一部： 装个ARM转换器 Genymotion-ARM-Translation   </h3>\r\n\r\n地址： http://goo.gl/tfjjMt\r\n\r\n\r\n<h3>第二部： 装个Google Apps ，http://goo.im/gapps</h3>\r\n\r\n把这两个文件拖进虚拟机就可以了！【注意：对应版本要下载好，不然不好用的】\r\n\r\n安装好了，运行之后如下图：\r\n\r\n<center>![enter image description here][4]</center>\r\n\r\n<h2>二、苹果手机的调试方法：</h2>\r\n\r\n对于苹果手机的调试，要想在电脑上进行，那必须要用苹果电脑（Mac）了！Mac 版的 Safari 浏览器早就可以连接 iPhone 进行测试了，可以看这里：[通过Mac远程调试iPhone/iPad上的网页。][5]\r\n\r\n也就是说，你将 iPhone 连接 Mac 之后在 iPhone 的 Safari 打开网页，然后再打开 Mac 上的 Safari 浏览器，选择“开发”就可以看到你的 iPhone 上面的网页了，然后会打开 Console 这样的工具。就可以进行各种调试和检查，操作会实时改变在 iPhone 上。\r\n这里如果没有 iPhone 或者觉得 iPhone 连接麻烦，其实也可以使用 Xcode 开发套装中的 iPhone 模拟器。\r\n\r\n打开 Xcode 之后，在 “Xcode”->“Open Developer Tool”->“iOS Simulator” 即可打开一个 iPhone 模拟器。\r\n<center>![enter image description here][6]</center>\r\n\r\n这个模拟器几乎跟真实环境一致，还可以设置 iOS 的设备型号等。在模拟器中 Safari 打开的网页，也可以被 Safari 检测到并进行调试,这样就方便多了，不需要来回插拔数据线，同时还可以方便对照设计稿进行细节调整等。\r\n\r\n\r\n<h2>总结：</h2>\r\n\r\n安卓手机的调试，大部分可以用安卓虚拟机或者chrome进行。苹果手机的调试就要用MAC机进行。要是大家还有什么好的调试方法，可以留言交流！当然，真机调试也是一种不错的选择！\r\n\r\n  [1]: http://www.haorooms.com/uploads/images/chrome.jpg\r\n  [2]: http://www.haorooms.com/uploads/images/chrome2.jpg\r\n  [3]: http://www.haorooms.com/uploads/images/chrome3.jpg\r\n  [4]: http://www.haorooms.com/uploads/images/virtual_device_home.jpg\r\n  [5]: http://www.leiphone.com/ios-safari-remote-debugging.html\r\n  [6]: http://www.haorooms.com/uploads/images/mobile2.png"}}