移动端前端开发调试
招聘信息：
通过移动端使用 Web 服务的比率越来越大，例如淘宝今年双十一，移动端交易份额就达到。由此可见，掌握移动端的前端开发和测试是非常有必要的。由于之前做过大量有响应式需求的项目；今年（2014）年初也配合 Denis 的做了一些用于微信的移动端项目；在淘宝 UED 实习的时候，也有参与过一个针对移动端的游戏的部分开发。所以算是积累了一点移动端调试的经验，在这里分享一下。本文只介绍与调试有关的内容，至于其他移动端开发知识（技巧、坑）太多太大，推荐 Mars 移动前端开发知识库。这个项目很久没有大动静了，欢迎大家猛烈关注，不要让它“太监”了。响应式测试响应式现在基本是中小型项目的标配了，先来谈谈响应式测试技巧。基础的响应式测试响应式的测试特别简单，通过改变视窗大小（也就是缩放你的浏览器）即可测试。当然，你的 CSS 中 Media Queries 判断条件设置时要使用 max-width 才行，如果使用 max-device-width 则会根据你设备的屏幕尺寸来判断。区别详情请看。对于 Chrome 浏览器，你可以将 Chrome DevTools 放在右边，这种布局方式尤其适合用在外接的大屏幕上。然后通过拖动 DevTools 快速测试响应式的显示效果：优点就是对于 Chrome 开发者可以快速查看响应式变化效果。缺点就是分辨率尺寸不会很精确，因为它的页面宽度是添加了滚动条之后的宽度，这样对 Media Queries 的临界值效果不好测试。对于 Firefox 浏览器，不愧是早期开发的必备神器，它早就内置了响应式测试工具，可以通过 Firefox 工具 -》Web 开发者 -》自适应设计视图 启用：可以设置分辨率等参数，以及模拟 touch 事件、屏幕截图等功能，可以随意拖动。足够简单和流畅，很方便测试响应式的变化效果等。对于基础的响应式测试以及临界值变化情况测试，强烈推荐 Firefox 浏览器。由于响应式测试太简单，于是有了一大堆的书签栏 JS 工具或者 Chrome 扩展，并且以很多交互特效、复杂的功能来吸引用户。实际上使用起来，你可能需要依靠网络才能使用，还会遇到切换缩放不够流畅、刷新不方便等等问题，在这里不推荐。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 层出不穷。Android 虚拟机测试在电脑上安装 Android 虚拟机，就可以用虚拟机打开进行测试。一般推荐两个：Genymotion是一个很棒的 Android 虚拟机。但是首次安装配置需要麻烦一些。由于基于内核，所以要先安装 VirtualBox，然后需要注册账号 Genymotion，可以免费使用，但是有功能限制。如果遇到重要的项目，临时买一两个月高端账号也是 OK 的。安装完成，登陆之后，选择 Android 版本和手机型号，即可下载对应的虚拟机包，下载好的虚拟机会显示在列表中，你可以选择开启。安装好的虚拟机与你 Host 本机处于一个局域网，这样你就可以用 BrowserSync 之类的，开启一个局域网 IP 本地服务器，在移动设备上同步测试了。关于 BrowserSync，如果你没接触过，下面有讲。比较蛋疼的是，Genymotion 虚拟机里面安装 APP 好像比较麻烦，安装 Chrome 不太方便，这样不方便连接桌面版 Chrome 进行调试，只能使用 Weinre 调试。如果你有 Genymotion 使用这方面的经验欢迎分享。Parallels 是基于 Mac 平台的虚拟机，使用它创建虚拟机的时候，可以直接下载 Android 系统并安装，超级傻瓜的操作，但是超级好用。没错，它还可以装 Chrome OS，只需要点击一下等待下载即可。其他虚拟机软件应该也可以实现，不如这两种好用，如果这两种你无法使用，可以自行搜索选择其他方法尝试。Win 系统可以直接安装 Android SDK 也可以通过虚拟机方式，这里不再赘述。安装完虚拟机，就可以用里面的浏览器打开网页进行测试了，虚拟机与本机处于一个局域网，可以用局域网 IP 来调试本地页面。虚拟机不是真机，但是要比直接用浏览器测试强一些，在桌面操作比较方便，还可以安装多个版本测试。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 之类的工具，自动刷新，测试简直爽歪歪。更多细节不再赘述，可以查看 Remote Debugging
或者我的 。Android WebView 前端开发调试现在越来越多的移动端 APP 是 WebView，因为开发方便，更新快捷。那么就会有调试 WebView 的需求，因为他们本身就是网页。基于 Chrome 的调试在 Android 4.4（KitKat）或者更新版，你可以使用 DevTools 来调试原生安卓应用中的 WebVies 内容。不过需要在你开发的应用中，添加有关代码才可以启用 WebView 的调试，这里比较有局限性，有兴趣的朋友可以参照
试下，这里不再赘述。使用 Weinre 调试Weinre 是一个相当简单好用的调试工具。它会在你本地创建一个监听服务器，并提供一个 JavaScript，你只需要在需要测试的页面中加载这段 JS，就可以被 Weinre 监听到，在 Inspect 面板中调试你这个页面。目前 Weinre 也发布到 NPM 上了，Mac 下具体使用方法如下（ Win 的同学请参加：）：首先安装 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 中选择 “偏好设置”-》“高级”-》“在菜单栏中显示开发选项”：使用 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 按钮，再用鼠标点击一下这个按钮即可粘贴进去。iOS 设备真机调试模拟器已经足够强大方便了，但有些手势操作测试以及最真实的用户体验测试还是需要真机。Safari 调试真机上的网页也是非常简单的。首先需要在 iPhone 等设备上设置一下 Safari 浏览器，开启调试功能。具体步骤：“设置”-》“Safari”-》“高级”-》“Web 检查器”。使用数据线连接电脑，在设备上用 Safari 浏览器打开需要调试的页面，之后在桌面版的 Safari 开发选项中即可看到进行调试，跟用 iOS Simulator 一样，只不过现在换成了真机。但是调试本地网站，你可能要将手机与电脑连在一个局域网内，然后开启一个局域网 IP 的服务器进行调试，稍微麻烦。此外 Safari 还可以调试在 iOS 上面的 WebView，比如用调试 PhoneGap 打包的 APP 等，方法类似，这里 还有个测试用 APP，会 iOS 开发的朋友可以看下。使用 MIHTool 进行远程调试MIHTool 是国人 听奏 开发的，基于 Weinre，用于 iOS 设备的前端开发测试。上面有提到 Weinre 大体的工作方式，即开启一个服务器，然后将 JS 插入到页面中，访问进行调试。MIHTool 将这个过程简化了，它是一个 APP，可以直接安装到你的 iOS 设备里面，然后内置一个简单的浏览器可以打开你的测试页面，当它开启时，会自动向页面中插入 Weinre 的 JS，并告知 Weinre 控制台 URL 等信息，让你可以访问进行调试。它还提供了一个公共的 Weinre 调试服务，生成类似 /dev/client/#AwAj 这样的链接，打开即可调试，非常方便，就是有些卡。除此之外，它还提供了很多方便调试的功能，有兴趣的朋友可以看下 官方网站的介绍 和 Debugging web content on iOS。感觉就是丑了一些，如果能请设计师或者交互设计一下，会好得多。移动设备在线测试移动端设备如此之多，小公司或者团队，没有这么多资金和精力购买如此多的测试设备进行测试。于是就有人买了这些设备，连接起来，提供在线调试服务。例如用不同的设备访问你的网站，并截图：甚至可以让你远程控制一台机器，进行测试操作：BrowserStack 就提供这种服务，它可以实时在线调试，也可以 截屏、测试响应式 等等。此外 Keynote 也提供这种服务，当然这里的 Keynote 不是 Mac 上的幻灯片 APP。它提供更加真实的 Mobile 测试，我简单的试了一下，果然比较卡，应该是真机测试：其他移动端调试方法和技巧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 的修改，它会采用刷新的方式。Charles 代理应用Charles 是 Mac 系统下面的抓包、代理工具。如果你电脑是 Win 系统，可以使用 Fiddler 实现本节要介绍的技巧。使用场景举例：当我们在本地开发时使用内网登陆功能（需要同域），往往需要绑定 Host，比如将本机 127.0.0.1 绑定为 。这样我们访问本地服务器时使用 ，才可以正常使用 登陆 等等服务（需要用到 Cookie）。那我们用移动端设备测试这个页面的时候，也需要修改移动端设备上的 Host。因此 Android 需要 root，iPhone 需要越狱，而且每次都要开启，极为不方便。这时候，我们就可以使用 Charles 这里抓包工具做一个代理。当打开 Charles 时，它会自动在本机开启一个代理服务，默认接口为 8888。这时候，我们设置同局域网内的移动设备的代理为本机局域网 IP，即可通过 Charles 转发请求，在移动设备上访问电脑可以访问的内容。基本原理如下图：通过这个代理服务，移动设备的请求被转移到到电脑上发送出去，并将电脑得到的响应返回给移动设备。其他同类问题（想用手机访问只有电脑才能访问的内容）均可用这种方式解决。此外，因为经过 Charles 代理，因此可以使用 Charles 的查看有关请求和响应、做本地资源映射等等功能，来简化开发和调试 BUG。启用方法详情请见： 中的 截取iPhone上的网络封包 一节，这里不再赘述。提供一个 Charles 的小技巧：Charles 只提供了全局监听和 Firefox 监听，但我常用的是 Chrome 浏览器，我只想监听 Chrome 浏览器中某个页面的请求信息，也可以通过设置代理来解决。这里使用 SwitchySharp 代理插件（GAE 翻墙必备），增加一个新的情景模式，绑定本地 Charles 代理。这样当我们想抓包某个页面时，只需要打开 Charles 并勾掉 Proxy-》Mac OS X Proxy 和 Mozilla Firefox Proxy，之后再在 SwitchySharp 中勾选这个情景模式，即可清爽的只监听 Chrome 浏览器发送的请求了。关于 Charles 的使用，可以自行搜索教程，Fiddler 同样原理，不再赘述。回顾总结与扩展阅读移动端前端重构项目开发流程最佳实践新建项目相关文件，然后应用 BrowserSync 等工具（可以配合 Grunt 等）启动本地服务器。在 Chrome 中启用 Emulation 来模拟 iPhone 等设备的尺寸，进行编码开发。这样就可以无刷新、比较直观的看到手机上的效果。开发基本完成，将测试机、虚拟机等打开联入局域网，输入本地服务器地址，开始测试。对文件的修改实时刷新在所有设备中，即时看到效果。对于有点复杂的 BUG 或者问题，使用 Safari 或者 Chrome 连接虚拟机或者真机进行调试。不同测试场景下需要用到的技术和工具响应式测试：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 做代理，通过电脑去访问。扩展阅读与资料参考（）（）
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量8911点击量7989点击量6410点击量6383点击量4406点击量3935点击量3090点击量3028点击量2687
&2016 Chukong Technologies,Inc.
京公网安备89如何调试安卓(Android)设备上的WEB页面_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
如何调试安卓(Android)设备上的WEB页面
上传于||文档简介
&&安​卓​调​试​W​E​B​页​面
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢原文出处：盛瀚钦本文主要列举了调试本地网页、查看测试环境网页的各种方法，涵盖了PC、iPad、移动端的调试技巧。本文的不足之处在于，小溪里暂时还没有找到调试位于微信中和安卓各国产浏览器上的网页。相关设备概念： PC：主要指以 Windows 系统为代表的台式机或笔记本，其通常为 1 倍屏 MacBook：主要指 MacBook Pro Retina，其为 2 倍屏，但Mackbook Air为 1 倍屏 iPad：主要指以 iPad Air Retina 和 iPad Mini Retina 为代表的，其为 2 倍屏，且按1024 x 768的“宽高”渲染网页。这里 iPad Pro Retina 是按1366 x 1024的“宽高”渲染网页，在CSS的媒体查询中可以按“笔记本”的断点来设置 移动端：主要是指手机。
iPhone 5s及以下设备：按320的“宽”渲染网页，其为 2 倍屏幕
常规安卓设备：通常分辨率为1080 x 1920，按360的“宽”渲染网页，其为 3 倍屏幕
iPhone 6：分辨率为750 x 1344，按375的“宽”渲染网页，其为 2 倍屏幕
iPhone 6 plus：实际分辨率为1242 x 2208，按414的“宽”渲染网页，其为 3 倍屏幕。PS：貌似 iPhone 6 plus 实际显示器上渲染后的分辨率为1080 x 1920。 本地开发网页 主要针对前端工程师，测试工程师也可以学习使用。前端在开发移动端网页时，通常使用localhost在本地访问网页，在除本机外的设备上都需要换成IP访问。 ifconfig： OS X 系统上查看网络信息的命名，在Macbook Pro上en0代表 Wifi，所以可以用ifconfig en0直接查看 Wifi 的信息。 ipconfig：Windows 系统上查看网络信息的命令。Chrome Emulation即时“仿真”调试网页Chrome Emulation使用的当前Chrome版本的Webkit或Blink渲染的网页，跟iPhone或安卓设备上的浏览器上渲染出的网页效果可能存在差异，如安卓 UC 浏览器就存在各种各样的小 bug。 审查元素：右击或使用快捷键(Mac：command + option + i) 调出Emulation：再审查元素后，点击对应的图标或者使用快捷键（Mac：command + option + m）吐槽PC或Mac连接安卓设备，想用Chrome审查元素查看安卓设备上Chrome浏览器上打开的网页，还需要翻墙，但是却无法查看安卓设备上国产厂商封装的浏览器，如UC浏览器、QQ浏览器。Safari即使调试网页“响应式设计模式”Safari在 “开发”菜单中有“响应式设计模式”，里面有常见的iOS设备，如 iPhone 4s 、 iPhone 5s 、 iPhone 6s 、iPhone 6s plus 、 iPad mini 4 、 iPad Air 2 、 iPad Pro等。当然，这里的Safari的内核应该还是基于当前系统的，与 iOS 设备上各自的 Safari 上可能还存在着差异。超级棒的审查元素在Safari上不仅可以调试浏览器本身打开的网页，还能打开下文中提到的Xcode Simulator打开的网页，甚至可以打开用 USB 连接的 iPhone/iPad。Xcode Simulator模拟器Xcode Simulator是可以模拟各版本 iOS 系统的各种设备，比Safari更棒的地方在于它模拟了各种 iOS 系统上的 Safari，因此可以复现各种奇葩 bug。 系统涵盖了从 iOS 8.0 到 iOS 9.2 的各个版本、tvOS 、 watchOS 设备涵盖了 iPhone 、 iPad 、tvOS 、 Apple Watch 、 Apple TV小溪里推荐下载 iOS 8.1，因为自带的最新 iOS 模拟器在运行时可能会卡。访问测试环境的网页 主要针对测试工程师，前端工程师学习起来也是 so easy 的。静态IP原理简析：静态 IP 其实重心是在移动设备设置特定 DNS，而特定 DNS 是与测试环境有关系的。不足之处：在iPad 及 移动端上配置静态 IP 后，浏览器可以访问位于测试环境的网页，但微信却只能访问位于正式环境的网页。设置步骤： 记住自动分配的 IP 设置对应设备的静态 IP
iOS：设置 – 无线局域网 – 选中网络 – IP地址 – 静态
Android：设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 静态 IP 网络代理原理简析：在 PC 或Mac 上已经设置成功了测试环境，而移动设备通过网络代理访问 PC 或 Mac 上的网络设置，就可以访问测试环境了，无论是浏览器还是微信。设置代理的常见方式（具体请自行百度） Fiddler 代理，只适用于windows系统 Charles 代理，适用于OS X系统（即Mac电脑） 微信web开发者工具（以下简称“微信工具”），适用于windows和Mac微信web开发者工具官网地址
使用自己的微信号来调试微信网页授权
调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出
使用基于 weinre 的移动调试功能
利用集成的 Chrome DevTools 协助开发移动调试可以在微信中查看位于测试环境的网页 确保本机和移动设备在同一局域网网段中 将移动设备的网络代理配置到：http:///*/*./*/*./*/*./*/*（PC或Mac 的IP），端口： 9973
iOS： 设置 – 无线局域网 – 选中网络 – HTTP代理手动
Android： 设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 代理设置 – 手动 重启微信，并在微信中访问网页PS：在小溪里的电脑上并没有像官网宣传的那样可以审查元素在小溪里所在的公司里面，设置网络代理的步骤： 连接 Wifi 弹出验证窗口，输入公司账户 设置网络代理PS：连接 Wifi后，要确保没有设置网络代理，这样才可以弹出验证窗口。QQ技术交流群4.html
最新教程周点击榜
微信扫一扫