移动端Web开发调试之Chrome远程调试(Remote Debugging) - CSDN博客
移动端Web开发调试之Chrome远程调试(Remote Debugging)
在智能手机还未普及时，移动设备的调试处处是alert的，这估计是最常用的办法了。以前很多时候为了预览页面在移动设备上的效果，需要先将页面上传到测试服务器，再将url输入到设备浏览器，或者使用第三方二维码扫码应用，通过移动设备访问打开浏览实际效果，每次换设备都要重复这些操作，页面多的话这些繁琐的事情就特别让人厌烦了。移动互联网的浪潮，伴随着智能硬件的兴起与移动设备的普及，让前端工程师这个职业变得更为专业，前端工程师要做的工作也越来越多，尤其是国内大大小小众多的手机厂商的兴起、手机型号的繁多，仅仅依靠Firebug与Chrome/Safari自带的debug工具已经远远难以满足需求了。繁琐重复性劳动占用了相当的时间，庆幸的是前端的自动化工具也越来越多。越来越多的便捷调试工具无非是前端工程师的一大福音。
近几年，浏览器厂商也纷纷推出自己的远程调试(RemoteDebugging)工具，比如Opera Mobile 可以借助其推出的跨设备跨平台桌面开发者工具Opera Dragonfly 实现远程调试，iOS Safari 可以开启Web检查器在 Mac OS X系统中实现远程调试。Android 4+已上系统的 Chrome for Android可以 配合 ADB（Android Debug Bridge）实现桌面远程调试，桌面版Chrome 32+已经支持免安装ADB即可实现远程调试移动设备页面/WebView
。国内的UC浏览器开发者版也推出了自己的远程调试工具RemoteInspector（简称RI）。
除了浏览器厂商之外，也涌现出许多第三方开发的远程调试工具，诸如支持全平台调试的Weinre 和Adobe Edge Inspect CC，国人自研的iOS专用工具MIHTool。
本篇主要说一下Chrome RemoteDebugging 的方法，之前也遇到一些坑，自己总结了一些经验，分享如下。
Chrome DevTools调试移动设备Brower Page Tabs/WebViews
安卓远程调试目前支持所有操作系统（Windows,Mac, Linux, and Chrome OS.）中调试，支持：
● 调试站点的页面
● 调试安卓原生App中的WebView
● 实时将安卓设备的屏幕图像同步显示到开发机器。
● 通过端口转发（port forwarding）与虚拟主机映射（virtual host mapping）实现安卓移动设备与开发服务器进行交互调试。
调试要求：
● 开发环境安卓桌面版Chrome32+
● 一条USB数据线，连接电脑与移动设备，安装相应机型的USB驱动。驱动程序下载地址：
&& 如果电脑上安装有百度手机助手、360手机助手这类软件，一般连接后可以自动安装相应的USB驱动程序。
● 如果是调试网页，移动设备需要安装Chrome forAndroid ，且安卓系统须为Android 4.0+
● 对于APP WebView的调试，需要系统为Android 4.4+ 并且原生应用内的Webview须进行相应的调试声明配置。
说明：远程调试要求桌面版Chrome浏览器版本要高于安卓移动设备的Chrome版本号。有条件的最好使用Chrome 的金丝雀特别版Chrome Canary (Mac/Windows)或者Chrome桌面开发版Chrome Dev channel release (Linux)。
第一步：首先在移动设备上开启USB调试模式。方法：
● Android 3.2+，打开设置 – 应用程序 – 开发，在“USB调试”处打钩选上
● Android 4.0~ Android 4.1 ，打开设置-开发者选项-进入在“USB调试”处打钩选上。
● Android 4.2+，打开设置-关于手机-手机配置信息-连点“版本号”7次，返回上层就可以看到“开发者选项”显示出来了，在“USB调试”处打钩选上。
第二步：用USB数据线连接设备，驱动装好连接成功后，你可能会在设备上看到一个弹框请求允许使用这台计算机通过usb调试
勾选后点击“确定”。
第三步：在电脑上打开Chrome浏览器的菜单– 更多工具 – 检查设备（Chromemenu & More tools & Inspect Devices），或者直接在浏览器地址栏输入chrome://inspect 或者about:inspect
打开后DevTools后，确保打钩选中Discover USB devices
如果USB连接成功，这时候我们可以看到移动设备的型号和设备上运行的页面和允许调试的WebView列表。找到需要调试的目标页面，点击inspect即可打开DevTools，点击reload可重新加载当前的调试页面，点击focus tab可将标签页置顶，close为关闭当前页面。更可以通过在输入框中键入网址新开一个页面。
点击inspect打开DevTools后，你可以选中页面中的DOM元素，同时设备中对应元素也高亮显示，也可使用DevTools中的Inspect&Element&选中目标元素，可以实时与移动设备页面交互，方便的定位问题所在，进行代码调试。
在输入框中输入一个新的网址，点击Opoen可打开你想要调试的新页面。
说明：由于Chrome版本不同，DevTools也可能有些差别，比如我的Chrome38.0.&m版竟然没有打开新页面的url输入框，升级到v39后恢复正常，知道原因的欢迎留言。
1. DevTools窗口使用F5快捷键（CMD+R for Mac）重新加载页面
2. 使用Network面板可以实时观察页面在手机实际网络环境中资源的加载情况。
3. Timeline面板可以用来分析页面渲染和CPU使用情况，通常情况下移动设备的性能会比电脑上要低一些。
4.& 在DevTools的Console控制台中编写脚本执行，会同步表现在移动设备中检查的页面。
5. 如果要调试本地搭建的服务器程序，需要用到端口转发和虚拟主机映射，以使设备上可以呈现你本地环境下的页面内容。
调试WebView需要满足安卓系统版本为Android 4.4+已上。并且需要再你的APP内配置相应的代码，在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);}
WebView的可用列表如下：
所列信息其中包括页面的title，url地址，页面尺寸大小及其相对于设备屏幕的相对位置。
实时屏幕投影（Live screencasting）
调试移动设备时视线在两个设备的屏幕之间来回切换太不方便了，screencast实现了移动设备屏幕与开发环境DevTools的同步，你可以通过screencast与移动设备上的内容进行交互式的操作。
Screencast只呈现页面的内容，而不显示工具条地址栏、设备键盘等其他设备接口，这些在Screencase中表现为透明部分。
Android 4.4，是由Google公司制作和研发的代号为KitKat的手机操作系统，于北京时间日凌晨对外公布了该Android新版本的名称，为Android 4.4（代号 KitKat 奇巧）。据悉，该代号来自雀巢的KitKat巧克力。对于KitKat 4.4.3，screencast不仅可以在Tab网页实现，在WebView上也可以同步交互操作。
点击&DevTools右上角的Screencast图标，可以开启Screencast视图，移动设备屏幕会实时展现在左侧的Screencast面板中。
Chrome32+版本的DevTools对连接的设备支持native USB debugging。而版本号稍低的一些则需要通过安装ADB或ADB plugin调试移动设备上的Chrome网页。由于之前一直是使用ADB plugin方式调试，如今一番折腾发现高版本更为方便实用的特性，由于网上的资料比较零散，关键的东西都没有提及，坑也不少，这也正是写此文的缘由。
曾经靠安装Android SDK套件，需要执行类似 adb forward tcp:9001 localabstract:chrome_devtools_remote 这样的命令，才能开始调试，现在我们完可以摆脱这些繁琐的命令了。
开发机器安装ADB plugin是Chrome 28+之后的方式，区别于以前需要安装整个Android SDK套件，同时移动设备要安装Chrome for Android 28+。ADB扩展程序安装成功后，Chrome菜单旁边会出现一个灰色的Android启动图标。
点击Android的图标，然后单击ADB开始。一旦ADB已经开始，菜单图标变成绿色，并显示当前连接的设备的数量，如果有连接设备的话。
点击View inspection Targets打开：列表中会显示每个连接的设备及其选项卡页面。查找要调试的页面，并点击页面链接URL旁边的inspect启动DevTools调试窗口。&
使用用DevTools特别重要的一点是：如果你点击inspect打开的DevTools窗口一片空白，且刷新无效时，那极有可能是由于被墙的缘故，你可以尝试是否可以ping的通，如果无法ping通，那你现在就先翻墙吧（goagent 或红杏都不错，将加入白名单），当然你还需要有google账户。
补充说明一下，如果接上USB数据线后，没有显示任何连接的设备，请按照以下步骤排查：
● 检查您的设备连接到USB，检查USB数据线。
● 确保您的设备发出ADB设备命令列为可用。如果没有，检查是否有您的设备上是否启用USB调试。
● 若是Windows系统，检查你的USB驱动是否安装正确。参考
● 桌面Chrome浏览器打开&chrome://inspect检查Discover USB devices是否选中
● 确保桌面浏览器版本要高于移动设备的Chrome版本号
● 如果Chrome for Android版本较低，请检查移动设备上Chrome浏览器设置，确保设置中启用USB调试。高版本中无此设置项，无须设置。
● 如果依然无法显示，尝试重新拔插USB数据线。
端口转发（Port forwarding）
你的手机和开发机器有时会处于两个不同的网络（如本地服务器和线上服务器两个不同的网络环境），手机上可能获取不到开发环境的页面内容。况且，有时候你的开发环境处于公司出于安全原因管控限制下的网络中。
Chrome For Android中的端口转发解决了这一困难，在手机上测试你开发的网站瞬间变得容易。它的工作原理是在移动设备上创建一个监听TCP端口，该端口映射到开发机器特定的TCP端口，两个端口通过USB线路通信，所以这种连接并不依赖于所处网络环境的配置。
在进入正题前必须要提前说明搭建本地服务器需要注意的一些点。安装本地服务器，这里安装的是wamp集成包。一键安装完成后，需要修改Apache的一些设置。
1. 打开Apache安装目录下的配置文件httpd.conf增加监听多个端口。
# Listen: Allows you to bindApache to specific IP addresses and/or
# ports, instead of the default. See also the &VirtualHost&
# directive.
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses.
#Listen 12.34.56.78:80
Listen 8888
Listen 8999
Listen 1818&
开启Apache服务后可通过命令netstat –n –a查看所配置的端口是否开启。
如果你本地环境也开启了IIS服务，为了避免二者都是用80端口发生冲突，可以按照上述方法修改Apache的默认端口。修改设置完成后别忘了重启Apache服务。
如何改变IIS端口：若保留Apache服务与IIS服务同时运行，不想改变Apache默认80端口，那么只能改变IIS端口，方法如下：开始-&运行-&输入:inetmgr-&Internet信息服务-&本地计算机-&网站-&右键“默认网站”-&属性-&选择“网站”标签-&修改TCP端口即可。最后重新启动IIS服务。
2. 在httpd.conf文件中开启虚拟主机配置
# Virtual hosts
#Includeconf/extra/httpd-vhosts.conf
将第二行前的#号去掉，即是为了允许加载扩展配置。
1.& Apache服务器默认的路径为安装目录下的htdocs，如果想改变默认目录，可以修改httpd.conf文件下的DocumentRoot和Directory，修改两者路径到你指定的目录即可。
# DocumentRoot: The directoryout of which you will serve your
# documents. By default, allrequests are taken from this directory, but
# symbolic links and aliasesmay be used to point to other locations.
DocumentRoot &E:/wamp/www/&
# This should be changed towhatever you set DocumentRoot to.
&Directory &E:/wamp/www/&&
打开extra目录下的httpd-vhosts.conf配置文件，在文件最后位置分别为监听的端口设置虚拟主机目录
# Use name-based virtual hosting.
NameVirtualHost *:80
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHostcontainer.
# The first VirtualHost section is used for all requests that donot
# match a ServerName or ServerAlias in any &VirtualHost&block.
&VirtualHost *:80&
ServerAdminwebmaster@dummy-
DocumentRoot &E:/wamp/www /dummy-&
ServerName dummy-
ServerAliaswww.dummy-
ErrorLog&logs/dummy--error.log&
CustomLog&logs/dummy--access.log& common
&/VirtualHost&
&VirtualHost *:80&
ServerAdminwebmaster@dummy-
DocumentRoot&E:/wamp/www&
ServerName localhost
ErrorLog&logs/dummy--error.log&
CustomLog&logs/dummy--access.log& common
&/VirtualHost&
&VirtualHost *:8888&
ServerAdminprograms@dummy-
DocumentRoot&E:/wamp/www/programs&
ServerName localhost
ErrorLog&logs/programs--error.log&
CustomLog&logs/programs--access.log& common
&/VirtualHost&
&VirtualHost *:8999&
ServerAdminprograms@dummy-
DocumentRoot&E:/wamp/www/site&
ServerName localhost
ErrorLog&logs/programs--error.log&
CustomLog&logs/programs--access.log& common
&/VirtualHost&
&VirtualHost *:1818&
ServerAdmin webapp@dummy-
DocumentRoot&E:/wamp/www/webapp&
ServerName
ErrorLog&logs/webapp--error.log&
CustomLog&logs/webapp--access.log& common
&/VirtualHost&
其中若要生效还需要在本地host文件中增加映射关系：127.0.0.1
然后我们测试一下，在浏览器输入你配置的主机名和端口号，url指向你要打开的文件。
若出现上述提示，检查你的虚拟主机目录是否正确。如果目录设置正确，即可打开页面。
一般情况下目录访问权限默认为：
# First, we configure the&default& to be a very restrictive set of
# features.
&Directory /&
Options FollowSymLinks
AllowOverride All
Order deny,allow
Deny from all
&/Directory&
许多人为了方便直接设置为
# First, we configure the&default& to be a very restrictive set of
# features.
&Directory /&
Options FollowSymLinks
AllowOverride All
Order allow ,deny
Allow from all
&/Directory&
出于安全考虑，根据调试的人员和实际需要，我个人倾向于为特定目录设置不同的权限，示例如下：
# First, we configure the&default& to be a very restrictive set of
# features.
&Directory /&
Options FollowSymLinks
AllowOverride All
Order deny,allow
Deny from all
&/Directory&
&Directory &E:/wamp/www/webapp&&
Options FollowSymLinks
AllowOverride All
Order deny,allow
Deny from all
Allow from 192.8
&/Directory&
&Directory &E:/wamp/www/programs&&
Options -Indexes FollowSymLinks
AllowOverride All
Order deny,allow
Deny from all
Allow from 192.8.102. 192.8.104. 192.8.22.
&/Directory&
设置完成后重启Apache服务生效。
安全是安全了，不过有一个问题，访问localhost下的页面会出现这样的情形：
其实我们再增加一句 Allow from127.0.0.1 ::1 localhost 即可解决此问题。如下：
&Directory &E:/wamp/www/programs&&
Options -Indexes FollowSymLinks
AllowOverride All
Order deny,allow
Deny from all
Allow from 192.8.102. 192.8.104. 192.8.22.
Allow from 127.0.0.1 ::1 localhost
&/Directory&
重启再试，页面正常显示出来了。如下图：
现在搭建好了本地服务器，开启了若干监听端口，进入正题，接着说端口转发。
要使用端口转发（Port forwarding）功能，需要满足以下条件：
1.&&&&&&在开发机器的Chrome浏览器打开chrome://inspect
2.&&&&&&点击PortForwarding，弹出设置窗口
3.&&&&&&在设备端口输入框，填写移动设备要监听的端口号（默认为8080）
4.&&&&&&在Host主机输入域，填写运行web应用的当前ip地址（或主机名称，如localhost）加端口号。IP地址可以填写开发机器可访问的任何本地地址。当前，端口号范围必须在之间（包括）
5.&&&&&&选中Enableport forwarding.
6.&&&&&&点击Done完成。
当chrome://inspect窗口的端口号闪动为绿色时，表明该端口转发配置已生效。此时你可以在移动设备上打开本地页面进行调试了。
在Chrome29之前端口转发功能有限，如果遇到问题，请确保你的Chrome版本升级到29以上再使用。在Chrome31+端口转发已经不是试验性功能了，而是正式发布的功能了。
前面我们已经搭建好本地服务器环境。接上USB线，打开chrome://inspect/#devices，根据Apache所设的监听端口，设置相应DevTools的端口转发参数，如下图：
完成了端口转发的设置后，这时候我们就可以进行调试本地环境下的页面了。
输入url，打开本地的页面。
如下图所示：
虚拟主机映射（Virtual hostmapping）
当你在localhost域名（或你的本地开发机器IP）下调试，端口转发很灵验。不过，如果你要使用自己定制的本地域名来调试那就不管用了。
如果你在使用一个仅能运行于特定白名单中的域名下的JavaScriptSDK，因此你在host文件中设置了如127.0.0.这样的对应关系。或许你在Web服务器（MAMP，wamp，xampp等）用虚拟主机配置了个性的域名。
若是想让移动设备显示特定域名下页面内容，你需要使用上述的端口转发技术和代理服务器技术来实现。代理服务器可以将移动设备上的请求映射到主机的正确位置。
目前有许多搭建代理服务器的工具，比如Mac上的Charles Proxy，在Windows系统下的Fiddler，Linux下的Squid cache，Squid作为一款开源的代理服务软件，也可以用作Web缓存服务器，实现高速的Web访问需求。主机上安装运行代理服务器，所有来自安卓移动设备的请求都将会转发到代理服务器。
代理服务的搭建方法这里不细说看，感兴趣的可以参考我的文章或自行查找。
端口转发代理设置的步骤：
1.& 安装代理服务软件，在主机上搭建代理服务器。
2.& 开启代理服务，并确保代理服务器运行的端口与Chrome端口转发所设端口不相同。
3.& Chrome浏览器打开“检查设备”chrome://inspect
4.& 点击Port forwarding 弹出设置窗口。
5.& 设备端口处填上安卓设备要监听的端口，如9000。
6.& 主机IP处可以填写localhost:xxxx，比如localhost:9000，也可以填写我上面配置过的本地域名:1818
7.& 勾选&Enableport forwarding
8.& 点击Done按钮完成参数配置。
移动设备代理服务参数设置：
1.& 打开设置-WLAN（Settings& Wi-Fi）
2.& 长按当前连接的无线网络（代理服务设置适用于每个无线网络）
3.& 点击修改网络（Modify network）
4.& 勾选高级选项（Advanced options），将显示设置项：
5.& 点击“代理”（Proxy）菜单选择“手动”（Manual）
6.& 在“代理服务器主机名”（&Proxyhostname）处输入localhost或者127.0.0.1
7.& 在“代理服务器端口”（Proxy port）处输入端口号，如9000
8.& 点击保存（Save）。
通过以上参数设置，移动设备上所有请求被转发到主机的代理服务器，代理服务器代表安卓移动设备来发送请求，使得发送到特定域名下的请求得到了合理的解析。现在你可以调试特定域名下的页面了。
注意：为了不影响移动设备正常上网浏览，断开USB数据线后一定要恢复代理设置。
Fiddler默认使用8888端口，我的本地服务器已经占用8888端口，所以在Fiddler-Tools菜单中将监听端口设为未使用的10000端口，如图：
手机端代理设置参数完毕后，打开ChromeDevTools进行调试。点击inspect可以看到页面显示在手机浏览器了，现在开始调试吧。
我的测试页面为
DevTools实例的调试截图如下：
手机端Chrome for Android中的实时截图如下：
注意主机要和移动设备处在同一网段的局域网内。
有问题的童鞋可以留言或查看我博客的其他相关文章。 Chrome远程调试部分就到这里了。移动端的调试还没有结束，下一节我会介绍Weinre远程调试的技巧和详细教程。
转载请注明出处：& freshlover的CSDN专栏文章《)》http://blog.csdn.net/freshlover/article/details/
参考文章：/devtools/docs/remote-debugging
本文已收录于以下专栏：
相关文章推荐
我使用的是小米（红米NOTE2 ）,电脑是win 10 系统，以下几步就可以轻松使用浏览器内置的功能调试移动端网页了：
1. 手机开启调试模式连接电脑，确保是调试模式连接的（不知道怎么打开调试模式的可...
原作者：袁飞翔一、参考资料Google官方文档：/web/tools/chrome-devtools/debug/remote-debuggi...
Chrome的开发者工具虽然很好用，但面对越来越多的手机型号，也显得有些力不从心，经常出现的情况之一是，在Chrome里调试得好好的页面，在手机上就变得不是那么一回事了。为此我们需要使用Chrome的...
谷歌即为chrome浏览器，对于开发前端页面有很大的优势。
一、谷歌调试PC网页
（1）首先打开chorme浏览器，输入进入百度页面，在空白页面右击，选中“检...
1、adb连接正常，打开手机USB调试
2、第一次使用的时候一定要保证翻墙！翻墙！翻墙
3、谷歌浏览器中打开chrome://inspect/#devices
4、打开微信小程序，刷新谷歌ins...
2、修改host
打开C:\Windows\System32\drivers\etc\hosts文件，添加：
61.91.161.217 chrome-de...
先谈谈什么是Stetho，怎么使用。
Stetho是Facebook推出的一款黑科技，能够在chrome里轻松查看app所有的网络请求、数据库数据。ste...
移动端采用原生开发还是H5开发一直接争论不休。但不论怎么说，采用H5开发app不仅仅快速高效，而且布局简单、漂亮，目前许多的框架已经可以做到让人看不出是原生还是H5开发了。
采用H5开发有一个好处就是...
Chrome还可以支持远程移动端调试，方法如下：
1 在开发机器上，按F12打开开发者工具，在开发者工具的右上角选择更多工具(More tools)->检查设备(Inspect devices),见...
使用PC上的 Chrome 远程调试手机端的页面
手机端：chrome for Android,；
PC端：安装谷歌浏览器(最好是最新版的开发者版本)
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
在iOS的WebView开发中，经常会把Cordova作为增强版的WebView使用。关于本部分的实例可以参考笔者的，可以在REAME.md中查看使用说明，也可以git clone 之后直接运行，按照指导进入相关页面。
Installation
引入Cordova主要包含三个步骤(怎么感觉有点像把大象塞到冰箱)：
（1）在Podfile中加入依赖项
可以使用pod search Cordova命令来搜索可用的Cordova版本，笔者是使用的4.0.1版本：
pod 'Cordova', '~& 4.0.1' # 支持Cordova WebView容器
添加完毕然后使用pod install命令下载即可。
（2）添加config.xml
config.xml即是主要的配置文件，在iOS中其需要放置到/AppName/config.xml这种样式。笔者的config.xml文件的示范为：
&?xml version='1.0' encoding='utf-8'?&
&widget id="io.cordova.hellocordova" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"&
&name&iOSBoilerplate&/name&
&description&
Cordova Demo in iOS Boilerplate
&/description&
&author email="dev@cordova.apache.org" href="http://cordova.io"&
&content src="index.html" /&
&preference name="BackupWebStorage" value="local"/&
&plugin name="cordova-plugin-whitelist" version="1" /&
&access origin="*" /&
&access origin="*.baidu.*" /&
&allow-intent href="http://*/*" /&
&allow-intent href="https://*/*" /&
&allow-intent href="tel:*" /&
&allow-intent href="sms:*" /&
&allow-intent href="mailto:*" /&
&allow-intent href="geo:*" /&
&platform name="android"&
&allow-intent href="market:*" /&
&/platform&
&platform name="ios"&
&allow-intent href="itms:*" /&
&allow-intent href="itms-apps:*" /&
&/platform&
&!--Cordova插件声明--&
&feature name="CordovaPluginsBridge"&
&param name="ios-package" value="CordovaPluginsBridge" /&
&param name="onload" value="false" /&
&/feature&
（3）添加www文件夹
一般来说会把静态资源文件放置到www目录下，这边有一个小点需要注意下(不知道是不是笔者搞错了)，就是将www文件夹引入到XCode中的时候，注意不要选择Copy而是File Reference，即最终的文件夹应该是如下图所示的蓝色而不是黄色。
Network Configuration
有时候在iOS中进行配置的时候会发现部分网络请求被Ban，可以根据以下几个步骤进行排查。
（1）判断config.xml中是否设置了网络请求的白名单，老实说现在cordova-plugin-whitelist这个插件都没有了iOS端，不确定这个是不是需要的。
&!-- Allow images, xhrs, etc.
--& &access origin="" /& &access origin="" /& &!-- Access to the subdomain
--& &access origin="" /& &!-- Access to all the subdomains
--& &access origin="http://*." /& &!-- Enable requests to content: URLs --& &access origin="content:///*" /& &!-- Don't block any requests --& &access origin="*" /&
（2）在iOS 9之后默认是不允许非HTTPs的请求发出，所以要修改下配置允许发起HTTP请求。
&key&NSAppTransportSecurity&/key& &dict&
&key&NSAllowsArbitraryLoads&/key&
&true/& &/dict&
（3）检查下 Content Security Policy
Content Security Policy一般用于对于网页内容的控制，不过这东西如果禁止了你访问网络，那么在浏览器内也是看得出来的。
&!-- Good default declaration:
* gap: is required only on iOS (when using UIWebView) and is needed for JS-&native communication
is required only on Android and is needed for TalkBack to function properly
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
* Enable eval(): add 'unsafe-eval' to default-src --& &meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ; style-src 'self' 'unsafe-inline'; media-src *"& &!-- Allow everything but only from the same origin
--& &meta http-equiv="Content-Security-Policy" content="default-src 'self' "& &!-- This policy allows everything (eg CSS, AJAX, object, frame, media, etc) except that
* CSS only from the same origin and inline styles,
* scripts only from the same origin and inline styles, and eval() --& &meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"& &!-- Allows XHRs only over HTTPS on the same domain. --& &meta http-equiv="Content-Security-Policy" content="default-src 'self' https:"& &!-- Allow iframe to https://cordova.apache.org/ --& &meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://cordova.apache.org"&
任何一个插件首先需要在config.xml中进行注册：
&feature name="CordovaPluginsBridge"&
&param name="ios-package" value="Echo" /&
&param name="onload" value="true" /&
&/feature&
有沒有指定插件的初始值設定項。相反，應使用插件 pluginInitialize 為其啟動邏輯方法。插件需要長時間運行的請求，如媒體重播、 聽眾，保持內部狀態應執行的背景活動 onReset 方法來清理這些活動。 在方法運行時UIWebView 定位到新的一頁或刷新，重新載入 JavaScript。
JS Modules
关于JS部分的详细配置可以参考官方的JS Modules部分，这里不做赘述，仅展示下基本的用法：
window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback('Nothing to echo.');
}, "CordovaPluginsBridge", "echo", [str]);
window.echo("echome", function(echoValue) {
alert(echoValue == "echome"); // should alert true.
要注意，一般对于Cordova的调用要放到jQuery的$(document).ready()中。
iOS本地方法
JavaScript 調用觸發插件請求到本機的一邊，和相應的 iOS 目標 C 插件映射正確地在 config.xml 檔中，但最後 iOS 目標 C 插件類看起來像什麼？ 無論派往與 JavaScript 的插件 exec 函數傳遞到相應的插件類的 action 方法。 插件的方法有此簽名：
- (void)myMethod:(CDVInvokedUrlCommand*)command
CDVPluginResult* pluginResult =
NSString* myarg = [command.arguments objectAtIndex:0];
if (myarg != nil) {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"Arg was null"];
[mandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
iOS CDVPluginResult 訊息類型
您可以使用 CDVPluginResult 來返回結果的多種類型回 JavaScript 回呼函數，使用類的方法，它們遵循這種模式：
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAs...
您可以創建 String ， Int ， Double ， Bool ， Array ， Dictionary ， ArrayBuffer ，和 Multipart 類型。 你可以也離開了任何參數來發送狀態，或返回錯誤，或甚至選擇不發送任何外掛程式的結果，在這種情況下既不回撥火。
請注意以下複雜的傳回值為：
messageAsArrayBuffer預計 NSData* 並將轉換為 ArrayBuffer 在 JavaScript 回檔。 同樣，任何 ArrayBuffer JavaScript 發送到一個外掛程式都將轉換為NSData*.
messageAsMultipart預計， NSArray* 包含任何其他支援類型，並將發送整個陣列作為 arguments 給您的 JavaScript 回檔。 這種方式，所有參數在序列化或反序列化作為必要的所以它是能夠安全返回 NSData* 作為多部分，但不是 Array /Dictionary.
如果对于部分执行时间较长的代码，可以放在后台进程中执行。
- (void)myPluginMethod:(CDVInvokedUrlCommand*)command
// Check command.arguments here.
[mandDelegate runInBackground:^{
NSString* payload =
// Some blocking logic...
CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:payload];
// The sendPluginResult method is thread-safe.
[mandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
0 收藏&&|&&6
你可能感兴趣的文章
1 收藏，2.9k
2 收藏，333
4 收藏，941
分享到微博？
我要该，理由是：