浏览器扩展使用我的 CSS 文件的更新版本重新渲染页面,而无需重新加载页面本身

发布于 2024-10-12 13:04:00 字数 282 浏览 6 评论 0原文

我想学习Web UI设计。 (我知道,我知道。作为一名程序员让我处于劣势。但我还是想尝试一下。)因此,我想“调试”我的 CSS 文件。

我发现的最大的烦恼之一是,如果不重新加载整个页面,我就无法测试 CSS 文件中的更改。有时,页面太大。有时,经过多次点击后,页面上会出现很多元素,因为我的页面过于依赖 AJAX。有时,我只是讨厌一直按 Command+R。

是否有适用于任何主要浏览器(最好是 Safari 和/或 Chrome)的扩展程序,可以使用 CSS 文件的更新版本重新呈现页面,而无需重新加载整个页面本身?

I want to learn Web UI design. (I know, I know. Being a programmer puts me at a disadvantage. But I want to try anyway.) Thus, I would like to "debug" my CSS files.

Once of the biggest annoyances I have found is that I cannot test a change in my CSS files without reloading the whole page. Sometimes, the page is too big. Sometimes, a lot of elements were brought to the page after lots of clicks, because my pages rely too heavily on AJAX. Sometimes, I just hate hitting Command+R all the time.

Is there any extension for any of the major browsers (preferably Safari and/or Chrome) that re-renders the page using an updated version of the CSS file, without reloading the whole page itself?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

葮薆情 2024-10-19 13:04:00

尝试 Chrome 中的开发人员工具,使用它们您可以实时编辑 css 定义。尽管我不知道允许您仅重新加载样式表的扩展,但当您只想测试一些更改时,这可能对您有用。
Firefox 的 Firebug 也允许同样的事情。

Try the developer tools in chrome, using them you can live edit your css definitions. Although I don't know an extension that allows you to reload only a stylesheet, this might work for you when you want to test only a few changes.
Firebug for Firefox allows the same thing.

半世晨晓 2024-10-19 13:04:00

Firefox“Web Developer”插件允许您从其菜单中“添加用户样式表...”。它还具有“编辑 CSS”功能,可让您实时编辑 css 文件的内容(例如 file1.css 和 file2.css 将有两个编辑器选项卡 - 每个文件一个)并允许您保存编辑后的文件。

正如 Paul 建议的那样,我自己更倾向于使用 Firebug,并且您可以将更改后的 css 文件内容复制并粘贴回实际的 css 文件中。

The Firefox "Web Developer" plugin allows you to "Add User Style Sheet..." from its menu. It also has an "Edit CSS" feature that lets you live-edit the contents of the css files (for example file1.css and file2.css would have two editor tabs - one for each file) and lets you save the edited file.

I tend to use Firebug more often myself, as Paul suggests, and you can copy+paste the changed css file content from it back into your actual css file.

身边 2024-10-19 13:04:00

适用于 Chrome 的 Stylebot 扩展程序也很棒。

您可以快速编辑和查看更改。实际上可以将其保存到个人查看的网站中,您可以将其保存在列表中,并根据您为网站的默认样式表修改的内容编辑显示。

Stylebot 允许您快速操纵任何网站的外观(使用自定义 CSS)。使用 Stylebot,您可以个性化您喜爱的网站的外观和风格。它也是学习 CSS 和调试您自己的网站设计的绝佳工具。

Stylebot extension for Chrome is great too.

You can quickly edit and view your changes. And can actually save this to personally view sites that you can save in a list with edited display from what you modify for the website's default stylesheet.

Stylebot allows you to quickly manipulate the appearance of any website (using custom CSS). Using Stylebot, you can personalize the look and feel of your favorite websites. It is also a great tool to learn CSS and for debugging your own site's design.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文