Javascript 如何在Chrome';s console.log?
我正在尝试将包含链接的条目写入控制台,以在单击它们时触发javascript函数:Javascript 如何在Chrome';s console.log?,javascript,google-chrome,hyperlink,console.log,Javascript,Google Chrome,Hyperlink,Console.log,我正在尝试将包含链接的条目写入控制台,以在单击它们时触发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('Hel
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>]");
console.log(“javascript:alert('helloworld');”;
控制台日志(“”);
log(“[DisplayObject'Hello World']”);
所有这些尝试都失败了
有没有办法把它打印成类似“http://...“链接,就像这样
。。。只是,是否将文本链接到javascript语句或函数
我这样做的原因是为了能够快速显示屏幕上的哪些项目与特定的日志条目相关联(例如:在单击日志条目时放大CreateJS sprite)。谷歌Chrome控制台与许多其他浏览器的开发工具控制台一样,会自动将任何URL解析为指向该页面的链接。这是获取此类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);');
console.log('example.com');
控制台日志(“”);
log('javascript:doSomething(someValue);');
如果仍有人需要:
您可以或多或少地记录“自定义URL”:
检查一下这个OP问这个问题已经四年了,但他们可以实现他们的既定目标,如下所示: 创建一个有副作用的。(副作用可能是直接为对象设置动画。) 或者:
var yourObject = {
get __doAnythingYouWant() {
// ...like an animation in DOM... this.myDomElement.style...
}
};
如何使用它:
console.log(yourObject);
> {
get __doAnythingYouWant: (...) <-- click here!
}
> "you clicked the dots!"
设置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({a:1,b:2},函数myButton(){
this.c=Math.random();
log('您按下了按钮!',这是);
});
>{a:1,b:2}
a:1
b:2
__我的按钮:(…)你按下了按钮!{a:1,b:2,c:0.27574428165568676}
a:1
b:2
c:0.27574428165568676
__我的按钮:(…)你按下了按钮!{a:1,b:2,c:0.43171172657344337}
您可以根据需要修改它以使用类。您甚至可以通过向addDebuggerButton函数添加默认参数来添加一个隐藏状态(这样您的按钮可以说“您按下了按钮3次!”)
另一种骇人听闻的方法是编写一个类似
http://127.0.0.1:9999/myLocalWebserver/horribleWorkaround?{“元数据”:“etc”}
。URL将由您正在测试应用程序的本地Web服务器进行解释,并将启动某种推送机制(或排队到轮询机制),该机制将实时传播到网页
。。。当然,使用自定义补丁自己编译Chromium可能会更优雅
第三种方法,因为允许chrome extension://url,可能是编写一个将某些单击转换为javascript的扩展。可能存在安全隐患(为了安全起见,除非在白名单页面上运行,否则您不会让它运行,但即使这样,我也没有想到安全隐患,因为我对该区域不太熟悉)。谢谢,在阅读您的答案后,我选择了不同的方向;我基本上是滚动我自己的弹出窗口(由游戏/应用程序启动的子窗口),我可以填充任何类型的日志,只需将JS函数直接绑定到每个DIV日志条目的点击事件。对于显示其他格式的内容可能更灵活。@bigp我很高兴看到这一点!它是开源的吗?抱歉@niahoo,我不记得我把这些文件存储在哪里了(这是我在2015年春天的最后一次工作中完成的)。@bigp haha好的,没问题:)我不明白这是如何“或多或少的定制”,因为它与
console.log('有一个很好的链接:'http://stackoverflow.com"');代码>你是对的。对于当前版本的Chrome来说,确实是一样的。但我确信,当时我写的评论只是纯链接,而%o
参数变成了链接。正如我朋友所说,“这真是聪明!”。只需添加,您还可以通过window.open()
打开窗口作为一种副作用,将…
变成一种链接。
console.log(yourObject);
> {
get __doAnythingYouWant: (...) <-- click here!
}
> "you clicked the dots!"
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;
}
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}