Style Editor

样式编辑器使你能够：

• 查看和编辑所有页面相关的样式表
• 从 scratch创建新的样式表并添加到页面中
• 引入已经存在的样式表并把它们添加到页面中

打开样式编辑器可以在 在 "Web Developer" 菜单中 选择“Style Editor” 选项。(“Web Develope”在Mac 系统上是“Tool”菜单的子菜单). Toolbox 就会出现在浏览器窗口的底部, 此时样式编辑器已经被激活:

样式编辑器分为三个主要部分：

• 左侧的样式表窗格
• 编辑器在右边
• 媒体边栏.

样式表窗格

左侧的样式表面板列出了目前页面用到的所有样式. 你可以点击样式名称左侧的眼球图标来快速切换样式是否生效. 你可以点击样式名称右下角的保存(Save)按钮来保存你在本地的电脑上作出的任何改动.

编辑面板

右边的就是编辑面板. 这里你可以阅读和编辑你选中的样式表. 你作出的任何改动都会在页面中立即生效. 这使得试验、修改、验证改动都变的非常容易。.一旦得到了满意的改动, 你可以点击样式面板样式表名称上的保存按钮在本地保存一份副本.

编辑器会标出行数，提供语法高亮，以方便你阅读CSS代码. 同时，编辑器也支持一些键盘快捷键.

The Style Editor automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.

自动补全

自 Firefox 29 以后, 样式编辑器支持自动补全. 保持输入，编辑器会给出建议列表.

你可以在 Style Editor settings(样式编辑器设置) 中关闭自动补全功能.

The media sidebar 媒体查询侧边栏

从Firefox 33 开始，当当前样式包含@media rules媒体查询规则的时候，样式编辑器在右侧会显示一个媒体查询侧边栏。侧边栏列出了所有的媒体查询和一个可以连接到源文件的源码处的链接。点击一个媒体查询会跳到对应的定义样式处。当前没有应用到的媒体查询样式是灰色的。

媒体侧边栏适合与响应式设计视图一起使用，创建和调试响应式布局。

自Firefox 46起，if an @media rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the Responsive Design View:

创建和导入样式表

通过点击工具条上的新建按钮可以新建一个样式文表。然后就可以在编辑器中编辑样式，实时查看新样式的效果，这和编辑其他已经加载进来的样式表一样。

可以通过点击导入按钮从本地磁盘导入一个样式文件应用到当前的网页中。

Source map support

Web developers often create CSS files using a preprocessor like Sass, Less, or Stylus. These tools generate CSS files from a richer and more expressive syntax. If you do this, being able to see and edit the generated CSS is not so useful, because the code you maintain is the preprocessor syntax, not the generated CSS. So you'd need to edit the generated CSS, then manually work out how to reapply that to the original source.

Source maps enable the tools to map back from the generated CSS to the original syntax, so they can display, and allow you to edit, files in the original syntax. From Firefox 29 onwards, the Style Editor can understand CSS source maps.

This means that if you use, for example, Sass, then the Style Editor will show you, and allow you to edit, Sass files, rather than the CSS that is generated from them:

For this to work, you must:

• use a CSS preprocessor that understands the Source Map Revision 3 proposal. Currently this means the 3.3.0 prerelease version of Sass, or the 1.5.0 version of Less. Other preprocessors are actively working on adding support, or considering it.
• actually instruct the preprocessor to generate a source map, for example by passing the --sourcemap argument to the Sass command-line tool
• use Firefox 29 or later

Viewing original sources 查看样式源码

Now, if you check "Show original sources" in the Style Editor settings, the links next to CSS rules in the Rules view will link to the original sources in the Style Editor.

如果在样式编辑器设置中勾上"Show original sources" ，

Editing original sources 编辑源码

可以在样式编辑器编辑样式源码，并且可以立即看到修改样式应用的效果。需要两个步骤达到这样的目的：

首先，set up your preprocessor so it watches the original source and automatically regenerates the CSS when the source changes. With Sass you can do this simply by passing the --watch option:

sass index.scss:index.css --sourcemap --watch

然后，点击文件边上的"Save"以保存并覆盖Style编辑器中的源码。

修改样式源码文件的CSS样式之后，样式会被重新生成，可以立即看到修改后的效果。

Keyboard shortcuts 键盘快捷键

Source editor shortcuts 源码编辑快捷键

此表列出了代码编辑器的默认快捷键。

在开发工具选项的编辑器偏好中，您可以选择使用Vim、Emacs或Sublime Text 的快捷键。

选择这些,访问 about:config ，选择设定 devtools.editor.keymap 的值为"vim" 或 "emacs"或 "sublime"。通过这个设定。通过该方法你可以设定开发者工具中所有的代码编辑器使用的快捷键。并且你需要重新启动编辑器更改才能生效。

从Firefox 33起，更改编辑器快捷键可以通过开发者工具箱选项中的编辑器偏好实现。而不需要通过about:config。