如何在Chrome的console.log中创建链接到javascript函数的超链接？

Question

我正在尝试向控制台写入条目,其中包含在单击它们时触发javascript函数的链接:

console.log("javascript:alert('Hello World');");
console.log("<a href=\"javascript:alert('Hello World');\"/>test</a>");
console.log("[DisplayObject 'Hello World' <a href=\"javascript:alert('Hello World');\">reveal</a>]");

所有这些尝试都失败了

有没有办法打印它类似于" http:// ... "链接,像这样......

...只是,将文本链接到javascript 语句或函数而不是？

我这样做的原因是能够快速显示屏幕上哪些项目与特定日志条目相关联(例如:单击日志条目时使CreateJS sprite扩展).

Answer 1

与许多其他浏览器的开发人员工具控制台一样,Google Chrome控制台会自动将任何网址解析为指向该网页的链接.这是获取此类URL的唯一方法,遗憾的是,您无法实际记录"自定义URL".

这意味着以下日志将自动转换为可点击链接:

console.log('http://example.com');
console.log('www.example.com');
console.log('ftp://mysite.com');
console.log('chrome://history')
console.log('chrome-extension://abcdefg...');

但是,相反,以下不会:

console.log('example.com');
console.log('<a href="http://www.example.com">Link</a>');
console.log('javascript:doSomething(someValue);');

Answer 2

OP 提出这个问题已经四年了，但他们可以按如下方式完成既定目标：

创建一个有副作用的吸气剂。（副作用可能是直接为你的东西设置动画。）

class YourThing {        
    get __doAnythingYouWant() {
        // ...like console.log('my thing:', this);
    }
}

或者：

var yourObject = {
    get __doAnythingYouWant() {
        // ...like an animation in DOM... this.myDomElement.style...
    }
};

如何使用它：

console.log(yourObject);
> {
      get __doAnythingYouWant: (...)  <-- click here!
  }
> "you clicked the dots!"

缺点是你只能调用一次 getter。您可以通过删除它并在每次调用时从其内部重新定义它来解决此问题。您可以通过使用 Object.defineProperties 创建某种定义 getter 的函数，以及一些接受常规函数并返回执行其正常功能的函数的包装器，然后重新定义 getter，从而使之变得不那么笨拙。单击一次对我来说已经足够了，但是如果您愿意，可以这样做：

function addDebuggerButton(obj, f) {
    var buttonName = `__${f.name}`;
    Object.defineProperty(obj, buttonName, {
        get: function() {
            f.apply(this, arguments);
            delete this[buttonName];
            addDebuggerButton(obj, f);
        },
        configurable: true
    });

    return obj;
}

设置configurable属性很重要，它只是让你在定义之后重新定义它。有用：

addDebuggerButton({a:1,b:2}, function myButton() {
    this.c = Math.random();
    console.log('you pressed the button!', this);
});
> {a: 1, b: 2}
      a: 1
      b: 2
      __myButton: (...)       <-- click here!
      get __myButton: ƒ ()
      __proto__: Object
> you pressed the button! {a: 1, b: 2, c: 0.27574428165568676}
                              a: 1
                              b: 2
                              c: 0.27574428165568676
                              __myButton: (...)      <-- click here again
                              get __myButton: ƒ ()
                              __proto__: Object
> you pressed the button! {a: 1, b: 2, c: 0.43171172657344337}

您可以根据需要修改它以使用类。您甚至可以通过向 addDebuggerButton 函数添加一个默认参数来为此添加一个隐藏状态（因此您的按钮可以说“您按下了按钮 3 次！”）。

另一种可怕的骇人听闻的方法是编写一个像http://127.0.0.1:9999/myLocalWebserver/horribleWorkaround?{"metadata":"etc"}. URL 将由您正在测试您的应用程序的本地网络服务器解释，并会启动某种推送机制（或排队轮询机制），这将传播到网页实时。

...当然，使用自定义补丁自己编译 Chromium 可能会更优雅...

第三种方法，因为允许使用 chrome-extension:// url，可能是编写一个将某些点击转换为 javascript 的扩展程序。可能存在安全隐患（为了安全起见，除了在白名单页面上，您不会让它运行，但即使如此，我也没有想到安全隐患，因为我并不完全熟悉该区域）。