如何从浏览器中永久更改网站的CSS？ [英] How to make permanent changes to a website's CSS from within the browser?

问题描述

如果我正在使用内置的 开发人员工具在大型项目中编辑 CSS Firefox（通过右键点击，然后选择 Inspect Element ）访问，是否有办法使这些更改永久？



其实有大量的样式表和我无法找到它们中的这一个属性？我只是找不到包含此属性的文件，所以我想从浏览器中对CSS进行永久更改。有没有办法？



---

编辑： -
不得不添加你的项目文件到一个工作区，进入开发工具Ctrl + Shift +然后点击设置齿轮，在左边你应该看到工作区。

在将Project文件夹添加到工作区后关闭选项，然后单击Sources选项卡（仍然位于开发工具中）。

现在加载您的索引。像你通常会从你的LocalHost的HTML。在源面板中，您应该看到当前加载的页面及其资源。右键单击.css文件，然后单击映射到文件系统资源，将弹出一个搜索框，您可以从实际项目文件夹（现在是Chrome中的工作区的一部分）搜索相应的.css文件。一旦你建立链接，Chrome就足够聪明，可以链接到你的项目文件夹中的任何其他CSS和HTML文件。

现在你可以在Chrome开发工具，他们的变化将持续下去。另外在ELements选项卡中，它会告诉你什么CSS文件和任何给定的风格是源于哪一行！

最好的事情是，如果你使用Sass或更少，然后它会将您的Scss文件映射回Chrome中正在处理的CSS样式。 （请注意，如果使用Sass并且减少了必须打开CSS源代码映射）

If I am trying to edit some CSS in a huge project using the built-in developer tools in Firefox (which is accessed by right click and then selecting Inspect Element), is there a way to make those changes permanent?

Actually there is a big number of style sheets and and I could not locate this one property in them? I just could not find the file which contains this property, so I want to make permanent changes to the CSS from within the browser. Is there a way?

---

EDIT:-

解决方案

To set up in Chrome first you have to add your project file to a "Workspace", Go into dev tools Ctrl+Shift+I then click on the settings gear and on the left yoou should see Workspace.

After you have added your Project folder into a workspace close out of options and click on the "Sources" tab (still in dev tools)

Now load up your index.html from your LocalHost like you normally would. In the sources panel you should see the currently loaded page and its resources. Right click on your .css file and click "Map To File System Resource" it will bring up a search box where you can search for the corresponding .css file from your actual project folder (that is now part of a workspace in Chrome). Once you make the link Chrome is smart enough to link up any other CSS and HTML files that are in your Project Folder.

Now you can make changes in the Elements tab in Chrome Dev Tools and they changes will persist. Also in the ELements tab it will show you what css file and what line any given Style is originating from!

The best thing about this is if you use Sass or Less then it will map your Scss files back to the CSS styles being processed in Chrome. (please note if using Sass and Less you have to have CSS source maps turned on)

这篇关于如何从浏览器中永久更改网站的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！