1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
---
title: Style Editor
slug: Tools/Style_Editor
translation_of: Tools/Style_Editor
---
<div>{{ToolsSidebar}}</div><p>样式编辑器使你能够：</p>
<ul>
<li>查看和编辑所有页面相关的样式表</li>
<li>从 scratch创建新的样式表并添加到页面中</li>
<li>引入已经存在的样式表并把它们添加到页面中</li>
</ul>
<p>{{EmbedYouTube("7839qc55r7o")}}</p>
<p>打开样式编辑器可以在 在 "Web Developer" 菜单中 选择“Style Editor” 选项。(“Web Develope”在Mac 系统上是“Tool”菜单的子菜单). <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> 就会出现在浏览器窗口的底部, 此时样式编辑器已经被激活:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>样式编辑器分为三个主要部分：</p>
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Style_Editor#The_style_sheet_pane">左侧的样式表窗格</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Style_Editor#The_editor_pane">编辑器在右边</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Style_Editor#The_media_sidebar">媒体边栏.</a></li>
</ul>
<h2 id="样式表窗格">样式表窗格</h2>
<p>左侧的样式表面板列出了目前页面用到的所有样式. 你可以点击样式名称左侧的眼球图标来快速切换样式是否生效. 你可以点击样式名称右下角的保存(Save)按钮来保存你在本地的电脑上作出的任何改动.</p>
<h2 id="编辑面板">编辑面板</h2>
<p>右边的就是编辑面板. 这里你可以阅读和编辑你选中的样式表. 你作出的任何改动都会在页面中立即生效. 这使得试验、修改、验证改动都变的非常容易。.一旦得到了满意的改动, 你可以点击样式面板样式表名称上的保存按钮在本地保存一份副本.</p>
<p>编辑器会标出行数，提供语法高亮，以方便你阅读CSS代码. 同时，编辑器也支持一些<a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts">键盘快捷键</a>.</p>
<p>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.</p>
<h3 id="自动补全">自动补全</h3>
<div class="geckoVersionNote">
<p>自动补全是 Firefox 29 的全新功能.</p>
</div>
<p>自 Firefox 29 以后, 样式编辑器支持自动补全. 保持输入，编辑器会给出建议列表.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">你可以在 <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings(样式编辑器设置)</a> 中关闭自动补全功能.</p>
<h2 id="The_media_sidebar_媒体查询侧边栏">The media sidebar 媒体查询侧边栏</h2>
<p>从Firefox 33 开始，当当前样式包含<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> rules</a>媒体查询规则的时候，样式编辑器在右侧会显示一个媒体查询侧边栏。侧边栏列出了所有的媒体查询和一个可以连接到源文件的源码处的链接。点击一个媒体查询会跳到对应的定义样式处。当前没有应用到的媒体查询样式是灰色的。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">媒体侧边栏适合与响应式设计视图一起使用，创建和调试响应式布局。</p>
<p>{{EmbedYouTube("aVUXmvLSwoM")}}</p>
<p>自Firefox 46起，if an <code>@media</code> 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:</p>
<p>{{EmbedYouTube("XeocxoW2NYY")}}</p>
<h2 id="创建和导入样式表">创建和导入样式表</h2>
<p>通过点击工具条上的新建按钮可以新建一个样式文表。然后就可以在编辑器中编辑样式，实时查看新样式的效果，这和编辑其他已经加载进来的样式表一样。</p>
<p>可以通过点击导入按钮从本地磁盘导入一个样式文件应用到当前的网页中。</p>
<h2 id="Source_map_support">Source map support</h2>
<div class="geckoVersionNote">
<p>CSS source map support is a new feature in Firefox 29.</p>
</div>
<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p>
<p>Web developers often create CSS files using a preprocessor like <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, or <a href="http://learnboost.github.io/stylus/">Stylus</a>. 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.</p>
<p>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.</p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;">For this to work, you must:</p>
<ul>
<li>use a CSS preprocessor that understands the <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a>. Currently this means the <a href="http://davidwalsh.name/future-sass">3.3.0 prerelease version of Sass</a>, or the <a href="http://roots.io/using-less-source-maps/">1.5.0 version of Less</a>. Other preprocessors are actively working on adding support, or considering it.</li>
<li>actually instruct the preprocessor to generate a source map, for example by passing the <code>--sourcemap</code> argument to the Sass command-line tool</li>
<li>use Firefox 29 or later</li>
</ul>
<h3 id="Viewing_original_sources_查看样式源码">Viewing original sources 查看样式源码</h3>
<p>Now, if you check "Show original sources" in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, the links next to CSS rules in the <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a> will link to the original sources in the Style Editor.</p>
<p>如果在样式编辑器设置中勾上"Show original sources" ，</p>
<h3 id="Editing_original_sources_编辑源码">Editing original sources 编辑源码</h3>
<p>可以在样式编辑器编辑样式源码，并且可以立即看到修改样式应用的效果。需要两个步骤达到这样的目的：</p>
<p>首先，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 <code>--watch</code> option:</p>
<pre>sass index.scss:index.css --sourcemap --watch</pre>
<p>然后，点击文件边上的"Save"以保存并覆盖Style编辑器中的源码。</p>
<p>修改样式源码文件的CSS样式之后，样式会被重新生成，可以立即看到修改后的效果。</p>
<h2 id="Keyboard_shortcuts_键盘快捷键">Keyboard shortcuts 键盘快捷键</h2>
<h3 id="Source_editor_shortcuts_源码编辑快捷键">Source editor shortcuts 源码编辑快捷键</h3>
<p>{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
<p>{{ languages( { "zh": "zh-CN/Tools/Style_Editor"} ) }}</p>
<h2 id="Subnav">Subnav </h2>
<ol>
<li><a href="#">Creating</a>
<ol>
<li><a href="/zh-CN/docs/Tools/Scratchpad">Scratchpad</a></li>
<li><a href="/zh-CN/docs/Tools/Style_Editor">Style Editor</a></li>
<li><a href="/zh-CN/docs/Tools/Shader_Editor">Shader Editor</a></li>
<li><a href="/zh-CN/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></li>
</ol>
</li>
<li><a href="#">Debugging</a>
<ol>
<li><a href="/zh-CN/docs/Tools/Tools_Toolbox">工具箱</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector">页面查看器</a></li>
<li><a href="/zh-CN/docs/Tools/Web_Console">Web 控制台</a></li>
<li><a href="/zh-CN/docs/Tools/Debugger">调试器</a></li>
<li><a href="/zh-CN/docs/Tools/Network_Monitor">Network Monitor</a></li>
<li><a href="/zh-CN/docs/Tools/Storage_Inspector">Storage Inspector</a></li>
<li><a href="/zh-CN/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></li>
<li><a href="/zh-CN/docs/Tools/GCLI">Developer Toolbar</a></li>
<li><a href="/zh-CN/docs/Tools/3D_View">3D View</a></li>
<li><a href="/zh-CN/docs/Tools/Eyedropper">Eyedropper</a></li>
<li><a href="/zh-CN/docs/Tools/about:debugging">about:debugging</a></li>
<li><a href="/zh-CN/docs/tools/Working_with_iframes">Selecting iframes</a></li>
<li><a href="/zh-CN/docs/Tools/View_source">View Source</a></li>
</ol>
</li>
<li><a href="#">Mobile</a>
<ol>
<li><a href="/zh-CN/docs/Tools/Responsive_Design_View">响应式设计视图</a></li>
<li><a href="/zh-CN/docs/Tools/WebIDE">WebIDE</a></li>
<li><a href="/zh-CN/docs/Tools/Remote_Debugging/Firefox_for_Android">Firefox for Android</a></li>
</ol>
</li>
<li><a href="#">性能</a>
<ol>
<li><a href="/zh-CN/docs/Tools/Performance">性能工具</a></li>
<li><a href="/zh-CN/docs/Tools/Memory">Memory</a></li>
<li><a href="/zh-CN/docs/Tools/Performance/Frame_rate">Frame rate graph</a></li>
<li><a href="/zh-CN/docs/Tools/Performance/Waterfall">Waterfall</a></li>
<li><a href="/zh-CN/docs/Tools/Performance/Call_Tree">Call Tree</a></li>
<li><a href="/zh-CN/docs/Tools/Performance/Flame_Chart">Flame Chart</a></li>
<li><a href="/zh-CN/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
<li><a href="/zh-CN/docs/Tools/Web_Console/Console_messages#Reflow_events">Reflow Event Logging</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></li>
</ol>
</li>
<li><a href="#">Debugging the browser</a>
<ol>
<li><a href="/zh-CN/docs/Tools/Browser_Console" title="浏览器控制器">浏览器控制器</a></li>
<li><a href="/zh-CN/docs/Tools/Browser_Toolbox" title="浏览器工具箱">浏览器工具箱</a></li>
</ol>
</li>
<li><a href="#">Extending the devtools</a>
<ol>
<li><a href="/zh-CN/docs/Tools/Adding_a_panel_to_the_toolbox">Adding a panel to the toolbox</a></li>
<li><a href="/zh-CN/docs/Tools/Example_add-ons">Example devtools add-ons</a></li>
<li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></li>
<li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol_Stream_Transport">Stream Transport</a></li>
<li><a href="/zh-CN/docs/Tools/Editor">Source Editor</a></li>
<li><a href="/zh-CN/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></li>
<li><a href="/zh-CN/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></li>
</ol>
</li>
<li><a href="/zh-CN/docs/Tools/Settings">Settings</a></li>
<li><a href="/zh-CN/docs/Tools/Tips">Tips</a></li>
<li><a href="/zh-CN/docs/Tools/Keyboard_shortcuts">Keyboard shortcuts</a></li>
<li><a href="/zh-CN/docs/Tools/Release_notes">Release notes</a></li>
</ol>
|
