Debugging chrome应用程序赢得'；无法识别id'；当使用chrome浏览器运行时，它可以正常工作

我正在将一个运行良好的基于浏览器的标准应用程序转换为chrome应用程序

一旦页面加载完毕，它已经遇到一个错误-UncaughtTypeError:无法调用null的方法'appendChild'。这是在几百行JS完成工作后发生的，但这是代码第一次引用document对象，特别是document.getElementById（'mainDiv'）.appendChild（…）

我可以在调试器元素选项卡中清楚地看到id=“mainDiv”的div。然而，document.getElementById（'mainDiv'）必须返回null。任何设置断点的尝试都会失败，因为它们会被忽略。我已经将它们添加到失败的行以及导致失败的行中，并且从未触发断点。我已经阅读了SO上的一些线程，我确信断点问题只是调试器中的一个错误，但是当我可以清楚地看到id时，无法识别它，并且在浏览器中运行的代码工作正常，这让我想知道发生了什么。浏览器中的文档与应用程序版本中的文档是否不同

有什么想法吗

如果我选择“检查后台页面”，断点可以工作，但仍然失败，但方式不同。elements选项卡不显示我的html页面，但是伪生成的后台页面，我根本无法让调试器显示我的页面

---

任何启迪都将不胜感激。我已经搜索并阅读了我能找到的内容，但大部分文档显然已经过时。

您的调用是否发生在加载事件之后，例如，在window上的函数集中调用的JS。onload？

您的调用是否发生在加载事件之后，例如，在window.onload？上的函数集中调用的JS，您似乎正在访问背景页面的

文档
对象，而不是POS.html文件的对象

试试这个：

chrome.app.window.create('POS.html',{
    'bounds': { 
        'width': screen.availWidth, 
        'height': screen.availHeight 
    } 
}, function(appWin) {
    var pageWindow = appWin.contentWindow;
    var pageDocument = pageWindow.document;

    pageWindow.addEventListener('load',function() {
        // now use 
        pageDocument.getElementById('yourid');

        // instead of
        document.getElementById('yourid');
    },false);

});

此外，要检查页面中的元素，请右键单击应用程序窗口中的任意位置，然后选择
检查元素
（仅当应用程序作为“未打包扩展”加载时，此操作才有效）

或者，您可以导航到
chrome://extensions
，然后单击应用程序条目旁边的页面链接

您似乎正在访问后台页面的
文档
对象，而不是POS.html文件的对象

试试这个：

chrome.app.window.create('POS.html',{
    'bounds': { 
        'width': screen.availWidth, 
        'height': screen.availHeight 
    } 
}, function(appWin) {
    var pageWindow = appWin.contentWindow;
    var pageDocument = pageWindow.document;

    pageWindow.addEventListener('load',function() {
        // now use 
        pageDocument.getElementById('yourid');

        // instead of
        document.getElementById('yourid');
    },false);

});

此外，要检查页面中的元素，请右键单击应用程序窗口中的任意位置，然后选择
检查元素
（仅当应用程序作为“未打包扩展”加载时，此操作才有效）

或者，您可以导航到
chrome://extensions
，然后单击应用程序条目旁边的页面链接

正如lostsource提到的，您可能访问了错误的DOM文档。您应该考虑在不同的全局上下文中运行的应用程序中的javascript，每个页面一个。背景页至少有一页，每个窗口有一页

每个页面都在其自身的全局上下文中运行。这意味着像
document
和
window
这样的全局变量是不同的

在后台页面中，您将通过后台清单标签加载脚本。打开窗口时，它还可以通过脚本标记加载自己的脚本（确保不使用内联或块脚本标记，而是使用
script src=“foo.js”
。请参阅）

调用
chrome.app.window.create
时运行的代码在后台页面的上下文中运行，因此其
document
变量用于后台页面的DOM，该DOM通常为空。相反，您可以按照lostsource的建议，让它使用
win.contentWindow
引用窗口的DOM，或者添加一个带有脚本的page.js文件，并通过
script src='page.js'
标记从页面中包含它。
正如lostsource提到的，您可能访问了错误的DOM文档。您应该考虑在不同的全局上下文中运行的应用程序中的javascript，每个页面一个。背景页至少有一页，每个窗口有一页

每个页面都在其自身的全局上下文中运行。这意味着像
document
和
window
这样的全局变量是不同的

在后台页面中，您将通过后台清单标签加载脚本。打开窗口时，它还可以通过脚本标记加载自己的脚本（确保不使用内联或块脚本标记，而是使用
script src=“foo.js”
。请参阅）

调用
chrome.app.window.create
时运行的代码在后台页面的上下文中运行，因此其
document
变量用于后台页面的DOM，该DOM通常为空。相反，您可以按照lostsource的建议，让它使用
win.contentWindow
引用窗口的DOM，或者添加一个带有脚本的page.js文件，并通过
script src='page.js'
标记从页面中包含它。
这是我的背景。js:这是我的背景。js:chrome.app.runtime.onLaunched.addListener（函数（）{chrome.app.window.create（'POS.html'，{'bounds'：{'width'：screen.availWidth，'height'：screen.availHeight}}，函数（appWin）{appWin.contentWindow.addEventListener（'load'，housing，false）；}）；因为我正在等待“加载”，到那个时候我的页面应该可用，并且它的所有id都是已知的。内务处理例程创建一个相当大的片段，然后想将它附加到一个带有id=“mainDiv”的空div中。这是它偶然发现的id。这是我的背景。js：这是我的背景。js:chrome.app.runtime.onLaunched.addListener（function（）{chrome.app.window.create（'POS.html'，{'bounds'：{'width'：screen.availWidth，'height'：screen.availHeight}}），function（appWin）{appWin.contentWindow.addEventListener（'load'，housing，false）；}）；}）；因为我正在等待'load'，到那时我的页面应该是可用的