如何在不同的瀏覽器中測試WordPress網站(簡便方法)


您想在其他瀏覽器中測試WordPress網站嗎? 跨瀏覽器測試在更改WordPress主題或實施新設計時非常重要,因為它可以幫助您確保您的網站在所有不同的瀏覽器,屏幕尺寸,操作系統和移動設備上看起來都不錯。 在本文中,我們將向您展示如何在不同的瀏覽器中輕鬆測試WordPress網站。

在不同的瀏覽器中測試您的WordPress網站

什麼是跨瀏覽器測試?

跨瀏覽器測試是跨多個瀏覽器,操作系統,屏幕尺寸和移動設備測試網站的過程,以確保您的網站在所有不同的Web瀏覽器上都能正常運行。

為什麼要在不同的瀏覽器中測試WordPress網站?

谷歌瀏覽器是全球最受歡迎的網絡瀏覽器,在台式機和移動設備上的市場份額分別為65%和57%。 但是,其他瀏覽器,例如Firefox,Microsoft Edge,Safari和Opera,仍被全球數億用戶廣泛使用。

由於瀏覽器,操作系統和設備的範圍廣泛,跨瀏覽器測試已成為構建網站的重要組成部分。 跨瀏覽器測試可幫助您跨不同的瀏覽器,設備和平台為所有用戶提供一致的Web體驗。

儘管所有流行的瀏覽器的行為 幾乎相同 呈現網頁時,它們都使用不同的代碼,這意味著它們可能會不時處理不同的網站元素。

作為網站所有者,這意味著您的網站在各種瀏覽器中看起來可能有所不同。 由於這些不是所有人都能看到的常見WordPress錯誤,因此您可能要花幾個月的時間才知道這個問題,直到有人舉報。

這就是為什麼在多個平台和屏幕尺寸不同的瀏覽器上測試WordPress網站被視為最佳實踐的原因,因此您可以確保您的網站為所有用戶提供相同的用戶體驗。

現在,大多數人沒有訪問各種各樣的設備來測試網站。 即使您設法從朋友那裡借用了多個設備,手動來回切換也需要大量工作。 幸運的是,存在跨瀏覽器測試工具,這些工具只需單擊即可幫助自動化該過程。

但是,在我們共享WordPress最佳跨瀏覽器測試工具的列表之前,重要的是要知道哪種瀏覽器在用戶中很流行,因此您可以據此進行關注。

如何找到您的網站訪問者使用哪些瀏覽器?

考慮到可用操作系統,瀏覽器和瀏覽器版本組合的數量,對於小型企業所有者而言,跨瀏覽器測試可能是一項繁瑣的任務。

但是,如果您知道網站訪問者使用的流行瀏覽器,操作系統和設備,那麼您可以自己簡化此過程。 根據您的特定統計數據,您可能只能測試少數幾種流行組合。

您可以使用Google Analytics(分析)來找出哪些瀏覽器,操作系統和設備在用戶中最受歡迎。

只需登錄到您的Google Analytics(分析)帳戶,然後轉到 受眾»技術 報告。 在這裡,您可以找到有關網站訪問者使用的瀏覽器,操作系統,屏幕尺寸的信息。

Google Analytics(分析)技術概述

獲得此列表後,您可以專注於排名靠前的組合,而避免其餘的組合。

如果您只是開始寫博客或沒有Google Analytics(分析),我們建議您立即安裝MonsterInsights以正確設置Google Analytics(分析)。 安裝後,您可以選擇等待幾週來收集數據,也可以繼續在所有瀏覽器上測試您的網站。

WordPress的最佳跨瀏覽器測試工具

跨瀏覽器測試工具使您可以輕鬆地跨多個瀏覽器,操作系統和設備測試WordPress網站。 只需單擊幾下,您便可以跨不同的瀏覽器自動測試您的網站。

以下是WordPress網站的頂級跨瀏覽器測試工具列表:

1.瀏覽器快照

瀏覽器快照

Browsershots是一個開源工具,使您可以使用不同操作系統上的多個瀏覽器來測試您的網站。 關於這個工具最好的部分是它是免費的。 不利的一面是它不包括Microsoft Edge或Internet Explorer。 它還不包括移動設備支持。

要使用Browsershots,只需輸入您的網站URL,然後選擇要測試的瀏覽器。 在Linux,Windows和Mac OS的三列中列出了瀏覽器。

提交請求後,您將需要等待一段時間才能運行測試並生成屏幕截圖。 完成後,您將可以在同一頁面上查看屏幕截圖。 現在,您可以繼續並單擊屏幕快照以將其展開。

注意:BrowserShots會截取網站的屏幕快照,這意味著它不是實時測試的。 在測試期間,您可能看不到您的網站是否按預期工作。 為此,您需要在實際的瀏覽器中運行實時測試的工具。

2. CrossBrowserTesting

跨瀏覽器測試

CrossBrowserTesting是易於使用且功能強大的跨瀏覽器測試工具,具有實時測試和屏幕截圖功能。 這是我們在Awesome Motive中使用的工具,用於測試WPBeginner等網站和我們的高級WordPress插件。

這是一項付費服務,但他們確實提供了100分鐘的免費試用帳戶來測試產品。

創建試用帳戶後,轉到“實時測試”標籤,您可以在其中選擇操作系統和瀏覽器。 它將在實際顯示在屏幕上的實際瀏覽器中加載您的網站URL。

如果您想一次快速獲取多個屏幕截圖,請單擊“屏幕截圖”標籤,然後運行新的屏幕截圖測試。 CrossBrowserTesting工具將自動在運行Chrome,Firefox,Safari,Microsoft Edge網絡瀏覽器的Mac,Windows,iPad和Nexus 6P手機上獲取屏幕截圖。

它還在每個屏幕截圖下方提到了佈局差異,您可以單擊這些差異以將佈局與基本佈局進行比較。 您還可以並排比較不同的佈局,或將所有屏幕截圖下載到計算機上。

免費帳戶在您可以運行的瀏覽器和操作系統組合方面有所限制。 但是,它涵蓋了頂級移動和桌面平台上最流行的瀏覽器。

價錢: 從每月29美元起,每年開始計費。

3. BrowserStack

瀏覽器堆棧

BrowserStack是針對移動應用程序和網站的付費跨瀏覽器和跨平台測試工具。 他們還提供了一個有限的免費試用帳戶,使您有30分鐘的訪問時間來測試其平台。

它具有實時測試和屏幕截圖功能。 您可以選擇要測試的平台,然後選擇瀏覽器。 BrowserStack將使用實際的瀏覽器窗口加載虛擬模擬器。 您只需輸入要測試的URL即可開始測試。

結果非常準確,速度也令人滿意。 但是,您仍然必須通過打開每個瀏覽器來手動執行測試。

價錢: 每月$ 29美元/月起。

如何分析跨瀏覽器測試屏幕截圖?

既然您已經了解了在不同的瀏覽器中測試WordPress網站的最簡單方法,那麼下一部分將分析您的結果,看看是否有需要修復的問題。

如果您運行的是響應良好的WordPress主題,其主題後面帶有高質量的代碼,則大多數屏幕截圖看起來都差不多。

但是,在某些情況下,網站元素可能在一個瀏覽器與另一個瀏覽器之間看起來略有不同。 如果這種差異很小,並且不會影響用戶體驗,美觀或功能,則可以忽略它。

另一方面,如果差異太明顯,影響用戶體驗,看起來不愉快或阻止用戶按預期使用您的網站,則需要引起您的注意。

在大多數跨瀏覽器測試中,您會發現主題存在CSS問題。 可以使用Inspect Tool來解決此問題,以找出需要更新的CSS規則。 之後,您可以添加自定義CSS來解決這些問題。

如果您無法解決問題,則可以隨時僱用WordPress開發人員來幫助您解決問題。

我們希望本文能幫助您學習如何在不同的瀏覽器中輕鬆測試WordPress網站。 您可能還希望查看我們關於提高WordPress速度和性能的最終分步指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。