Ⅰ 移動端手機調試的幾種方法
很多時候,我們在進行移動端開發時,都是先在PC端使用手機模擬器進行調試,沒有問題後,我們才會在手機端的瀏覽器進行測試,這個時候,如果沒有出現問題,皆大歡喜。但是一旦出現問題,我們就很難解決,因為缺乏可視化的界面。不似在PC端,我們能直觀的去改變樣式,或者是進行斷點調試。
這里主要介紹三種方法:
1、Chrome DevTools(谷歌瀏覽器)的模擬手機調試
2、IOS Safari真機調試
3、Chrome DevTools遠程調試Android
這種調試方式不僅能用於模擬手機調試還是主要的PC端頁面調試的方式,這里主要說用於手機調試。
a.谷歌瀏覽器的開發者工具,可以參照下圖右鍵選擇」檢查「或者使用快捷鍵F12,打開開發者工具。
b.打開後看到類似如下界面的開發者調試界面,Elements可以查看文檔元素,Console可以在線調試js和查看輸出結果,Sources可以調試JS和查看依賴資源,Network查看所有的網路請求等等。
c.如果沒有需要模擬的機型怎麼辦?可以增加,點開機型設置面板,選擇edit,然後可以在右方修改展示機型,如下:
d.還可以模擬不同網路情況。
a.使用數據線將 iPhone 與 Mac 相連
b.iPhone 開啟 Web 檢查器(設置 -> Safari -> 高級 -> 開啟 Web 檢查器)
c.iPhone 使用 Safari 瀏覽器打開要調試的頁面(以蘭亭單品頁為例)
d.Mac 打開 Safari 瀏覽器調試(菜單欄 —> 開發 -> iPhone 設備名 -> 選擇調試頁面)
如果你的菜單欄沒有「開發」選項,可以到左上角 Safari -> 偏好設置 -> 高級 -> 在菜單欄中顯示「開發」菜單。
e.在彈出的 Safari Developer Tools 中調試。
經過如上步驟就可在 Mac 端調試 iPhone 上 Safari 運行的頁面了。
a.在 Chrome 瀏覽器地址欄中輸入 chrome://inspect/#devices 並回車,就可以打開 Inspect 調試界面,此時我們勾選Discover USB devices 選項便可以看到設備列表。
b.然後打開手機中開發者選項並打開 USB 調試開關(具體方法自行網路,不同手機有一定區別),使用數據線將手機連接到電腦上,我們就可以在設備列表中看到自己的設備。
c.這時,打開手機上的Chrome 瀏覽器,隨便打開一個網址(以蘭亭單品頁為例),設備列表中你的設備下便會出現你打開的頁面。
d.此時我們點擊 inspect 選項。
e.接下來你便可以和調試 PC 界面一樣通過 Chrome 進行你所需要的調試,你在左側屏幕上做的一切操作和你的手機上的操作會始終保持同步,如果你嫌左邊這塊多餘,也可以關閉 Toggle Screencast 只保留控制台本身。
Ⅱ 如何用滑鼠鍵盤控制你的Android手機
網上大都是91助手for
android來連接手機和電腦,我自己比較偏向於豌豆莢,都可以的,下面給出我的步驟及過程中遇到的幾個小問題,供大家參考!
一、滑鼠鍵盤控制手機教程
1、在PC上,安裝豌豆莢,或91助手for
android或安裝Android
SDK
(目的是利用其中的ADB調試命令),並下載安裝java運行環境,也就是JDK,相信大家電腦上都有,沒有的去下載個安裝。
2、將你的Android手機提權,即通常所講的ROOT。可安裝Universal
Root這個軟體,在91、豌豆夾都有。
3、在命令行cmd下面執行以下語句
adb
shell
su
chmod
777
/data/dalvik-cache
cd
/data/dalvik-cache
chmod
777
./*
請注意,在執行“su”這句命令的時候,請務必保證手機已經獲得root許可權,同時將手機解鎖,留意其屏幕提示,此時將會有一個提示請求你確認是否授予root許可權給“su”這個指令,請選擇allow選項。
4、下載Android
Screen
Cast,雙擊運行之,第一次運行時需要Internet以便下載程序包
下載地址:http://androidscreencast.googlecode.com/svn/trunk/AndroidScreencast/dist/androidscreencast.jnlp
5、現在,你可以用滑鼠鍵盤來控制你心愛的Android手機了,但請牢記手機不要鎖屏,否則只能看,無法控制。
二、我在實現過程中遇到的問題
1.
運行adb
shell命令時顯示“adb
server
is
out
of
date.
killing...”
原因:究其源就是adb
server沒啟動
解決方案:通過以下嘗試發現原來是adb
server
埠綁定失敗,繼續查看到底是哪個埠給佔用了
原來被6408這個進程佔用了埠,打開任務管理器,殺掉6408這個進程。(可以在任務管理器菜單,查看->選擇列中勾選(PID)進程標識符)
這是豌豆莢進程,結果發現殺不掉,顯示“拒絕訪問”,於是直接右鍵點擊豌豆莢圖標退出,當時退出豌豆莢也就意味著與手機斷開連接了,再次嘗試運行豌豆莢連接手機,再次運行adb
shell發現出現了新的問題2,但這次豌豆莢進程沒有佔用5037埠,第一個問題解決了。
2.
運行adb
shell命令時顯示“error:device
not
found”
原因:不能識別已成功連接至電腦的手機設備
解決方案:是因為我手機是通過wifi連接至電腦的,沒有用數據線,故沒能識別,換成數據線USB連接後,此問題解決,後面就沒其他問題了。