如何使用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中文网其他相关文章！