在使用require.js的Chrome扩展中调试内容脚本时遇到问题 [英] Trouble debugging content scripts in a chrome extension using require.js

问题描述

要在内容脚本中加载模块，我使用以下代码（来源 http://prezi.com/rodnyr5awftr/requirejs-in-chrome-extensions/ ）：

  require。 load = function（context，moduleName，url）{
 var xhr; 
 xhr = new XMLHttpRequest（）; 
 xhr.open（GET，chrome.extension.getURL（url）+'？r ='+ new Date（）。getTime（），true）; 
 xhr.onreadystatechange = function（e）{
 if（xhr.readyState === 4& xhr.status === 200）{
 eval（xhr.responseText）; 
 context.completeLoad（moduleName）
} 
}; 
 xhr.send（null）; 
}; 
  

通过Chrome控制台进行调试时发生问题。每当我的某个模块发生错误时，它只会报告发生在匿名函数中的错误，但不会通知我该模块中的哪个require.js模块或行发生错误，而是始终指向上面的脚本。

由于很多人似乎在使用带扩展名的require.js时使用了上述代码的不同变体，所以必须有一种简单的方法来获得在调试控制台中有更多的信息，我只是不会这样做）。

感谢您的帮助!!

更新4/1：更改上面的eval（）语句以使用Function（）似乎解决了问题，因为chrome控制台添加了添加信息。 （这项工作的功劳归功于这个问题）。

我意识到这两个函数不是完全可以互换的（参见这个问题）。如果有人知道在上面的代码中使用Function（）而不是eval（）的任何缺陷，请让我知道!!

解决方案

您可以更改该行

  eval（xhr.responseText）; 
  

by

  eval（xhr.responseText +\\\
 // @ sourceURL =+ url）; 
  

通过这种方式，您可以在原始网址下的源代码面板中看到所有已撤销的代码。

To load modules in the content scripts I'm using the following code (source http://prezi.com/rodnyr5awftr/requirejs-in-chrome-extensions/):

require.load = function (context, moduleName, url) {
    var xhr;
    xhr = new XMLHttpRequest();
    xhr.open("GET", chrome.extension.getURL(url) + '?r=' + new Date().getTime(), true);
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
            eval(xhr.responseText);
            context.completeLoad(moduleName)
        }
    };
    xhr.send(null);
};

The trouble happens when debugging via the Chrome console. Whenever there is an error in one of my modules it just reports the error occurred in an anonymous function but doesn't inform me which require.js module or line in that module the error occurred but instead always points back to the eval line in the above script.

Since a lot of people seem to being using different variations of the above code when using require.js with chrome extensions, there must be a simple way to get more information in the debugging console, I just don't what that is :).

Thanks for your help!!

UPDATE 4/1: Changing the eval() statement above to use Function() seems to have solved the problem in that the chrome console adds in the addition information. (credit for this work around goes to this question).

I realize the two functions aren't totally interchangeable (see this question). If anyone is aware of any pitfalls in using Function() instead of eval() in the above code please let me know!!

解决方案

You can change the line

        eval(xhr.responseText);

by

        eval(xhr.responseText + "\n//@ sourceURL=" + url);

This way you'll see all your evaled code listed in the source code panel under its original url.

这篇关于在使用require.js的Chrome扩展中调试内容脚本时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！