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

Question

我正在尝试将包含 links 的条目写入控制台，以便在单击它们时触发 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://...”link，就像这样...

... 仅将文本 link 编辑为 javascript 语句或函数？

我这样做的原因是为了能够快速显示屏幕上的哪些项目与特定日志条目相关联（示例：当日志条目时使 CreateJS sprite 放大被点击).

Answer 1

Google Chrome 控制台与许多其他浏览器的开发人员工具控制台一样，自动将任何 URL 解析为 link 到该确切页面。这是获得此类 URL 的唯一方法，不幸的是，您实际上无法登录 "custom URLs"。

这意味着以下日志将自动变成可点击的 link：

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

~~如果它仍然出现在某人身上：~~

您可以或多或少地记录 "custom URLs":

console.log('There is a good link: %o', 'http://whosebug.com');

检查这个 CheatSheet

Answer 3

OP 提出这个问题已经四年了，但他们可以通过以下方式实现既定目标：

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

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 定义函数，以及一些采用常规函数和 returns 执行其通常功能的函数的包装器来使它不那么骇人听闻，然后重新定义 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 属性，它只是让你在定义它之后重新定义它。有效：

let numTimesPressed = 0;
addDebuggerButton({a:1,b:2}, function myButton() {
    this.c = Math.random();
    console.log(`you pressed the button ${++numTimesPressed} times!`, 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}

您可以根据需要修改它以使用类。

如果您想点击不同的链接以拥有自己不同的状态时间轴（而不是像上面 numTimesPressed 这样的共享状态，它是全球性的，或者更全球性的，在范围内；即这样的状态是在不同对象之间共享），那么您可以使函数 return 成为包含其余计算的回调。您必须相应地修改 addDebuggerButton (let callback = f.apply(this, arguments);, addDebuggerButton(obj, callback)).

另一种可怕的 hackish 方法是写一个 url 像 http://127.0.0.1:9999/myLocalWebserver/horribleWorkaround?{"metadata":"etc"}。 URL 将由您正在测试您的应用程序的本地网络服务器解释，并将启动某种推送机制（或排队到轮询机制），该机制将实时传播到网页。这将快速打开一个新选项卡，您可以在其中显示一个自动关闭的虚拟网页。您也可以使用拦截请求的 webworker 将其完全设为客户端。

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

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

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

How to create hyperlinks linked to javascript functions in Chrome's console.log?

javascript

google-chrome

hyperlink

console.log