热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在FirebugforFirefox中编辑Chrome中的CSS?-HowdoIeditCSSinChromelikeinFirebugforFirefox?

IvebeeneditingCSSusingFirebuginFirefox,butrecentlynoticedthatChromeisrenderingmypag

I've been editing CSS using Firebug in Firefox, but recently noticed that Chrome is rendering my pages much quicker (with scrolling, interactive elements etc) and wanted to switch to it.

我一直在Firefox中使用Firebug编辑CSS,但最近注意到Chrome正在更快地渲染我的页面(使用滚动,交互元素等)并且想要切换到它。

I found Chrome shows the computed CSS and what attributes are overruled in the stack and I can alter them one-by-one but what I liked about Firebug was that I could just edit the entire stylesheet in a real-time text editor. Is this same feature somewhere in the Chrome developer panel, or is there a Chrome extension that lets me alter the stylesheets this way?

我发现Chrome显示了计算出的CSS以及在堆栈中推翻了哪些属性,我可以逐个改变它们,但我喜欢Firebug的是我可以在实时文本编辑器中编辑整个样式表。这是Chrome浏览器面板中的某个功能,还是Chrome扩展程序可以让我以这种方式更改样式表?

10 个解决方案

#1


9  

Try StyleBot. It can also save edited CSS.

试试StyleBot。它还可以保存已编辑的CSS。

#2


10  

In current versions of Chrome (I'm running 16) you don't need any external add-ons. Right click anywhere in your page, choose inspect element, then in the window that shows up click the Resources tab, then in the left panel select the stylesheet you want to edit. To begin editing you need to first double click, over the css text.

在当前版本的Chrome(我正在运行16)中,您不需要任何外部附加组件。右键单击页面中的任意位置,选择inspect元素,然后在显示的窗口中单击Resources选项卡,然后在左侧面板中选择要编辑的样式表。要开始编辑,您需要首先双击css文本。

#3


2  

You can edit any property or create a new property by double click on an entry or empty space in Elements panel's styles pane. There is no way to edit entire css file just as text at the moment.

您可以通过双击“元素”面板的样式窗格中的条目或空白区域来编辑任何属性或创建新属性。此刻无法像文本一样编辑整个css文件。

#4


2  

I use live.js! As you edit your css file it shows you the results realtime in your browser without having to refresh. http://livejs.com/

我用live.js!在编辑css文件时,它会在浏览器中实时显示结果,而无需刷新。 http://livejs.com/

I've spend countless hours testing almost every Chome extension i could find (including stylebot) to mimic the live CSS editing of Firebug in Firefox. None to date have that same workflow. Live.js is the closest.

我花了无数个小时来测试我能找到的几乎每个Chome扩展(包括stylebot)来模仿Firefox中Firebug的实时CSS编辑。迄今为止没有相同的工作流程。 Live.js是最接近的。

#5


1  

Have you tried the Web Developer Toolbar extension's CSS->Edit CSS tool?

您是否尝试过Web Developer Toolbar扩展的CSS-> Edit CSS工具?

#6


1  

https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm

https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm

Web Developer Toolbar for Chrome > CSS > Edit CSS

适用于Chrome的Web开发人员工具栏> CSS>编辑CSS

#7


0  

there's a semi-working firebug extension but it's not exactly perfect yet.

有一个半工作的firebug延伸,但它还不完美。

#8


0  

User Firebug Lite. It's also available as an extension to Chrome.

用户Firebug Lite。它也可以作为Chrome的扩展。

#9


0  

You are looking for this - Live Stylesheets

您正在寻找这个 - Live Stylesheets

#10


0  

I wrote the LiveCSSEditor 4 years ago for exactly this reason. FireBug in Firefox would let me free-hand write CSS into the page, but nothing else in Chrome would.

正是出于这个原因,我4年前写了LiveCSSEditor。 Firefox中的FireBug让我可以随心所欲地将CSS写入页面,但Chrome中没有任何其他功能。

I still use it today and have yet to find a better solution. It may work for you as well. :)

我今天仍然使用它,还没有找到更好的解决方案。它也可能对你有用。 :)


推荐阅读
  • HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ... [详细]
  • Cookie学习小结
    Cookie学习小结 ... [详细]
  • 开发工具WebDeveloper1.1.8https:addons.mozilla.orgen-USfirefoxaddon60以工具栏的形式对网页的(X)HTML、脚本、多媒体、 ... [详细]
  • 本文介绍了 Go 语言中的高性能、可扩展、轻量级 Web 框架 Echo。Echo 框架简单易用,仅需几行代码即可启动一个高性能 HTTP 服务。 ... [详细]
  • Spring Data JdbcTemplate 入门指南
    本文将介绍如何使用 Spring JdbcTemplate 进行数据库操作,包括查询和插入数据。我们将通过一个学生表的示例来演示具体步骤。 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • CSS中的pointer-events属性详解与应用
    在CSS中,`pointer-events`属性是一个非常实用但常被忽视的功能。它主要用于控制元素是否响应鼠标事件。当一个元素覆盖在其他元素之上时,通过设置`pointer-events`属性,可以决定该元素是否能够接收鼠标点击、悬停等交互操作,从而实现更灵活的用户界面设计。例如,将`pointer-events`设置为`none`可以使元素透明地传递鼠标事件,方便实现复杂的叠加效果和交互逻辑。 ... [详细]
  • 将Flash Cookies 应用于电子取证
    由于隐私问题,Flashcookie进来成为一个热点安全话题。不过从另一个角度讲,Flashcookie(即本地共享对象)却 ... [详细]
  • 本文详细探讨了使用Python3编写爬虫时如何应对网站的反爬虫机制,通过实例讲解了如何模拟浏览器访问,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 自然语言处理(NLP)——LDA模型:对电商购物评论进行情感分析
    目录一、2020数学建模美赛C题简介需求评价内容提供数据二、解题思路三、LDA简介四、代码实现1.数据预处理1.1剔除无用信息1.1.1剔除掉不需要的列1.1.2找出无效评论并剔除 ... [详细]
  • 本文详细介绍了 HTML 中 a 标签的 href 属性的多种用法,包括实现超链接、锚点以及调用 JavaScript 方法。通过具体的示例和解释,帮助开发者更好地理解和应用这些技术。 ... [详细]
  • 为了优化用户体验,本文探讨了如何调整下拉菜单的宽度。通过合理设置宽度,可以提升界面的美观性和易用性。文章提供了具体的代码示例,帮助开发者实现这一目标。例如,可以通过 CSS 或 JavaScript 来动态调整下拉菜单的宽度,确保其在不同设备和屏幕尺寸上都能保持良好的显示效果。 ... [详细]
  • 如何高效利用Hackbar插件提升网页调试效率
    通过合理利用Hackbar插件,可以显著提升网页调试的效率。本文介绍了如何获取并使用未包含收费功能的2.1.3版本,以确保在不升级到最新2.2.2版本的情况下,依然能够高效进行网页调试。此外,文章还提供了详细的使用技巧和常见问题解决方案,帮助开发者更好地掌握这一工具。 ... [详细]
  • 为了实现跨浏览器兼容的禁用文本选择功能,可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类,并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外,还可以结合JavaScript进一步增强用户体验,例如在某些交互场景下动态启用或禁用文本选择功能。 ... [详细]
  • 整合百度UEditor编辑器于ASP后端的实现步骤与技巧
    随着微软停止对XP系统的支持,公司已全面升级至Windows 7。早期网站创建时使用的编辑器仅兼容IE6浏览器,而如今系统更新后,原有的编辑器已无法满足新环境的需求。本文详细介绍了如何将百度UEditor编辑器整合到ASP后端,包括实现步骤和实用技巧,确保网站在新系统下仍能高效运行并提供良好的用户体验。 ... [详细]
author-avatar
一季花落的秋天_981
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有