Mozilla Hacks

Firefox 开发者工具再介绍，第二部分：Scratchpad 和样式编辑器

头像照片 作者：Robert Nyman [荣誉编辑]

发布于 2013 年 11 月 4 日 分类于 开发者工具

这是五部分中的第二部分，重点介绍 Firefox 中的 内置开发者工具，其功能以及我们目前所处的位置。目的是向您展示所有可用的可能性、进展以及我们的目标。

在本系列的第一篇文章 中，我们讨论了 Web 控制台和 JavaScript 调试器。虽然这两个工具功能强大，并提供了检查和修改 Web 应用程序的功能，但还有其他工具可用于进一步增强开发体验，同时构建和调试您的应用程序。在这篇文章中，我们简要介绍了 Scratchpad 和样式编辑器。

与第一篇文章一样，我们为每个工具提供了一个简短的屏幕录制，演示了其一些功能。

样式编辑器

样式编辑器主要用于在当前应用程序的上下文中编辑、调试或创建新的样式表。在样式编辑器中进行的更改会自动反映在加载的页面中。如果您不熟悉层叠样式表 (CSS)，请务必查看 CSS MDN 文档。

样式编辑器允许在使用编辑器时保存所做的更改。此外，您还可以导入现有的样式表并将其应用于当前页面，或单独禁用特定的样式表。样式编辑器还与检查器链接，允许开发人员快速访问已检查元素的样式表。以下屏幕录制概述了样式编辑器的功能。

有关 样式编辑器的更多详细信息，请查看 MDN 文档。

Scratchpad

Scratchpad 有很多用途，本质上是一个实时 JavaScript 编辑器和原型设计工具。使用 Scratchpad，开发人员可以访问当前页面的对象、变量和脚本。此外，可以在编辑器中编写和测试完整的函数，这些函数位于实时页面的范围内。然后，可以将这些更改附加并保存到当前应用程序中。

还可以加载和测试外部 JavaScript 文件。提供了多种运行选项，允许开发人员仅执行代码、执行代码并检查返回的对象，或执行代码并将结果作为注释打印到 Scratchpad 中。以下屏幕录制说明了 Scratchpad 的一些功能。请注意，Scratchpad 脚本在与加载到页面中的脚本相同的
上下文中运行。在屏幕录制中，该示例使用 jQuery 库和一些自定义脚本来说明此功能。

有关 Scratchpad 的更多信息，请参阅 MDN 调试器文档。

如果您不太熟悉 JavaScript，请务必查看 MDN 文档，其中包含有关学习该语言和机制的全面资源列表。

了解更多信息

这些屏幕录制简要介绍了这些工具的主要功能。有关 所有开发者工具的完整详细信息，请查看完整的 MDN 工具文档。

即将推出

在下一篇文章中，我们将重点介绍一些移动设计功能，包括响应式设计视图和使用应用程序管理器进行远程调试。请在下方评论中提供您希望在本系列即将发布的文章中详细了解的功能建议。

关于 Robert Nyman [荣誉编辑]

技术布道师和 Mozilla Hacks 编辑。发表关于 HTML5、JavaScript 和开放网络的演讲和博客。Robert 坚定地相信 HTML5 和开放网络，自 1999 年以来一直在从事 Web 前端开发工作——在瑞典和纽约市。他还会定期在 http://robertnyman.com 上发表博客，并且喜欢旅行和结识新朋友。

更多 Robert Nyman [荣誉编辑] 的文章…

22 条评论

  1. Adam

    有计划在编辑器中引入 SASS 支持吗？

    我看到了一些关于 Chrome 开发者工具的有趣视频，展示了如何对 SASS 文件进行编辑并实时重新加载修改后的 CSS。

    2013 年 11 月 4 日 12:16

    1. Nick Fitzgerald

      @harthvader 目前正在样式编辑器和检查器中开发初始源映射支持。需要一些基础设施才能自动将服务器上的文件映射回本地文件系统，但这已列入我们的路线图！

      2013 年 11 月 4 日 13:53

  2. Shmerl

    样式编辑器仍然需要一些改进。例如，在其中搜索文本很难使用。没有“查找下一个”或“查找上一个”快捷键，每次都必须重新打开对话框。

    而且无法一次搜索所有样式源。如果提供了许多源，这将使跟踪内容变得更加困难。

    2013 年 11 月 4 日 13:04

    1. Nick Fitzgerald

      为了备忘，我在 HN 上复制了我的回复 :)

      ———————————————————————–

      在 Aurora 中，这些工具现在使用 Code Mirror 作为编辑器。随着此更改，我们现在使用 Code Mirror 的搜索功能，因此 Cmd+G 和 Cmd+Shift+G 将循环遍历下一个/上一个搜索结果。

      我为更易发现的 UI 提交了一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=934624

      这是跨所有工作表搜索的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=932093

      看起来它被忽略了，但我刚刚与 Heather 谈过，她对样式编辑器的工作最多，所以它应该会重新引起关注 :)

      还有其他问题吗？:)

      2013 年 11 月 4 日 13:54

      1. Luke

        不错。为什么不在文档中添加这些快捷键？
        https://mdn.org.cn/en-US/docs/Tools/Using_the_Source_Editor

        之前我一直在尝试在检查器 css 编辑器中使用上下键时找到一种以 10 而不是 1 为增量的方法，在查看扩展此功能的源代码时，我发现它们已经存在了——Shift+上/下，而不是大多数检查器使用的 Page Up/Down，所以我将其添加到文档中——希望更多高级功能也能在那里获得教程 :)

        2013 年 11 月 5 日 21:55

    2. J. Ryan Stinnett

      实际上，我们刚刚更新了调试器和样式编辑器，以便在 Aurora（Firefox 27）中使用 CodeMirror 作为其文本编辑器，搜索功能作为此更改的一部分得到了极大改善。

      试用 Aurora 并告诉我们您的想法！

      2013 年 11 月 5 日 03:32

  3. eric

    请在 css 上添加自动完成…就像 Firebug/Chrome 一样

    2013 年 11 月 4 日 13:33

    1. Luke

      它确实在 Firefox 25 中的 css 规则编辑器中具有自动完成功能。

      除非您指的是它不允许您向下箭头或为您提供像 display/position 这样的属性的下拉列表，这些属性只有几个有效选项。我同意可以更好地处理这一点。

      2013 年 11 月 5 日 21:58

  4. Maurizio

    为什么使用 Youtube……它嵌入 Flash :-(((

    2013 年 11 月 4 日 14:54

    1. Robert Nyman [编辑]

      如果您已选择使用 HTML5 视频，YouTube 会使用 HTML5 视频：https://www.youtube.com/html5

      2013 年 11 月 5 日 04:57

      1. Mindaugas J.

        显然，嵌入代码不适用

        2013 年 11 月 5 日 05:00

        1. Robert Nyman [编辑]

          我在这篇文章中获得了 HTML5 视频嵌入（已在 YouTube 上选择 HTML5）。

          2013 年 11 月 5 日 05:02

          1. Mindaugas J.

            嗯，它在 FF 上有效。

            一定是 Chrome 的问题。

            没有贬低的意思 :P

            2013 年 11 月 5 日 05:05

          2. Robert Nyman [编辑]

            :-)

            2013 年 11 月 5 日 06:40

  5. Maurizio

    还有一件事……Aurora 在 Ubuntu PPA 上的更新频率不再那么高了（https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa）

    一个月或两个月前，使用 Ubuntu PPA 获取 Firefox Nightly 非常方便，当时它每天都会更新；现在我被困在 10 月 25 日的版本上，在此版本之前，PPA 一个月都没有更新！是否存在任何问题？我应该联系谁来报告此问题？感谢 Firefox，并致以最诚挚的爱 :-)

    2013 年 11 月 4 日 15:00

    1. Delapouite

      确实，自从今年夏天以来，Aurora PPA 更新频率不高，我也感到惊讶。之前非常方便。

      2013 年 11 月 5 日 15:41

    2. Luke

      我也在 Firefox 25 测试版中注意到了这一点。

      2013 年 11 月 5 日 21:59

  6. nemo

    Maurizo，我个人在这台机器上没有安装 Flash（并且在我的其他机器上，我 99% 的时间都将其禁用），但我建议
    1) http://youtube.com/html5 选择加入
    这对我很大的数量的视频不起作用，即使是朋友上传的视频。奇怪的是，如果同一个视频是 /embed/，它通常*确实*可以工作（并且不，似乎不一定与广告相关）

    2) https://addons.mozilla.org/en-US/firefox/addon/youtube-all-html5/
    这确实在任何地方都能工作，并解决了恼人的 Flash 问题。

    看起来 Shumway 还没有成为选项 :-/

    2013 年 11 月 4 日 16:30

    1. Mike Ratcliffe

      youtube 嵌入代码未始终提供 HTML5 视频的原因是，人们仍然经常使用旧的嵌入代码。他们应该使用新代码……当支持 HTML5 视频时，我从未见过它无法提供 HTML5 视频

      2013 年 11 月 8 日 07:20

      1. Mike Ratcliffe

        嵌入代码已从我的回复中删除

        <iframe class=”youtube-player” type=”text/html” width=”640″ height=”385″ src=”http://www.youtube.com/embed/VIDEO_ID” allowfullscreen frameborder=”0″>
        </iframe>

        2013 年 11 月 8 日 07:22

  7. stripTM

    @Maurizio，为什么不直接使用官方的 Mozilla 二进制文件？
    http://www.mozilla.org/firefox/channel/

    2013 年 11 月 4 日 18:08

  8. Mindaugas J.

    远程/浏览器调试加载项并不总是有效。

    我遇到以下问题
    在桌面上的 chrome://myapp/preferences.html 中的脚本仅在调试会话的第一次加载时在断点处停止。之后，它会忽略任何断点。

    在 Fennec 上，在 tabInit 上运行的代码仅在禁用/重新启用加载项时在断点处停止。打开新标签页不够。DocLoad 很好。

    在 Fennec 上，chrome://myapp/preferences.html 无法调试。打开选项卡进程不会显示任何源。主进程中的断点被忽略。

    这些问题是否已知？如果需要，我会将它们提交到 Bugzilla，但问题是，我应该创建多少个 Bug :P

    2013 年 11 月 5 日 03:17

本文的评论已关闭。