详解 Firefox 17 开发者工具的改进[多图]

   <p>随着每一个版本的火狐更新，开发者工具也会随之增强，蚊仔也每次都会<a href="/misc/goto?guid=4958523988195560917">更新相应的改进内容</a>。这次我们来看看Firefox17给开发者带来了哪些新的便利（顺便提一句蚊仔盼望的随意修改复制HTML代码来了=w=）。</p>    <p style="text-align:center;"><img style="width:200px;height:148px;" alt="[多图]详解 Firefox 17 开发者工具的改进" src="https://simg.open-open.com/show/a3aa0afdec33eaca962d9493314b01c2.jpg" width="450" height="334" /></p>    <p> </p>    <h4><strong>HTML编辑</strong></h4>    <p>在Firefox的开发者工具中，元素查看器应该是最重要的工具了。利用查看器中的“样式”面板，<span><span>你可以很容易地操作页面上的样式</span></span>。但你有时需要操纵DOM的页面的话，新的“标记面板”可以让你做到这一点。</p>    <p style="text-align:center;"><span class="highslide-image"><img style="width:500px;height:133px;" alt="[多图]详解 Firefox 17 开发者工具的改进" src="https://simg.open-open.com/show/a4ba60ce567fb94ed371afce97902900.png" width="928" height="247" /></span><br /> 新的标记面板</p>    <p>标记面板的快捷键还是原来的<kbd>Alt</kbd>+<kbd>M</kbd>（Mac上按<kbd>Ctrl</kbd>+<kbd>M</kbd>），或者鼠标点击上图中第三个按钮。（说白了就是标准的Html代码面板）</p>    <p>以前的话，你通过点击选择“标记面板“的元素“可以查看”样式面板“中的css样式。也可以右键单击标记面板中的某一元素，进行一些便捷操作（快速复制、删除HTML节点）。（如图）</p>    <p style="text-align:center;"><span class="highslide-image"><img style="width:500px;height:81px;" alt="[多图]详解 Firefox 17 开发者工具的改进" src="https://simg.open-open.com/show/4110fd13713d6556b19cfeb5fed851f6.png" width="732" height="118" /></span></p>    <p>那么Firefox 17的“标记面板”有什么新的改变呢？在此之前，你只能可以双击属性值更改该值。现在，你可以在几乎任何地方双击，进行任何修改。比如双击来改变文本的内 容。同样，对于标签本身也可以修改，比如双击关闭的标签“>”之前的空间，你可以添加新的属性。</p>    <p>你还会发现新版中，可以使用Tab键和方向键在标签和节点之间移动。键盘导航可以是编辑DOM的工作跟快捷。</p>    <h4><strong>Web控制台</strong></h4>    <p>一个小改进，就是用于网页的放大、缩小功能，现在在Web控制台中也同样适用了。鼠标选中控制台后，是哦也能够快捷键<kbd>CTRL</kbd>+<kbd>+</kbd>、<kbd>CTRL</kbd>+<kbd>-</kbd>和<kbd>CTRL</kbd>+<kbd></kbd>重置（Windows / Linux），<kbd>CMD</kbd>+<kbd>+</kbd>，<kbd>CMD</kbd>+<kbd>-</kbd>和<kbd>CMD</kbd>+<kbd></kbd>（Mac）。</p>    <p><span style="color:#4b0082;">注：</span>Web控制台还有一些改进，因为有点难翻译，详细看<a class="external external_icon" href="/misc/goto?guid=4958523988295369381" target="_blank">这里</a>。</p>    <h4><strong>元素查看器视觉效果改变</strong></h4>    <p>在元素查看器里选中元素的视觉效果做了修改。</p>    <p>在目前的版本中，选择元素的视觉效果是，背景变为暗色，以突出选择部分。（如图）</p>    <p style="text-align:center;"><img style="width:504px;height:171px;" alt="[多图]详解 Firefox 17 开发者工具的改进" src="https://simg.open-open.com/show/9f7a1b1a9dde4778f8d5284d87a857dc.png" width="504" height="171" /></p>    <p>在Firefox17后，背景不会发生变化，而是给选中部分加上一个虚线边框。这样的好处不会影响Web整体的设计感觉，对Web设计者来说是一个不错的改进。（如图）</p>    <p style="text-align:center;"><img style="width:513px;height:203px;" alt="[多图]详解 Firefox 17 开发者工具的改进" src="https://simg.open-open.com/show/e23bbeb87d59343091caa3865b77922a.png" width="513" height="203" /></p>    <h4><strong>调试器的改进</strong></h4>    <p>1、快速跨脚本搜索。在调试器的搜索框中输入“<code>!</code>”+“要搜索的内容”，可以快速的跨脚本搜索所有相关的脚本内容。（如图）</p>    <p style="text-align:center;"><span class="highslide-image"><img style="width:500px;height:98px;" alt="[多图]详解 Firefox 17 开发者工具的改进" src="https://simg.open-open.com/show/2f953394ce0d4c54305631b67fb35f20.png" width="1235" height="243" /></span></p>    <p>2、得到更多查看空间。如果你想要更多的空间来看看你的代码，在左侧增加了一个新的工具栏按钮（上图第二个按钮），点击后将关闭两个侧面板，让你的代码得到整个宽度的空间。</p>    <p>3、新增了更多的键盘快捷键。让使用调试器比以往任何时候都便捷、更快：</p>    <ul>     <li><kbd>ALT</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd>（Windows），<kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd>（Mac）焦点定位到搜索框</li>     <li><kbd>ALT</kbd>+<kbd>SHIFT</kbd>+<kbd>T</kbd>（Windows），<kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>T</kbd>（Mac）字符串（token）搜索</li>     <li><kbd>F6</kbd> 继续</li>     <li><kbd>F7</kbd> 跨过</li>     <li><kbd>F8</kbd> 进入</li>     <li><kbd>F8</kbd> 跳出</li>    </ul>    <p><span style="color:#4b0082;">注：</span>在Firefox15中“在页面重载后，调试器断点不捕捉的问题（<a class="external external_icon" href="/misc/goto?guid=4958523988378306878" target="_blank">783393</a>）；”的问题<a href="/misc/goto?guid=4958523988469023589">在Firefox16中已经被修复</a>。</p>    <p>另外随便说一句15开始Android版“干脆面”也开始好用了。下面这张图太萌了=w=</p>    <p style="text-align:center;"><img style="width:512px;height:384px;" alt="[多图]详解 Firefox 17 开发者工具的改进" src="https://simg.open-open.com/show/1080fb5aa6a84c81b4f060df9a540fb1.jpg" width="512" height="384" /></p>    <p> 文/<a href="/misc/goto?guid=4958523988550629035">蚊仔部屋</a></p>