|
開發(fā)手機(jī)頁面以及Hybird應(yīng)用時(shí)，調(diào)試曾經(jīng)是個(gè)老大難問題，不時(shí)需要用寫log等方式曲線救國。
實(shí)際上，Chrome和Android(需要4.4+版本)已經(jīng)提供了不亞于電腦版本的調(diào)試功能，只是看樣子還有好多人不知道，所以寫下來分享給各位。本文遵循CC協(xié)議，歡迎轉(zhuǎn)發(fā)，但請(qǐng)注明作者和出處(http:///posts/659f97a6f06c90 )。
操作分成電腦和手機(jī)（或模擬器）兩個(gè)部分，操作流程如下：
-
在手機(jī)上打開“設(shè)置|開發(fā)者選項(xiàng) | USB調(diào)試”。
對(duì)于低版本的android，直接打開即可，對(duì)于4.4以上，“開發(fā)者選項(xiàng)”菜單被隱藏掉了，打開的方法是在“設(shè)置|關(guān)于手機(jī)”界面中雙擊“版本號(hào)”項(xiàng)（注意，不是“Android版本”項(xiàng)），一般需要連續(xù)雙擊兩次，這時(shí)候你會(huì)看到一個(gè)提示說開發(fā)者選項(xiàng)已經(jīng)打開了。
-
在手機(jī)上打開chrome瀏覽相應(yīng)網(wǎng)站或打開hybird程序。
-
把手機(jī)通過USB線連到電腦上，在問你是否打開USB調(diào)試是選擇“是”。如果是模擬器，那么請(qǐng)?jiān)诿钚休斎隺db connect <模擬器的ip地址，可以在模擬器的WLAN的連接詳情中看到>
-
在電腦上打開chrome，并訪問 chrome://inspect/#devices ，這是一個(gè)chrome的內(nèi)部頁面，在這里，你會(huì)看到設(shè)備的列表，列表中列出了它所包含的WebView。
-
在這個(gè)WebView下會(huì)有一個(gè)超鏈接按鈕：“Inspect”，點(diǎn)它，就打開了一個(gè)DevTools的頁面，和在電腦上調(diào)試頁面時(shí)使用的是同一個(gè)。
甚至當(dāng)你在它的Element頁把鼠標(biāo)懸停在某個(gè)節(jié)點(diǎn)上的時(shí)候，手機(jī)chrome中也會(huì)向電腦版chrome一樣對(duì)該節(jié)點(diǎn)進(jìn)行高亮（但有可能反應(yīng)會(huì)慢些）。
剩下的事情就不用我教你了吧……
我用的Hybird框架是ionic framework，如果你用的不是ionic，那么可能需要在程序的入口點(diǎn)添加如下代碼：
WebView.setWebContentsDebuggingEnabled(true)
當(dāng)然，要把它包裹在if條件里，免得發(fā)行版也被別人“調(diào)試”了。
iconic中的相應(yīng)代碼如下，供參考：
final String packageName = this.cordova.getActivity().getPackageName();
final PackageManager pm = this.cordova.getActivity().getPackageManager();
ApplicationInfo appInfo;
appInfo = pm.getApplicationInfo(packageName, PackageManager.GET_META_DATA);
if((appInfo.flags & ApplicationInfo.FLAG_DEBUGGABLE) != 0 &&
android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT)
{
setWebContentsDebuggingEnabled(true);
}
|
