成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端屏幕同步調(diào)試神器browserSync

harryhappy / 1334人閱讀

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

應(yīng)用場(chǎng)景

當(dāng)我們需要在PC、安卓手機(jī)、蘋(píng)果手機(jī)、ipad、一體機(jī)等等多種不同設(shè)備調(diào)試同一個(gè)頁(yè)面時(shí)，每個(gè)滑動(dòng)點(diǎn)擊操作都要在每個(gè)設(shè)備上來(lái)一遍，這樣重復(fù)性的工作我們可以用browser-sync自動(dòng)實(shí)現(xiàn)

準(zhǔn)備工具

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

安裝browser-sync

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

一般安裝為全局工具

注意
在windows安裝可能會(huì)報(bào)以下錯(cuò)誤

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

解決辦法是安裝Visual Studio


然后重新安裝

使用

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

訪問(wèn)

啟動(dòng)后命令行如下

訪問(wèn)3000端口的地址是你的站點(diǎn)，3001是browser-sync的后臺(tái)管理

代理

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

腳本嵌入

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

復(fù)制代碼到頁(yè)面

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

也可以愉快的調(diào)試^_^

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106012.html

相關(guān)文章

  • BrowserSync -- 你值得擁有的多瀏覽器測(cè)試工具

    摘要：是一個(gè)同步多瀏覽器頁(yè)面測(cè)試工具。有了它，你不用在多個(gè)瀏覽器間來(lái)回切換，不斷刷新來(lái)看效果了。更神奇的是你在一個(gè)瀏覽器中滾動(dòng)頁(yè)面點(diǎn)擊按鈕等用戶(hù)行為也會(huì)同步到每個(gè)瀏覽器中。官方的視頻演示。 BrowserSync 是一個(gè)同步多瀏覽器頁(yè)面測(cè)試工具。 BrowserSync makes your tweaking and testing faster by synchronising file ...

    ZweiZhao 評(píng)論0 收藏0

  • Day19 - 攝像、拍照，濾鏡中文指南

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

    chaos_G 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)：實(shí)時(shí)刷新（及時(shí)預(yù)覽）工具小匯總，兼有g(shù)ulp+browser-sync設(shè)置方法

    摘要：打開(kāi)您的命令行工具，進(jìn)入到目錄下，運(yùn)行以下其中一條命令。將創(chuàng)建一個(gè)本地服務(wù)器并自動(dòng)打開(kāi)你的瀏覽器后訪問(wèn)地址，這一切都會(huì)在命令行工具里顯示。 自己寫(xiě)標(biāo)簽： 實(shí)時(shí)刷新、 免F5、 gulp + browser-sync 開(kāi)門(mén)見(jiàn)山，首先講明一下本文的定位吧：寫(xiě)這篇文章是因?yàn)樽约涸谄綍r(shí)的學(xué)習(xí)中，一次次試驗(yàn)了很多的前端實(shí)時(shí)刷新工具，有順手的，有蹩腳的，有簡(jiǎn)單的，有麻煩的，安裝完又折騰，折騰完又卸...

    villainhr 評(píng)論0 收藏0

  • 3月份前端資源分享

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

    nanchen2251 評(píng)論0 收藏0

  • github上的那些神器

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

    Pandaaa 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<