如何使用browsersync 2.0改善工作流程

> browsersync 2.0：革新您的網絡開發工作流

>

> browsersync 2.0是用於Web開發人員的遊戲規則改變者，可以通過實時重新加載，同步交互，遠程調試以及與流行的構建工具的無縫集成來簡化工作流程。 這種功能強大的工具可有助於實時，多設備測試，每當進行代碼更改時，都會立即更新所有連接的瀏覽器。

>

安裝和設置：

入門很簡單。 從

> https://www.php.cn/link/8621cddddd1200200243686862912970737Eda安裝node.js之後 （Mac和Linux用戶可能需要

。）用以下方式驗證安裝

npm install browser-sync -g

sudo入門：

browser-sync --version

>假設您有一個包含HTML和CSS文件的項目文件夾（“ test”）（在“ CSS”子文件夾中）。 從您的命令行：

>導航到您的項目目錄：

啟動browsersync：
1. cd test
2. 這將啟動服務器，監視“ CSS”文件夾中的所有browser-sync start --server --files "*.html, css/*.css">>>>文件。您的控制台將顯示用於本地和外部訪問的URL以及UI控制面板。 在網絡上的任何瀏覽器中打開“外部” URL以查看您的網站。 對HTML或CSS的更改將觸發自動刷新。 UI面板（可通過“ UI外部” URL訪問）為設置，同步選項，URL歷史記錄，遠程調試等提供控件。 詳細說明和選項可從
> https://www.php.cn/link/926E263363C82458A9AE488888883B7DC655

。

.html .css > 關鍵特徵和好處：

>

• >實時重新加載：在代碼修改後所有連接的瀏覽器上的即時頁面更新。 CSS已智能地重新註射，避免了整頁重新加載。
>
• 互動同步：鏡像滾動，單擊並在所有設備上形成輸入。這對於移動測試是無價的。
>
• 遠程檢查器（Weinre）：使用類似Chrome Inspector的接口。
• 模擬慢速連接：
測試網站在較慢的網絡上的性能。
• URL歷史記錄跟踪：
很容易共享並導航到所有設備上的先前查看的URL。
• 新的基於Web的UI：
用於管理瀏覽器設置和功能的直觀控制面板。
• 構建工具的兼容性：
與Gulp，Grunt和其他任務跑步者無縫地工作。

>常見問題：

• >如何通過在多個設備上提供實時反饋來大大改善我的工作流程？ 諸如同步互動和URL歷史記錄之類的功能進一步提高了效率。

• >

  鍵功能？ 實時重新加載，同步滾動/點擊/表單，遠程調試，模擬慢連接，URL歷史記錄和用戶友好的UI。 >

• 安裝？ >安裝node.js，然後使用。 npm install browser-sync -g

• 啟動服務器？

  >（根據需要調整文件路徑）。 browser-sync start --server --files "*.html, css/*.css"

  與預處理器（Sass/Limes），任務跑步者（Gulp/Grunt）和靜態站點生成器（Jekyll/Hugo）？

• >形式輸入處理？ 表格輸入在所有連接的設備上都鏡像。

  >

• URL歷史管理？ 瀏覽器軌道，允許在設備上輕鬆訪問您的瀏覽歷史記錄。

• > browsersync 2.0是一個免費的開源工具，可用於Windows，MacOS和Linux。 試試看 - 您不會後悔！

以上是如何使用browsersync 2.0改善工作流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！