使用 PC 版 Chrome 來 Debug 手機版的 Chrome
如果要開發手機版的網頁，經常會遇到一個問題就是，在 PC 上有很方便的 DevTools，但是在手機上面就很痛苦了~~~
幸好 Android 提供了一個好方法來 Debug~ 
 
先看看設定好之後的結果吧~ 第一張圖是手機的畫面，第二張就是電腦的畫面，操作會同步反應到手機上喔!!
 
48c1d2426049e5e445e6865a1cee7f05.png
 
a8f63a7c6b2bc532d54717fe2965b3b0.png

設定步驟

  • 準備需要的軟體
    1. 當然是 Chrome 囉~ 在 PC 跟 Android 手機上都需要安裝喔!
    2. 用 USB 線接到你的電腦上
    3. 這需要 Android 4.0 以上的版本才能使用喔!
  • 啟用 USB 偵錯
    先到 [設定] > 啟用 [開發人員選項] 中，開啟 [USB 偵錯]
     
    * 如果找不到開發人員選項，請參考 解開 Nexus 5 封印
  • 更新 USB Driver
    可以到這邊下載 Google 的 USB Drivers
    或是直接下載 latest_usb_driver_windows.zip
     
    下載解開後，進入裝置管理員，找到你的設備，並 更新驅動程式
    更新好後就會看到 Android Device > Android Composite ADB Interface 
    這樣就 ok 了~!
     
    * 如果你不是用 Nexus 系列的話，可能要確認一下是否可以更換回來喔!!!  (不要跟我確認喔!!!)
  • 接上 USB
    接上之後，手機應該會跳一個請你驗證的畫面
  • 開啟  Chrome (手機跟 PC 的都要開啟)
    在 PC 的 Chrome 輸入 chrome://inspect/
  • 按下 [inspect] 就可以使用囉!
     
Facebook 討論區載入中...