Firefox 11 Aurora 中全新的开发者工具

jopen 12年前
     <p>Firefox 11 Aurora 正式版将会在 2012 年 3 月正式发布。先睹为快,我们来看看 Firefox 11 中在开发者工具方面有什么亮点。</p>    <h2>自由格式的样式单编辑</h2>    <p>在最新的 Firefox 提供了 Style Inspector ,可以用它的规则来对某个元素的 CSS 属性进行查看和修改,而 Firefox 11 Aurora 将增加自由格式的样式编辑组合。</p>    <p>你可以从 Web 开发者菜单中打开 Style Editor ,如下图所示:</p>    <p><img class="alignnone size-large wp-image-10574" alt="Firefox 11 Aurora 中全新的开发者工具" src="https://simg.open-open.com/show/39aab6d6007fe79d532de5bf0eb05ddf.png" width="500" height="220" /></p>    <p>Style Editor 提供了一个 CSS 编辑的友好环境,你所作的修改会立即在页面上生效,你也可以在你本机上保存修改后的页面。</p>    <p>该工具还有很多好用的特性,例如点击 eye 图标可以对某个 CSS 属性进行设置和关闭,也就是我们常说的 toggle 操作。你可以在一个新页面上测试样式,或者创建一个新的样式或者直接从磁盘中加载样式。</p>    <p>另外,Style Editor 会自动对 CSS 进行排版处理,更适合阅读。</p>    <h2>使用三维效果查看页面结构</h2>    <p>哇塞,这个太酷了,你可以通过菜单中的 Web 开发者的 Inspect 来打开此功能,你将在工具栏看到一个 3D 按钮(前提是你的电脑兼容 WebGL),点击此按钮,就可以看到如下的酷图:</p>    <p><img class="alignnone size-large wp-image-10569" alt="Firefox 11 Aurora 中全新的开发者工具" src="https://simg.open-open.com/show/26f912b48d4725e84a72e2343d22668f.png" width="500" height="324" /></p>    <p>你可以对此图进行缩放、旋转等操作。</p>    <p>下面是控制这个三维图形的操作方法:</p>    <table class="ke-zeroborder">     <tbody>      <tr>       <td>Function</td>       <td>Mouse</td>       <td>Keyboard</td>      </tr>      <tr>       <td>Zoom</td>       <td>Scroll up/down</td>       <td><code>+</code> and <code>-</code></td>      </tr>      <tr>       <td>Rotate</td>       <td>Click and drag</td>       <td><code>a</code>/<code>d</code> and <code>w</code>/<code>s</code></td>      </tr>      <tr>       <td>Pan</td>       <td>(none)</td>       <td>Arrow keys</td>      </tr>     </tbody>    </table>    <p>等不及想体验一下 <a href="/misc/goto?guid=4958322132031391825">Firefox Aurora</a> 吗?</p>