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>]");

所有这些尝试都失败了。

screenshot

有没有办法打印它类似于＆＃34; http：// ... ＆＃34;链接，像这样......

example

...仅，将文字链接到javascript 语句或功能？

我这样做的原因是能够快速显示屏幕上哪些项目与特定日志条目相关联（示例：在单击日志条目时使CreateJS sprite扩展）上）。

Answer 1

与许多其他浏览器的开发者工具控制台一样，Google Chrome控制台会自动将任何网址解析为指向该网页的链接。这是获取此类网址的唯一方法，不幸的是，您实际上无法记录＆＃34;自定义网址＆＃34; 。

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

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提出此要求已经四年了，但是他们可以实现如下所述的目标：

创建一个有副作用的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定义函数，以及使用常规函数并返回执行其通常功能的包装器，然后重新定义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。该URL将由正在测试您的应用程序的本地网络服务器解释，并会启动某种推送机制（或排队进入轮询机制），该机制会实时传播到网页。

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

由于允许使用chrome-extension：//网址，因此第三种方法可能是编写扩展程序，以将某些点击转换为javascript。可能存在安全隐患（为安全起见，除非在列入白名单的页面上，否则您不要运行此操作，但是即使那样，由于我不完全熟悉该领域，我还是没有想到过安全隐患）。

Answer 3

~~如果某人仍然出现：~~

您可以或多或少地记录“自定义网址”：

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

<击> 请检查此CheatSheet

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

3 个答案: