前端屏幕同步調試神器browserSync

harryhappy 發(fā)布于2019-08-26 10:20 / 1362人閱讀

摘要：應用場景當我們需要在安卓手機蘋果手機一體機等等多種不同設備調試同一個頁面時，每個滑動點擊操作都要在每個設備上來一遍，這樣重復性的工作我們可以用自動實現(xiàn)準備工具安裝一般安裝的同時已經(jīng)安裝安裝在命令行輸入一般安裝為全局工具注意在安裝可能

應用場景

當我們需要在PC、安卓手機、蘋果手機、ipad、一體機等等多種不同設備調試同一個頁面時，每個滑動點擊操作都要在每個設備上來一遍，這樣重復性的工作我們可以用browser-sync自動實現(xiàn)

準備工具

1.nodejs
2.安裝npm (一般安裝node的同時已經(jīng)安裝)

安裝browser-sync

在命令行輸入 npm i browser-sync -g

一般安裝為全局工具

注意
在windows安裝可能會報以下錯誤

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modulesrowser-sync
ode_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

解決辦法是安裝Visual Studio

然后重新安裝

使用

browser-sync start --server ./ --files *
--server 是監(jiān)聽的文件目錄
--files 是監(jiān)聽的文件

訪問

啟動后命令行如下

訪問3000端口的地址是你的站點，3001是browser-sync的后臺管理

代理

我們經(jīng)常需要調試已經(jīng)部署在服務器的網(wǎng)站，這個時候可以用browser-sync的代理功能
browser-sync start --proxy http://news.baidu.com/
--proxy 后面為代理地址

腳本嵌入

還可以通過腳本嵌入的方式使用，執(zhí)行
browser-sync start
會看到如下圖:

復制代碼到頁面

".replace("HOST", location.hostname));
//]]>

也可以愉快的調試^_^

以上是經(jīng)常會用到的命令，更多命令請查看官網(wǎng)

云服務器 GPU云服務器前端調試 BrowserSync 神器神器VPS

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/106012.html

BrowserSync -- 你值得擁有的多瀏覽器測試工具

摘要：是一個同步多瀏覽器頁面測試工具。有了它，你不用在多個瀏覽器間來回切換，不斷刷新來看效果了。更神奇的是你在一個瀏覽器中滾動頁面點擊按鈕等用戶行為也會同步到每個瀏覽器中。官方的視頻演示。 BrowserSync 是一個同步多瀏覽器頁面測試工具。 BrowserSync makes your tweaking and testing faster by synchronising file ...

ZweiZhao 2019-05-29 16:20 評論0 收藏0
Day19 - 攝像、拍照，濾鏡中文指南

摘要：攝像拍照，濾鏡中文指南本文出自春哥個人博客作者黎躍春追時間的人簡介是推出的一個天挑戰(zhàn)。完整中文版指南及視頻教程在從零到壹全棧部落。這個新的對象表示指定的對象或對象。 Day19 - 攝像、拍照，濾鏡中文指南本文出自：春哥個人博客作者：?黎躍春-追時間的人簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文...

chaos_G 2019-08-21 11:49 評論0 收藏0
前端開發(fā)：實時刷新（及時預覽）工具小匯總，兼有gulp+browser-sync設置方法

摘要：打開您的命令行工具，進入到目錄下，運行以下其中一條命令。將創(chuàng)建一個本地服務器并自動打開你的瀏覽器后訪問地址，這一切都會在命令行工具里顯示。自己寫標簽：實時刷新、免F5、 gulp + browser-sync 開門見山，首先講明一下本文的定位吧：寫這篇文章是因為自己在平時的學習中，一次次試驗了很多的前端實時刷新工具，有順手的，有蹩腳的，有簡單的，有麻煩的，安裝完又折騰，折騰完又卸...

villainhr 2019-08-21 10:47 評論0 收藏0
3月份前端資源分享

摘要：面試如何防騙一份優(yōu)秀的前端開發(fā)工程師簡歷是怎么樣的作為，有哪些一般人我都告訴他，但是他都不聽的忠告如何面試前端工程師更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...

nanchen2251 2019-08-21 15:21 評論0 收藏0
github上的那些神器

摘要：在任意目錄開啟靜態(tài)文件服務器優(yōu)雅的看源碼命令行從未如此迷人天下武功，唯快不破誰說不能用命令像用一樣用瀏覽器將內(nèi)網(wǎng)地址轉化成公網(wǎng)地址省時省力的瀏覽器同步測試工具地址集負載均衡熱更新監(jiān)控等功能于一身的應用程序的生產(chǎn)流程管理器地址 1 serve: 在任意目錄開啟靜態(tài)文件服務器 https://github.com/zeit/serve showImg(https://segmentfaul...

Pandaaa 2019-08-20 17:16 評論0 收藏0