关于javascript:确切地说,哪些表达式结果会导致Chrome DevTools的“热切评估”预览文本显示?

Precisely what are the general rules for which expressions results Chrome DevTools' “Eager evaluation” preview text will show?

作为Chrome 68以来的一个选项(默认情况下自Chrome 72或更早版本启用),DevTools控制台会为某些表达式执行"急切评估"结果预览。

例如,如果您输入

1
encodeURIComponent(document.querySelector('.top-bar .-logo').innerHTML);

你得到一个粉红色的预览

1
"%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22-img%20_glyph%22%3EStack%20Overflow%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20"

在下面,没有按Enter键。

但是,这不起作用

1
document.querySelector('.top-bar .-logo').href;

和(如预期的那样)它不适用于包含循环的表达式。

是否在某处确切地记录了哪些表达式适用于此,哪些不适用? 该功能的最初公告提到

DevTools does not eager evaluate if the expression causes side effects.

但这似乎并不能解释为什么它适用于.innerHTML但不适用于.href

究竟是什么决定了它将尝试评估的表达方式?


他们使用了一个非常复杂的白名单系统,可以在这里找到。

基本上,他们有一些标记为安全的内置插件,并遍历表达式的所有内部,一旦他们不知道某些东西是否安全就会退出。

至于为什么你给出的两个表达式没有产生相同结果的解释......这可能相当复杂。
但我们已经注意到两者都是getter,因此它们都会调用内部函数以返回计算值。这个getter函数本身可以运行一些会产生一些副作用的代码。

例如

1
2
3
4
const o = {
  _count: 0,
  get count() { return this._count++; }
};

从那里,评估o.count将增加_count属性,因此此getter被标记为不安全。

现在,我不得不承认我不确定.href内部调用什么,以及为什么这个算法会将其标记为不安全,但很明显,有一些东西......
如果你绝对想知道它是什么,那么你可能想要检查document.baseURI内部,它必须从.href调用,并且它本身被标记为不安全。