国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

harryhappy / 1292人閱讀

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

應(yīng)用場景

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

準(zhǔ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)常需要調(diào)試已經(jīng)部署在服務(wù)器的網(wǎng)站，這個時候可以用browser-sync的代理功能
browser-sync start --proxy http://news.baidu.com/
--proxy 后面為代理地址

腳本嵌入

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

復(fù)制代碼到頁面

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106012.html

相關(guān)文章

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

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

    ZweiZhao 評論0 收藏0

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

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

    chaos_G 評論0 收藏0

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

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

    villainhr 評論0 收藏0

  • 3月份前端資源分享

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

    nanchen2251 評論0 收藏0

  • github上的那些神器

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

    Pandaaa 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<