消息:SyntaxError:missing:属性id之后

Question

我正在尝试学习如何为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")]
    });
  }
});

数据/编辑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);

错误输入到此问题的标题中:"消息:SyntaxError:missing:after property id".正如所见:"id"后面有一个":"(main.js中的第四行).发生什么了？

BTW:有没有比在Windows CMD中阅读那些无用语句更好的方法来调试firefox插件？

Answer 1

在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);

调试的最佳方法是使用浏览器控制台.设置开发首选项(安装此插件:DevPrefs),然后按下Ctrl+Shift+J并查看错误消息.使用console.log console.info console.warn和console.error将消息记录到Browser Concole中.执行console.log(objectName)并在浏览器控制台中单击该对象,它将显示其中的内容.