模擬及測試其他瀏覽器

確保網站在 Chrome 和 Android 上順暢運作，只是您工作內容的一部分。雖然裝置模式可以模擬 iPhone 等各種裝置，但我們建議您查看其他瀏覽器模擬解決方案。

摘要

  • 如果您沒有特定裝置，或想對某些項目進行抽查，最佳做法是在瀏覽器中模擬裝置。
  • 裝置模擬器和模擬器可讓您在工作站上模擬各種裝置的開發網站。
  • 雲端式模擬器可讓您在不同平台上為網站自動執行單元測試。

瀏覽器模擬器

瀏覽器模擬器非常適合用於測試網站的回應速度，但無法模擬行動瀏覽器中的 API、CSS 支援和特定行為差異。請在實際裝置上執行的瀏覽器上測試網站，確保一切運作如常。

Firefox 的回應式設計檢視畫面

Firefox 提供回應式設計檢視畫面，讓您不必再以特定裝置為思考重點，而是透過拖曳邊緣，探索設計在常見螢幕大小或您自訂的大小下會如何變化。

Edge 的 F12 模擬功能

如要模擬 Windows Phone，請使用 Microsoft Edge 的內建模擬功能。

由於 Edge 不提供舊版相容性，請使用 IE 11 模擬功能模擬舊版 Internet Explorer 中網頁的外觀。

裝置模擬器

裝置模擬器和模擬器模擬的不僅是瀏覽器環境，而是整部裝置。這類測試可用於測試需要 OS 整合的項目，例如使用虛擬鍵盤輸入表單內容。

Android Emulator

Android Emulator 原生瀏覽器

Android 模擬器中的原生瀏覽器

目前無法在 Android 模擬器上安裝 Chrome。不過，您可以使用 Android 瀏覽器、Chromium 內容殼層和 Firefox 適用於 Android 裝置，我們會在本指南稍後介紹這兩項工具。Chromium 內容殼層使用相同的 Chrome 轉譯引擎，但不含任何瀏覽器專屬功能。

Android Emulator 隨附 Android SDK，您需要從這裡下載。然後按照指示設定虛擬裝置，並啟動模擬器。

模擬器啟動後，請按一下「Browser」圖示，即可在舊版 Android 版「Stock Browser」上測試網站。

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 內容 Shell 測試網站。

Android 版 Firefox

Android Emulator 上的 Firefox 圖示

Android Emulator 上的 Firefox 圖示

與 Chromium 的內容殼層類似，您可以取得 APK 來在模擬器上安裝 Firefox。

前往 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 (商業版) 可協助您在 2,000 多種瀏覽器和作業系統的組合上，手動執行跨瀏覽器測試。使用者可以錄製複雜錯誤的影片，並透過 MS Teams、Slack 等整合服務分享影片。使用者可以並行執行測試，加快測試速度。