如何進行真機調試


1、手機如何訪問到本地主機頁面(真機訪問)

webpack 的配置文件中設置本地服務器的域名為 0.0.0.0,可參考下面配置:

devServer :{
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 9095
}

此時,本地主機可以使用多種方式訪問頁面,比如:localhost:9095、ip地址:9095

手機也可以通過訪問主機 ip地址+端口號 來訪問頁面,主機ip地址通過命令行 ipconfig 查看,比如:http://192.168.43.20:9095

 

1.1、本地服務器配置不同域名時訪問地址

webpack的配置文件中設置的本地服務器為:

devServer :{
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 9095
}

時,本地訪問localhost、127.0.0.1、和以本地ip地址開頭的域名比如:http://192.168.43.20:9095時,就可以訪問到,但是訪問0.0.0.0:9095就訪問不到

當配置為:

devServer :{
    disableHostCheck: true,
    host: '127.0.0.1',
    port: 9095
}

時,本地訪問localhost、127.0.0.1可以訪問到,但是ip地址、0.0.0.0:9095就訪問不到

 (手機能訪問的前提是手機跟主機在同一局域網內,且主機配置頁面服務器地址為 0.0.0.0 ,由此手機可通過主機的ip地址訪問到頁面)

 

2、手機端出錯如何查看調試信息(真機調試)

代碼配置好webpack后,手機可以通過主機 ip 地址來訪問頁面,但當頁面出錯時如何查看出錯信息,如何進行調試呢?

(1)USB數據線連接手機,手機開啟調試模式

(2)手機通過訪問主機 ip 地址+端口號 來訪問頁面,或者打開其他頁面也行,任何頁面都可以在主機上進行調試

(3)主機chrome瀏覽器地址欄輸入:chrome://inspect/#devices ,會看到類似於下圖的情況

(可以看到所連接的設備的名稱和信息,下面就是當前設備上可以用於在電腦上調試的頁面的一下信息。如果沒有顯示連接的設備信息,則表示沒有連接好,可以插拔手機或關閉調試模式重開一下)

手機USB連接后,可能會出現並不顯示連接設備的情況,此時就是仍未連接成功,可以通過 adb 來進行連接

(4)在某一頁面的下面點擊 inspect 按鈕即可,接着就可以進行一系列的調試了

參考:https://www.jianshu.com/p/4d6fbdddad5c

2.1、如何通過 adb 來連接手機

adb 只是一個命令行窗口,並不能直接運行,下載完成后是一個 exe 文件,直接雙擊可能並不能運行。

下載完 adb 后,手機USB連接電腦,在電腦谷歌瀏覽器輸入chrome://inspect/#devices 可能看不到連接設備信息,這種情況就是仍未連接成功。

這時候在 adb 的可運行程序即 exe 文件目錄下執行 cmd,然后再運行adb devices,手機端應該就會彈出顯示框,選擇后就能進行相應調試,電腦谷歌瀏覽器也能看到連接設備的信息。

這時候如果還沒出現連接設備信息,有可能是手機未打開USB調試選項,打開即可

adb 下載地址:https://www.jianshu.com/p/4d6fbdddad5c

 

3、點擊 inspect 按鈕后出現HTTP/1.1 404 Not Found

 在連接設備出現后,而且頁面也顯示出來了,但是點擊按鈕 inspect 可能會出現HTTP/1.1 404 Not Found的情況,我當時就是這樣,然后因為這個問題而找了好久解決方法。

這個問題的出現是因為谷歌瀏覽器的版本問題,電腦上的谷歌版本太新,在網上看到說是因為手機上的谷歌瀏覽器版本比電腦上的高。(應該是因為電腦上的谷歌瀏覽器版本太高,67.x版本就可以)

由此我降低了谷歌瀏覽器的版本,而且是只能卸載新的版本才能安裝舊的版本。手機端我使用的是 Chrome 67.0.3396.87 版本、電腦上我使用的是 67.0.3396.79(正式版本),這兩個版本配合使用可以進行調試。

通過點擊 inspect 按鈕可能會比較慢,而且可能會出現問題,我們應該通過點擊 inspect fallback 按鈕進行調試,當然,只有版本正確而且連接成功時才會出現這個按鈕

 參考:https://stackoverflow.com/questions/51519636/google-chrome-developer-tools-android-debugging-returns-http-1-1-404-not-found

 

4、在手機端訪問本地后台可能出現的問題

在手機端訪問本地后台服務器可能會出現問題,之前在本地頁面訪問本地后台服務器使用的是 localhost 來進行訪問,但是當在手機端時,即使手機和主機使用的是同一局域網,如果接口地址不改,仍然使用 localhost 來訪問,此時就會報錯,訪問不到。

應該把接口的域名改為主機的 ip 地址,這樣手機端就是通過主機的 ip 地址來訪問接口,此時電腦端頁面也可以訪問接口。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM