debugging - chrome-app 无法识别由 chrome 浏览器运行时正常工作的 id

Question

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

页面加载后，它已经遇到错误 - Uncaught TypeError: Cannot call method 'appendChild' of null。这种情况发生在几百行 JS 完成其工作之后，但这是代码第一次引用文档对象，特别是 document.getElementById('mainDiv').appendChild(...)。

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

有什么想法吗？

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

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

Answer 1

您似乎正在访问后台页面的 document 对象，而不是 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 并单击应用条目旁边的页面链接。