起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Android 4.4 讓前端調試也能這么酷
Google公司低調地推出了Android4.4，提供了一系列讓人眼前為之一亮的改進體驗，如無線打印、NFC（近場通信）等。作為一名前端同學，同時也需要敏感地關注到Android4.4在使用瀏覽器內核時的一些變動。Android4.4之前瀏覽器的渲染引擎都是webcore，Android默認瀏覽器使用的接口是Webkit。而從Android4.4(包括PC上Chrome V33)以后，Google從Webkit分支folk出了自己的渲染引擎blink。在移動端，blink的注入會對之前基于Webview的視窗可能產生一些影響。Cluo之前一直在做應用中心移動端的重構，就碰到了在Android4.4下界面顯示時一個小bug。
但是這里我們關注的重點不是這個小bug，因為解決起來比較容易，我們需要關注的是Android4.4為開發者帶來的福利。是的，你沒有看錯，是福利！
前端開發的同學通常會在Chrome的開發者調試工具中來對CSS和js進行即時調試和查看效果，如下圖一樣，對比調試的好處誰用誰知道。
但是，當我們調試混合模式下通過Webview來調用頁面的App時就不能使用這種方法啦，常見的方法是在本地調試好代碼，用Phonegap封裝在手機上查看效果。如果效果不一樣則需要重新調整代碼、打包等，非常麻煩。Android4.4的到來如一場春風細雨，為何如此矯情？因為，在Android4.4下，原來PC上的調試體驗可以完整繼承下來！在PC打開調試工具，手機屏作為視圖承載者能即時地顯示出樣式調整的變化。聽上去就非常Amazing！
好的，說了那么多廢話，讓我們來一起看看怎么使用這種調試方法吧。打開手機=》設置=》開發者選項，進入到如下界面：
在這個界面上，我們可以看到“USB調試”和“ADB網絡調試”，這兩種調試模式在使用之前必須勾選打開。這里需要簡單介紹一下的是：USB調試，很好理解，就是將手機通過數據線連上電腦；ADB網絡調試稍微要麻煩一點，手機跟PC要接入同一個局域網中。在這篇文章中，主要介紹USB調試模式，因為它非常適合單人、單機調試操作。
在使用調試工具之前，我們還要確認以下幾點：Chrome升級到最新版本、我本機Chrome的版本是 35.0.1862.2 dev-m ，可以在Chrome瀏覽器地址欄中輸入“chrome://chrome/”查看當前Chrome的版本號；PC上安裝ADB工具，在命令行中鍵入“adb version”以查看adb版本。Chrome只需要去看一下版本即可，應該都有安裝，但是adb估計很少人安裝，具體地可以到這里http://developer.android.com/tools/help/adb.html查看，不贅述。
萬事具備，Let’s go！
這里我們以調試手Q應用中心線上首頁為例
1、打開手機QQ=》動態=》應用寶
2、打開Chrome瀏覽器，在瀏覽器地址欄輸入：chrome://inspect/#devices ，如下圖，選中紅框處的復選框
3、在對應設備的下方會出現正在顯示的頁面，如下圖所示，點擊inspect鏈接，進入Chrome的調試模式
完整地給張截圖吧，如下所示：
在蛋蛋同學的幫助下，完整地拍下調試的界面，在Chrome調試工具里面可以直接調試和更改手機上正在渲染的頁面。
在最后的最后，簡單介紹一下ADB網絡調試的方法。首先讓PC和手機接入同一局域網，最好可以給手機設置一個局域網靜態IP地址；然后在PC命令行輸入adb ***（***代表手機在局域網中的地址）；打開Chrome，同上面步驟2所述。前端的同學們，讓調試也變得高效和Cool起來吧！
感謝你的閱讀，本文由?騰訊ISUX (http://isux.tencent.com/android-4-4-front-end-debug.html)版權所有。
- 目前還沒評論，等你發揮！
