模擬及測試其他瀏覽器

您的任務並非確保網站在 Chrome 和 Android 裝置上順利運作。雖然 「裝置模式」可以模擬 iPhone 等多種裝置,我們建議你前往 以及瀏覽器模擬解決方案

摘要

  • 如果您的裝置沒有特定裝置,或是想對某個裝置進行即時檢查,最佳做法 就是直接在瀏覽器內模擬裝置
  • 透過裝置模擬器和模擬器,您可以在多種裝置上模擬開發網站 工作站
  • 透過雲端式模擬器,您可以在不同平台上自動執行網站的單元測試。

瀏覽器模擬器

瀏覽器模擬器很適合用來測試網站回應速度,但無法模擬差異 API、CSS 支援以及行動瀏覽器中的某些行為。從 確保一切運作正常。

Firefox回應式設計檢視

Firefox 提供回應式設計檢視畫面,可讓您從所需 而是探索您對於一般螢幕大小或自己尺寸,設計會有哪些變化: 然後拖曳邊緣

Edge 的 F12 模擬

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

由於 Edge 無法在舊版中相容,因此請使用 IE 11 的模擬功能來模擬 網頁的外觀。

裝置模擬器和模擬器

裝置模擬器和模擬器不僅可以模擬瀏覽器環境,也能模擬整個裝置。 這項功能可協助您測試需要 OS 整合的項目,例如透過虛擬方式輸入表單 鍵盤。

Android Emulator

Android Emulator 內建瀏覽器

Android Emulator 的內建瀏覽器

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

Android 模擬器含有 Android SDK,請從這裡下載。接著 按照操作說明設定虛擬裝置啟動模擬器

模擬器啟動後,點選「瀏覽器」圖示後,就能在 。

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 內容殼層來測試網站。

Android 版 Firefox

Android Emulator 上的 Firefox 圖示

Android Emulator 上的 Firefox 圖示

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

從以下位置下載正確的 .apk 檔案: https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.

接著,您可以使用以下指令,將檔案安裝到已開啟的模擬器或已連結的 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 在電腦上存取不同版本的 IE 簡稱 VMWare請前往下載頁面選擇虛擬機器。

雲端式模擬器和模擬器

如果無法使用模擬器,也無法存取實體裝置,那麼雲端式模擬器 更棒的是與實體裝置和本機模擬器相比,雲端式模擬器的一大優勢 例如在各種平台上自動執行網站的單元測試。

  • BrowserStack (商用) 是手動測試最容易使用的介面。請選取營運據點 系統並選取瀏覽器版本和裝置類型,選取要瀏覽的網址 可以互動的託管虛擬機器您也可以在 讓您以同一畫面測試應用程式在多部裝置上的外觀與風格。 讓應用程式從可以最快做出回應的位置 回應使用者要求
  • SauceLabs (Commercial) 可讓您在模擬器中執行單元測試, 編寫完網站腳本之前可以觀看相關錄影內容 。您也可以手動測試網站。
  • Device Anywhere (商業) 不會使用模擬器,而是你可以控管的實際裝置 遠端檢查。當您需要重現特定問題 裝置,在先前的指南中任一選項都看不到這項錯誤。
  • 您可以使用 LambdaTest (Commercial) 進行手動跨瀏覽器測試 超過 2000 個瀏覽器和以及作業系統使用者可以錄製複雜錯誤和 夏娃 的影片 並透過 MS Teams、Slack 等整合功能分享。使用者可以藉由 同時執行測試