如何用Chrome/Firefox开发者工具修改并保存服务器上的Style.css

Chrome和Firefox的开发者工具本身没法直接把修改同步到远程服务器，得靠本地文件映射+自动同步工具，或者搭建本地WordPress环境来实现。以下是具体步骤：

Chrome 操作流程 #

1. 配置本地文件映射（Workspace功能） #

• 按F12打开开发者工具，切换到Sources面板
• 右键左侧Filesystem面板，选Add folder to workspace，选中你本地已下载好的divi_child主题文件夹（需包含style.css）
• 允许浏览器访问该文件夹
• 在Sources的Page标签里找到远程加载的style.css（URL路径为/wp-content/themes/divi_child/style.css），右键点击它选择Map to file system resource，再选中本地对应的style.css文件
• 现在在开发者工具里修改样式，改动会直接保存到本地文件

2. 自动同步到远程服务器 #

开发者工具仅负责将修改保存到本地，要同步到服务器需借助其他工具：

• 使用支持自动上传的FTP工具（比如FileZilla开启「编辑后自动上传」，或WinSCP的同步功能），设置当本地style.css文件变化时，自动上传到远程路径/home/thewebsite/public_html/wp-content/themes/divi_child/style.css
• 或者用Git这类版本控制工具，配合服务器端钩子，提交本地修改后自动部署到服务器

Firefox 操作流程 #

1. 关联本地文件（Style Editor功能） #

• 按F12打开开发者工具，切换到Style Editor面板
• 找到远程的style.css，点击面板右侧保存按钮旁的箭头，选择Save As，将文件保存到本地的divi_child主题文件夹中
• 再次点击该箭头，选择Edit File，选中刚才保存的本地style.css文件
• 现在在Style Editor里修改样式，改动会直接保存到本地文件

2. 自动同步到远程服务器 #

和Chrome的逻辑一致，需要借助FTP自动上传工具或版本控制钩子，将本地修改后的style.css同步到服务器对应路径。

关键提醒 #

• 不需要在开发者工具中配置服务器的绝对路径（比如/home/thewebsite/...），只需把网页加载的远程style.css（URL路径为/wp-content/themes/divi_child/style.css）映射到本地文件即可
• 如果不想折腾FTP同步，也可以搭建本地WordPress环境，把远程网站的内容和主题同步到本地，修改完成后再整体部署到服务器，这样更稳定，还能避免直接修改远程文件的风险

内容的提问来源于stack exchange，提问作者John Langlois