首頁?>?知識?資訊?>?如何同步測試多個瀏覽器和設(shè)備的網(wǎng)站?>?正文

如何同步測試多個瀏覽器和設(shè)備的網(wǎng)站

2019/8/23 0:00:00 · 稿源:傳誠信

建設(shè)響應(yīng)式網(wǎng)站時,我們需要以多種屏幕尺寸對其進行測試,以確保在不同屏幕尺寸上正確呈現(xiàn)網(wǎng)站布局。我們可以在Chrome中使用屏幕尺寸和設(shè)備模擬器,非常方便。然而,沒有什么能比真實設(shè)備上的網(wǎng)站測試更好,因為它提供的環(huán)境與我們的用戶一樣接近。

但是,在多個設(shè)備上進行測試也會帶來問題。假設(shè)我們有三個設(shè)備來測試網(wǎng)站,我們可能最終不得不每次我們剛剛做出改變時不斷刷新每個設(shè)備中的每個瀏覽器,正如您可以想象的那樣,這很麻煩。

已經(jīng)出現(xiàn)了同步測試的想法以解決這種情況并使工作流程更加簡化。有一個名為BrowserSync的Grunt插件可以執(zhí)行此操作,我們將在本文中向您展示如何在項目中部署它。

BrowserSync是開源的,并且是積極開發(fā)的。它是跨平臺的。您可以在Windows,OS X和Linux中使用它。另一方面,Ghostlab僅適用于OS X和Windows。BrowserSync是免費的,如果您幾乎沒有預算可以使用,這將有所幫助。

不用多說,讓我們看看BrowserSync的工作原理。

安裝

首先,我們將使用Grunt。我們需要確保grunt-cli和插件Grunt BrowserSync一樣安裝。此插件同步網(wǎng)站上發(fā)生的許多交互,包括頁面滾動,填充表單字段和單擊鏈接。

所有這些操作將在其他瀏覽器和設(shè)備中反映出來。鍵入以下命令以在工作目錄中安裝BrowserSync:

1
2
npm install grunt --save-dev
npm install grunt-browser-sync --save-dev
組態(tài)

安裝完成后,以這種方式在Gruntfile.js中加載BrowserSync?。

1
2
3
4
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports = function (grunt) {
????grunt.initConfig({
????????browserSync: {
????????????bsFiles: {
????????????????src : [ 'index.html', './css/*.css' ]
????????????},
????????????ghostMode: {
????????????????clicks: true,
????????????????forms: true,
????????????????scroll: true
????????????},
????????????options: {
????????????????server: {
????????????????????baseDir: "./"
????????????????}
????????????}
????????}
????});
?
????// load npm tasks
????grunt.loadNpmTasks( 'grunt-browser-sync' );
?
????// define default task
????grunt.registerTask( 'default', ['browserSync'] );
}

此配置將監(jiān)視style.css以及index.html在檢測到這些文件發(fā)生更改時自動刷新瀏覽器。我們還可以ghostMode同步網(wǎng)站上的互動,例如滾動和點擊。

一切都準備好了?,F(xiàn)在,我們運行g(shù)runt以啟動browserSync我們已在配置中設(shè)置的任務(wù)。

1
grunt

與舊版本不同,新的BrowserSync現(xiàn)在將設(shè)置使用的所有內(nèi)容,包括靜態(tài)服務(wù)器,并提供其所在的URL以重新加載我們的站點。

網(wǎng)站建設(shè)

您可以從以下動畫GIF中看到,所有更新,更改和交互都會在瀏覽器中實時同步,因為更改了index.html和style.css。

瀏覽器同步在行動中
  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354