如何在 Chrome 的 console.log 中创建链接到 javascript 函数的超链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29681775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create hyperlinks linked to javascript functions in Chrome's console.log?
提问by bigp
I'm trying to write entries to the console that would contain links to trigger javascript functions upon clicking on them:
我正在尝试将条目写入控制台，这些条目将包含在单击它们时触发 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>]");
All these attempts fail.
所有这些尝试都失败了。
Is there any way to print it similarly to an "http://..." link, like so...
有什么方法可以像“ http://...”链接一样打印它，就像这样...
... only, have the text linked to a javascript statementor functioninstead?
...只是，是否将文本链接到 javascript语句或函数？
The reason I'm doing this is to be able to quickly reveal which items on the screen are tied to a specific log entry (example: Making a CreateJS sprite scale-up when the log entry is clicked on).
我这样做的原因是为了能够快速显示屏幕上的哪些项目与特定的日志条目相关（例如：在单击日志条目时放大 CreateJS 精灵）。
采纳答案by Marco Bonelli
The Google Chrome console, like many other browser's developer tools consoles, automatically parses any URL into a link to that exact page. This is the only way of obtaining such URLs, and, unfortunately, you cannot actually log "custom URLs".
与许多其他浏览器的开发者工具控制台一样，Google Chrome 控制台会自动将任何 URL 解析为指向该确切页面的链接。这是获取此类 URL 的唯一方法，不幸的是，您实际上无法记录“自定义 URL”。
This means that the following logs will be turned into a clickable link automatically:
这意味着以下日志将自动转换为可点击的链接：
console.log('http://example.com');
console.log('www.example.com');
console.log('ftp://mysite.com');
console.log('chrome://history')
console.log('chrome-extension://abcdefg...');
but, on the contrary, the following ones won't:
但是，相反，以下不会：
console.log('example.com');
console.log('<a href="http://www.example.com">Link</a>');
console.log('javascript:doSomething(someValue);');
回答by ninjagecko
It's been four years since OP asked this, but they can accomplish their stated goal as follows:
OP 提出这个问题已经四年了，但他们可以按如下方式实现既定目标：
Create a getterthat has a side-effect. (The side effect can be to directly animate your thing.)
创建一个有副作用的吸气剂。（副作用可能是直接为你的东西设置动画。）
class YourThing {
get __doAnythingYouWant() {
// ...like console.log('my thing:', this);
}
}
Alternatively:
或者：
var yourObject = {
get __doAnythingYouWant() {
// ...like an animation in DOM... this.myDomElement.style...
}
};
How to use it:
如何使用它：
console.log(yourObject);
> {
get __doAnythingYouWant: (...) <-- click here!
}
> "you clicked the dots!"
The downside is you can only invoke the getter once. You could maybe get around this by deleting it and redefining it from within itself, with every invocation. You could make that less hackish by creating some kind of getter-defining function with Object.defineProperties, and some wrapper that takes a regular function and returns a function that does what it normally does, then redefines the getter. Clicking on it once was good enough for me, but if you wanted to you'd do it like this:
缺点是您只能调用一次 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;
}
It's important to set the configurableproperty, which just lets you redefine it after defining it.
It works:
设置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}
You can modify this as appropriate to work with classes. You could even add a hidden state to this by adding a default parameter to the addDebuggerButton function (so your button could say "you pressed the button 3 times!").
您可以根据需要修改它以使用类。您甚至可以通过向 addDebuggerButton 函数添加一个默认参数来为此添加一个隐藏状态（因此您的按钮可以说“您按下了按钮 3 次！”）。
The other horribly hackish way to do this is to write a url like http://127.0.0.1:9999/myLocalWebserver/horribleWorkaround?{"metadata":"etc"}. The URL would be interpreted by your local webserver you're testing your app out of, and would initiate some kind of push mechanism (or queue onto a poll mechanism), that would propagate to the webpage live.
另一种可怕的骇人听闻的方法是编写一个像http://127.0.0.1:9999/myLocalWebserver/horribleWorkaround?{"metadata":"etc"}. URL 将由您正在测试您的应用程序的本地网络服务器解释，并会启动某种推送机制（或排队轮询机制），这将传播到网页实时。
... Of course, it would probably be more elegant to compile Chromium yourself with a custom patch...
...当然，使用自定义补丁自己编译 Chromium 可能会更优雅...
The third way, since chrome-extension:// urls are allowed, is perhaps to write an extension that converts certain clicks into javascript. There may perhaps be security implications (to be safe, you would not let this run except on whitelisted pages, but even then there are security implications I have not thought of since I'm not entirely familiar with that area).
第三种方法，因为允许使用 chrome-extension:// url，可能是编写一个将某些点击转换为 javascript 的扩展程序。可能存在安全隐患（为了安全起见，除了在白名单页面上，您不会让它运行，但即使如此，我也没有想到安全隐患，因为我并不完全熟悉该区域）。
回答by Gabor
If it still comes up for somebody:
如果它仍然出现在某人身上：
You can more-or-less log "custom URLs":
console.log('There is a good link: %o', 'http://stackoverflow.com');
您可以或多或少地记录“自定义 URL”：
console.log('There is a good link: %o', 'http://stackoverflow.com');
Check this CheatSheet
检查这个备忘单
