Google公司低調(diào)地推出了Android4.4，提供了一系列讓人眼前為之一亮的改進(jìn)體驗，如無線打印、NFC（近場通信）等。作為一名前端同學(xué)，同時也需要敏感地關(guān)注到Android4.4在使用瀏覽器內(nèi)核時的一些變動。Android4.4之前瀏覽器的渲染引擎都是webcore，Android默認(rèn)瀏覽器使用的接口是Webkit。而從Android4.4(包括PC上Chrome V33)以后，Google從Webkit分支folk出了自己的渲染引擎blink。在移動端，blink的注入會對之前基于Webview的視窗可能產(chǎn)生一些影響。Cluo之前一直在做應(yīng)用中心移動端的重構(gòu)，就碰到了在Android4.4下界面顯示時一個小bug。

但是這里我們關(guān)注的重點(diǎn)不是這個小bug，因為解決起來比較容易，我們需要關(guān)注的是Android4.4為開發(fā)者帶來的福利。是的，你沒有看錯，是福利！

前端開發(fā)的同學(xué)通常會在Chrome的開發(fā)者調(diào)試工具中來對CSS和js進(jìn)行即時調(diào)試和查看效果，如下圖一樣，對比調(diào)試的好處誰用誰知道。

但是，當(dāng)我們調(diào)試混合模式下通過Webview來調(diào)用頁面的App時就不能使用這種方法啦，常見的方法是在本地調(diào)試好代碼，用Phonegap封裝在手機(jī)上查看效果。如果效果不一樣則需要重新調(diào)整代碼、打包等，非常麻煩。Android4.4的到來如一場春風(fēng)細(xì)雨，為何如此矯情？因為，在Android4.4下，原來PC上的調(diào)試體驗可以完整繼承下來！在PC打開調(diào)試工具，手機(jī)屏作為視圖承載者能即時地顯示出樣式調(diào)整的變化。聽上去就非常Amazing！

好的，說了那么多廢話，讓我們來一起看看怎么使用這種調(diào)試方法吧。打開手機(jī)=》設(shè)置=》開發(fā)者選項，進(jìn)入到如下界面：

在這個界面上，我們可以看到“USB調(diào)試”和“ADB網(wǎng)絡(luò)調(diào)試”，這兩種調(diào)試模式在使用之前必須勾選打開。這里需要簡單介紹一下的是：USB調(diào)試，很好理解，就是將手機(jī)通過數(shù)據(jù)線連上電腦；ADB網(wǎng)絡(luò)調(diào)試稍微要麻煩一點(diǎn)，手機(jī)跟PC要接入同一個局域網(wǎng)中。在這篇文章中，主要介紹USB調(diào)試模式，因為它非常適合單人、單機(jī)調(diào)試操作。

在使用調(diào)試工具之前，我們還要確認(rèn)以下幾點(diǎn)：Chrome升級到最新版本、我本機(jī)Chrome的版本是 35.0.1862.2 dev-m ，可以在Chrome瀏覽器地址欄中輸入“chrome://chrome/”查看當(dāng)前Chrome的版本號；PC上安裝ADB工具，在命令行中鍵入“adb version”以查看adb版本。Chrome只需要去看一下版本即可，應(yīng)該都有安裝，但是adb估計很少人安裝，具體地可以到這里http://developer.android.com/tools/help/adb.html查看，不贅述。

萬事具備，Let’s go！

這里我們以調(diào)試手Q應(yīng)用中心線上首頁為例

1、打開手機(jī)QQ=》動態(tài)=》應(yīng)用寶

2、打開Chrome瀏覽器，在瀏覽器地址欄輸入：chrome://inspect/#devices ，如下圖，選中紅框處的復(fù)選框

3、在對應(yīng)設(shè)備的下方會出現(xiàn)正在顯示的頁面，如下圖所示，點(diǎn)擊inspect鏈接，進(jìn)入Chrome的調(diào)試模式

完整地給張截圖吧，如下所示：

在蛋蛋同學(xué)的幫助下，完整地拍下調(diào)試的界面，在Chrome調(diào)試工具里面可以直接調(diào)試和更改手機(jī)上正在渲染的頁面。

在最后的最后，簡單介紹一下ADB網(wǎng)絡(luò)調(diào)試的方法。首先讓PC和手機(jī)接入同一局域網(wǎng)，最好可以給手機(jī)設(shè)置一個局域網(wǎng)靜態(tài)IP地址；然后在PC命令行輸入adb ***（***代表手機(jī)在局域網(wǎng)中的地址）；打開Chrome，同上面步驟2所述。前端的同學(xué)們，讓調(diào)試也變得高效和Cool起來吧！