模擬及測試其他瀏覽器

您的任務並不是確保網站在 Chrome 和 Android 裝置上都能順利運作。即使裝置模式可以模擬 iPhone 等其他裝置,我們仍建議您查看其他瀏覽器適用的模擬解決方案。

摘要

  • 如果您沒有特定裝置,或想進行部分活動檢查,最佳做法是直接在瀏覽器中模擬裝置。
  • 裝置模擬器和模擬器可讓您透過工作站在各種裝置上模擬開發網站。
  • 雲端式模擬器可讓您針對網站在不同平台上自動進行單元測試。

瀏覽器模擬器

瀏覽器模擬器非常適合用來測試網站回應速度,但不會模擬 API、CSS 支援,以及行動瀏覽器的特定行為。請在實體裝置上的瀏覽器上測試您的網站,確保網站可正常運作。

Firefox 的回應式設計檢視

Firefox 提供回應式設計檢視畫面,建議您不再以特定裝置為考量,而是改以常用螢幕大小或拖曳邊緣的方式,探索設計如何調整常用螢幕大小或尺寸。

Edge 的 F12 模擬

如要模擬 Windows Phone,請使用 Microsoft Edge 的內建模擬

由於 Edge 並未與舊版相容,因此請使用 IE 11 的模擬功能模擬您的網頁在舊版 Internet Explorer 中的顯示效果。

裝置模擬器和模擬器

裝置模擬器和模擬器不僅會模擬瀏覽器環境,也會模擬整個裝置。這些方法適用於測試需要 OS 整合的項目,例如虛擬鍵盤的表單輸入。

Android Emulator

Android Emulator 圖庫瀏覽器

Android Emulator 中的素材庫瀏覽器

目前無法在 Android 模擬器中安裝 Chrome。不過,您可以使用 Android 瀏覽器、Chromium 內容殼層和 Android 版 Firefox,我們會在本指南稍後說明。Chromium 內容 Shell 使用相同的 Chrome 轉譯引擎,但沒有任何瀏覽器專屬功能。

Android 模擬器隨附 Android SDK,請按這裡下載。然後按照操作說明設定虛擬裝置啟動模擬器

模擬器啟動後,按一下瀏覽器圖示,即可在 Android 適用的舊股市瀏覽器測試網站。

Android 上的 Chromium 內容介面

Android Emulator 內容介面

Android Emulator 內容介面

如要安裝 Android 版 Chromium 內容殼層,請讓模擬器持續執行,並在命令提示字元中執行下列指令:

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

您現在可以使用 Chromium 內容介面測試網站。

Firefox Android 版

Android Emulator 上的 Firefox 圖示

Android Emulator 上的 Firefox 圖示

與 Chromium 的 Content Shell 類似,你可以取得可在模擬器中安裝 Firefox 的 APK。

https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/ 下載正確的 .apk 檔案。

接著,您可以使用下列指令,將檔案安裝到已開啟的模擬器或已連結的 Android 裝置上:

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

iOS 模擬器

Mac OS X 適用的 iOS 模擬器隨附 Xcode,可從 App Store 安裝

完成後,請參閱 Apple 說明文件,瞭解如何使用模擬器。

Modern.IE

現代化 IE VM

現代化 IE VM

Modern.IE 虛擬機器可讓您在電腦上透過 VirtualBox (或 VMWare) 存取電腦上的不同 IE 版本。請在下載頁面中選擇虛擬機器。

雲端式模擬器和模擬器

如果您無法使用模擬器,且無法存取實體裝置,那就最好使用雲端式模擬器。雲端式模擬器的一大優勢,在於能夠跨越不同平台自動針對網站進行單元測試。

  • BrowserStack (商用) 是最適合手動測試的最容易使用。您可以選取作業系統、瀏覽器版本和裝置類型,選取要瀏覽的網址,啟動可進行互動的託管虛擬機器。您也可以在同一個畫面中啟動多個模擬器,藉此測試應用程式在不同裝置上的外觀和風格。
  • SauceLabs (商用) 可讓您在模擬器中執行單元測試,這項工具非常適合用來編寫網站的流程指令碼,然後在各種裝置上觀看此影片的錄影。您也可以手動對網站進行測試。
  • Device Anywhere (商用) 不會使用模擬器,而是可從遠端控制的實際裝置。如果需要在特定裝置上重現問題,且在上一篇指南中有任何選項都沒看到錯誤,這項功能非常實用。
  • LambdaTest (商業) 可協助您搭配超過 2000 個瀏覽器和作業系統,手動測試瀏覽器。使用者將能錄製複雜錯誤的影片,並透過 MS Teams、Slack 等整合服務分享。使用者可以同時執行測試來加快測試速度。