Javascript 消息：SyntaxError:缺少：在属性id之后

我正在尝试学习如何为firefox制作简单的插件。我的基础是

这是我的代码：

lib/main.js

var self = require("sdk/self");

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Style Tab",
  icon: "./icon-16.png",
  onClick: function() {
    require("sdk/tabs").activeTab.attach({
        contentScriptFile: [self.data.url("jquery.js"), self.data.url("edit-page.js")]
    });
  }
});

data/edit-page.js

$("body div").css("visibility", "hidden");
$("body").append( $("#addon_hide_page") );

var styles = {
    width: "100%",
    height: "100%",
    backgroud-color: "gray"
}

$("body #addon_hide_page").css(styles);

此问题的标题中键入了错误：“Message:SyntaxError:missing:after property id”。如图所示：“id”之后有一个“：”（main.js中的第四行）。那么，发生了什么事

---

顺便说一句：有没有更好的方法来调试firefox插件，而不是阅读Windows CMD中那些没有帮助的语句？

在

data/edit page.js

中你不能有一个名为

background color

的属性，破折号会把它弄糟。你必须把它写在引号里。因此：

$("body div").css("visibility", "hidden");
$("body").append( $("#addon_hide_page") );

var styles = {
    width: "100%",
    height: "100%",
    "backgroud-color": "gray" ////////////////fix here
}

$("body #addon_hide_page").css(styles);

调试的最佳方法是使用浏览器控制台。

---

设置开发首选项（安装此插件：），然后按Ctrl+Shift+J并查看错误消息。使用console.log console.info console.warn和console.error将消息记录到浏览器控制台中。执行console.log（objectName），然后在浏览器控制台中单击该对象，它将显示其中的内容。

谢谢，我很快就会查看它。然而，当安装该插件时：当我使用“cfx run”测试我的插件时，它会打开“clear”firefox（没有任何个人数据），我不知道它是什么。那么我如何安装和使用DevPrefs工具呢？哦，这很棘手，我不知道。可能已经使用develpoment pref设置启用了具有cfx run的浏览器控制台。我不是sdk的家伙。仅供参考，现在夜间有一个附加调试器：另外，您可以在运行cfx时指定配置文件目录：