记用Chrome远程调试ngCordova的file插件

今日折腾起了一个hybird app，由于其中需要用到文件读写功能，便引入了ngCordova的file插件，无奈得到成功回调后无论手机还是电脑上都无法搜寻到创建的文件，于是便有了用Chrome来远程调试该App的想法。

一、在手机上安装Chrome手机版和谷歌安装器这两个app。

点击”开始扫描“后会检测并提示你安装谷歌服务和谷歌市场，下载之。第一行提示你安装FQ或VPN的app，不用理会（下载过两个发现都已经失效），可通过搜索下载Lantern安卓版（在这个收费VPN横行，免费近乎灭绝的时代少有业界良心呐~）进行FQ。通过谷歌安装器或谷歌Play商店可登录google，说明FQ成功。（其实我不断定谷歌远程调试是否要求手机需要FQ，因为在测试成功前我已经走了这一步，为避疏漏在此写上。）

 

二、手机与电脑建立连接

    可以通过USB连接电脑后，在开发者选项处选择USB调试来进行有线连接，亦可以通过adb来进行无线连接。

　  通过adb进行无线连接:  

　　　　先要对手机进行root，然后将手机和电脑连接在同一局域网，手机下载Easy ADB Wireless这一app（其他类似的也行，推荐这个只是因为用起来比较简单）。点击“On”后会显示如图的ip地址，打开电脑控制台（Ctrl+R，输入cmd回车），操作如图：

确认这两项正常即可，有时会有类似”连接失败，由于对方计算机积极拒绝...“的提示，原因是Easy ADB Wireless的开关没开或需要重开。

用adb进行无线连接的好处显而易见，每次开工只需两句指令即可启动连接，手机可自由携带，最重要的是......好像有点逼格...

 

三、用电脑版Chrome进行调试

　　准备已就绪，在chrome地址栏输入“chrome://inspect“即可进入调试页面，对应的设备下方会显示chrome打开的网页和手机上打开的Hybird App，网页下方的四个按键分别对应审查、置顶、重载和关闭对应网页，右上方的输入框可输入要打开的网页链接。

　　此时随便找个页面点击inspect，或许你会跟我一样只得到一个空白的页面窗口，这是因为审查时需访问chrome-devtools://devtools/......这个链接，需FQ才能访问，所以需要再次下载Lantern的电脑版进行FQ。（之前误以为修改hosts就是F了Q，在这里绕了很久）

　　这里需要留意的是，虽说能够显示出内容了，可在网络环境较差的情况下会需要等待一段时间才能完成加载，为提高效率，推荐使用Gapdebug进行调试，用的也是chrome这一功能，只不过速度会快很多。

 

四、ngCordova的file插件

　　http://ngcordova.com/docs/plugins/file/ 官方网站在此，安装只需要在项目根目录下执行 cordova plugin add cordova-plugin-file 即可，网站下方有代码示例，看起来语法十分的简单：

$cordovaFile.createFile(cordova.file.dataDirectory, "new_file.txt", true)
      .then(function (success) {
        // success
      }, function (error) {
        // error
      });

三个使用要求包括：引入ng-cordova.js、主函数中注入依赖‘ngCordova'和控制器中引入$cordovaFile，官网上有比较详细的描述。

　然而一开始的问题还是没有解决，明明代码执行成功，但无论手机上还是连接电脑后搜索，都没能找到对应的文件和路径。后来发现原来生成的文件是放在了手机根目录的data文件夹之下，而这个文件夹无论你是否root都无法查看到，需要借助文件管理器，这里推荐RE文件管理器。

顺手将其权限进行修改（全勾），然后在对应路径下便可以找到那失踪多年的文件了。



　　第一次写博文，心潮来源于学习过程中受到不少前端友人的帮助，以博文的方式帮助我少走了许多弯路，故此我也渴望着能成为他们中的一员，虽然我目前还是只小小菜鸟~~
　　文章内容有点绕，主要是因为我本人便是这样走过来的，这样一个简单的问题花费了我几天的时间，不停地找着工具和解决思路（甚至一度认为是ngCordova相关要求没写全的问题），用着划词翻译的方式一句一句地翻译着外国网站的内容，还好最后是活下来了~~
　　最后若有什么不明白的地方可以给我留言哈，虽然我很可能也不懂，不过万一我懂了，会很乐意告诉大家的~