使用 WebStorm for Firefox 进行实时编辑

Live Edit using WebStorm for Firefox

本文关键字：实时 编辑 Firefox WebStorm for 使用      更新时间：2023-09-26

WebStorm 有没有一个插件可以方便 Firefox 的实时编辑？

Chrome的等价物是：https://plugins.jetbrains.com/plugin/7007。

不可以，实时编辑仅适用于 Chrome。请关注 WEB-1805 获取更新

我找到了使用名为livereload的JS包的解决方法。它在保存WebStorm项目时自动刷新Firefox（或任何浏览器）。

运行它的最简单的方法是：

  1. 将此样板临时添加到您的网站（您不希望将其用于生产）
<script>
  document.write('<script src="http://' + 
    (location.host || 'localhost').split(':')[0] +
    ':35729/livereload.js?snipver=1"></' + 'script>')
</script>
  1. 从您的 WebStorm 控制台：
$ npm install -g livereload
$ livereload [path of files to watch]

您也可以使用浏览器同步。

它只需要两个简单的步骤：

    安装 npm
  1. 包：npm install -g 浏览器同步
  2. 启动浏览器同步

一个基本的用途是监视 css 目录中的所有 CSS 文件并更新 连接的浏览器（如果发生更改）。导航终端窗口 到项目并运行相应的命令：

静态站点

如果仅使用.html文件，则需要使用服务器模式。浏览器同步将启动一个微型服务器并提供一个 URL 来查看您的网站。

browser-sync start --server --files "css/*.css"

动态网站

如果您已经在运行具有 PHP 或类似功能的本地服务器，则需要使用代理模式。浏览器同步将使用代理 URL 包装您的虚拟主机以查看您的网站。

browser-sync start --proxy "myproject.dev" --files "css/*.css"

您可以将其他文件类型添加为逗号分隔的列表

--files "*.html, css/*.css"
相关文章：