如何進行真機調試

一、手機如何訪問到本地主機頁面（真機訪問）

webpack 的配置文件中設置本地服務器的域名爲 0.0.0.0，可參考下面配置：

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

此時，本地主機可使用多種方式訪問頁面，好比：localhost:909五、ip地址:9095

手機也能夠經過訪問主機 ip地址+端口號 來訪問頁面，主機ip地址經過命令行 ipconfig 查看，好比：http://192.168.43.20:9095

 

1.一、本地服務器配置不一樣域名時訪問地址

webpack的配置文件中設置的本地服務器爲：

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

時，本地訪問localhost、127.0.0.一、和以本地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地址訪問到頁面）

 

二、手機端出錯如何查看調試信息（真機調試）

代碼配置好webpack後，手機能夠經過主機 ip 地址來訪問頁面，但當頁面出錯時如何查看出錯信息，如何進行調試呢？

（1）USB數據線鏈接手機，手機開啓調試模式

（2）手機經過訪問主機 ip 地址+端口號 來訪問頁面，或者打開其餘頁面也行，任何頁面均可以在主機上進行調試

（3）主機chrome瀏覽器地址欄輸入：chrome://inspect/#devices ，會看到相似於下圖的狀況

（能夠看到所鏈接的設備的名稱和信息，下面就是當前設備上能夠用於在電腦上調試的頁面的一下信息。若是沒有顯示鏈接的設備信息，則表示沒有鏈接好，能夠插拔手機或關閉調試模式重開一下）

手機USB鏈接後，可能會出現並不顯示鏈接設備的狀況，此時就是仍未鏈接成功，能夠經過 adb 來進行鏈接

（4）在某一頁面的下面點擊 inspect 按鈕便可，接着就能夠進行一系列的調試了

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

2.一、如何經過 adb 來鏈接手機

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

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

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

這時候若是還沒出現鏈接設備信息，有多是手機未打開USB調試選項，打開便可

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

 

三、點擊 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

 

四、在手機端訪問本地後臺可能出現的問題

在手機端訪問本地後臺服務器可能會出現問題，以前在本地頁面訪問本地後臺服務器使用的是 localhost 來進行訪問，可是當在手機端時，即便手機和主機使用的是同一局域網，若是接口地址不改，仍然使用 localhost 來訪問，此時就會報錯，訪問不到。

應該把接口的域名改成主機的 ip 地址，這樣手機端就是經過主機的 ip 地址來訪問接口，此時電腦端頁面也能夠訪問接口。