干掉F5，無需配置輕松實(shí)現(xiàn)瀏覽器頁面自動刷新

lily_wang 發(fā)布于2019-08-20 15:26 / 1852人閱讀

摘要：摘要在寫頁面的時候大家肯定都干過這種事情先在編輯器里改一個屬性，保存再切回瀏覽器刷新頁面看效果。本文介紹了一種讓檢測文件變化讓瀏覽器自動刷新的辦法，無需配置，操作簡單。

摘要

在寫web頁面的時候大家肯定都干過這種事情：先在編輯器里改一個CSS屬性，保存再切回瀏覽器刷新頁面看效果。尤其是對于追求像素完美的同學(xué)，簡直石樂志，大了小了1px都要來回改。

本文介紹了一種讓檢測文件變化讓瀏覽器自動刷新的辦法，無需配置，操作簡單。特別是對于屏幕大甚至有雙屏三屏四五屏的同學(xué)，不要太爽哦！

準(zhǔn)備工作

這種方法需要使用chrome瀏覽器，以及兩個npm的包。關(guān)于npm不再多說，有大把文章教你怎么安裝，還有更換成淘寶的鏡像使用cnpm加快下載速度。

先用npm安裝兩個包 npm install -g anywhere livereload

chrome瀏覽器安裝livereload的插件（點(diǎn)我安裝）

搞起

在終端里進(jìn)入到項(xiàng)目的文件夾，運(yùn)行anywhere，一切順利的話應(yīng)該自動跑起了一個web server，并且自動在瀏覽器里打開了index.html。如果默認(rèn)端口被占用還可以加-p命令運(yùn)行到指定端口，例如anywhere -p3000

再開一個終端進(jìn)入到項(xiàng)目的文件夾，運(yùn)行livereload

在chrome瀏覽器中激活livereload!

完工

云服務(wù)器 GPU云服務(wù)器 F5刷新頁面自動刷新頁面js ajax實(shí)現(xiàn)頁面刷新 js瀏覽器的刷新頁面

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

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

相關(guān)文章

干掉F5，無需配置輕松實(shí)現(xiàn)瀏覽器頁面自動刷新

摘要：摘要在寫頁面的時候大家肯定都干過這種事情先在編輯器里改一個屬性，保存再切回瀏覽器刷新頁面看效果。本文介紹了一種讓檢測文件變化讓瀏覽器自動刷新的辦法，無需配置，操作簡單。摘要在寫web頁面的時候大家肯定都干過這種事情：先在編輯器里改一個CSS屬性，保存再切回瀏覽器刷新頁面看效果。尤其是對于追求像素完美的同學(xué)，簡直石樂志，大了小了1px都要來回改。本文介紹了一種讓檢測文件變化讓瀏覽器...

yangrd 2019-08-29 12:18 評論0 收藏0
干掉F5，無需配置輕松實(shí)現(xiàn)瀏覽器頁面自動刷新

摘要：摘要在寫頁面的時候大家肯定都干過這種事情先在編輯器里改一個屬性，保存再切回瀏覽器刷新頁面看效果。本文介紹了一種讓檢測文件變化讓瀏覽器自動刷新的辦法，無需配置，操作簡單。摘要在寫web頁面的時候大家肯定都干過這種事情：先在編輯器里改一個CSS屬性，保存再切回瀏覽器刷新頁面看效果。尤其是對于追求像素完美的同學(xué)，簡直石樂志，大了小了1px都要來回改。本文介紹了一種讓檢測文件變化讓瀏覽器...

ideaa 2019-08-01 16:35 評論0 收藏0
淺談瀏覽器緩存

摘要：最近在項(xiàng)目中遇到了瀏覽器因緩存問題未能成功向后端發(fā)送類型請求的，然后順藤摸瓜順便看了看緩存的知識，覺得有必要總結(jié)一下。是服務(wù)器響應(yīng)消息頭字段，在響應(yīng)請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無需再次請求。最近在項(xiàng)目中遇到了IE瀏覽器因緩存問題未能成功向后端發(fā)送GET類型請求的bug，然后順藤摸瓜順便看了看緩存的知識，覺得有必要總結(jié)一下。在前端開發(fā)中，性能一直都...

godruoyi 2019-08-06 13:28 評論0 收藏0
淺談瀏覽器緩存

摘要：最近在項(xiàng)目中遇到了瀏覽器因緩存問題未能成功向后端發(fā)送類型請求的，然后順藤摸瓜順便看了看緩存的知識，覺得有必要總結(jié)一下。是服務(wù)器響應(yīng)消息頭字段，在響應(yīng)請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無需再次請求。最近在項(xiàng)目中遇到了IE瀏覽器因緩存問題未能成功向后端發(fā)送GET類型請求的bug，然后順藤摸瓜順便看了看緩存的知識，覺得有必要總結(jié)一下。在前端開發(fā)中，性能一直都...

shiina 2019-08-21 18:23 評論0 收藏0
Express結(jié)合Webpack的全棧自動刷新

摘要：如果修改的是里的文件，保存后，服務(wù)器將自動重啟，瀏覽器會在服務(wù)器重啟完畢后自動刷新。從開始首先，已經(jīng)想到了開發(fā)流程中的自動刷新，這就是。在以前的一篇文章BrowserSync，迅捷從免F5開始中，我介紹了BrowserSync這樣一個出色的開發(fā)工具。通過BrowserSync我感受到了這樣一個理念：如果在一次ctrl + s保存后可以自動刷新，然后立即看到新的頁面效果，那會是很棒的開...

Simon 2019-08-21 13:30 評論0 收藏0