Question

我有一个JavaScript函数库，我希望能够从Web浏览器的开发人员控制台访问它。我希望能够与网页定义的函数和变量并排运行我的函数。

我看到的一个解决方案是直接将代码复制/粘贴到浏览器控制台然后使用它，但如果有更优雅的解决方案会更好，特别是因为我的代码库可能会增长很多我不想每次加载时都要复制/粘贴。

我调查的另一个解决方案是使用Chrome扩展程序。 Chrome扩展程序内容脚本（https://developer.chrome.com/extensions/content_scripts.html#host-page-communication）允许JavaScript代码在访问网页时自动运行，但上述网页指出

＆＃34; [内容脚本不能]使用由网页或其他内容脚本定义的变量或函数。＆＃34;

还有其他方法可以实现吗？

感谢您的帮助！

Answer 1

更新（2013年7月7日）：
我正在更新到Firefox v22并发现在这个最新版本（或者最后几个版本......我不确定）内置的Web Developer工具有一个Javascript Scratchpad（按Shift + F4到拉起来，这会让你输入一些代码，或者在你的情况下，加载一个JS文件并在加载的页面上运行它。

我没有对它进行过广泛的测试，但我在现有页面中添加了几个变量，它们都可以通过内置控制台和Firebug控制台访问。只需执行File > Open File打开您的JS文件，然后执行Execute > Run。

一个选项是创建一个书签（可重用，可以注入任何页面），但它只适用于最简单的脚本。请参阅：here

Answer 2

在浏览器中加载页面后，所有javascript函数都将位于“window”对象下。就像你有，

function mytestfunciton() {
  console.log('This is a test');
}

在你的控制台窗口上试试这些

window.mytestfunciton();
//and get the response below
This is a test

您也可以将它们包装在类似

的全局变量中

var myapp = {};
myapp.add = function(a,b) {
            myapp.sumvalue = a + b;
                            console.log('Sum Value:'+myapp.sumvalue);
        };
myapp.substract = function (a,b) {
            myapp.differencevalue = a - b; 
                            console.log('Difference Value:'+myapp.differencevalue);
          };

您的所有函数现在都包含在全局变量myapp下，您现在可以使用类似

的内容从控制台调用它们

myapp.add(5,4);

或以前使用全局“窗口”对象

window.myapp.add(5,4);

如何自动将JavaScript注入网页，以便可以从开发人员控制台访问其变量

2 个答案: