热门标签 | 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. :)

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


推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了Android 7的学习笔记总结,包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容,并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同,否则会出现问题。 ... [详细]
  • 高仿CSDN社区树形图 .
    一直感觉CSDN社区的树形结构特别的人性化,直观化。最近做系统的时候需要用到这个树形结构,于是模仿CSDN的树形结构做了一个自己的树形结构, ... [详细]
  • 动态json文件php(json拼接动态数据)
    本文目录一览:1、如何php将一个动态的数组转换为json的格式 ... [详细]
  • 启动浏览器、设置profile&加载插件
    一、Driver下载地址:http:docs.seleniumhq.orgdownload二、启动firefox浏览器(不需要下载驱动,原生支持)1、firefox安装在默认路径下 ... [详细]
  • IamtryingtouseLESSCSStowritemyCSS.Ihaveimportedthestyle.lessandless.jsfileinthat ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • SeleniumWebDriver3.0自动化测试框架实战指南 ... [详细]
  • 采集程序【开源项目】
    更新:通过一些朋友的回复,了解到,可能文章太长了,有朋友只是简略浏览,所以还没有明白程序工作流程。简单介绍&# ... [详细]
  • 八、调试JSON在过去的几年里,JSON有了突飞猛进的发展,因此有大量的免费资源来理解我们正 ... [详细]
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社区 版权所有