Chrome DevTools 的“急切评估”预览文本将显示哪些表达式结果的一般规则到底是什么？

Question

作为自 Chrome 68 起的一个选项（自 Chrome 72 或更早版本起默认启用），DevTools 控制台会在您键入时对某些表达式进行“热切求值”结果预览。

例如，如果您输入

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

您会看到粉红色的预览

"%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 键。

然而，这不起作用，例如

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

并且（正如预期的那样）它不适用于包含循环的表达式。

是否在某个地方准确记录了哪些表达式适用于此，哪些不适用？该功能的最初公告提到

DevTools 不会立即评估表达式是否会产生副作用。

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

到底是什么决定了它将尝试计算哪些表达式？

Answer 1

他们使用一个相当复杂的白名单系统，可以在这里找到。

基本上，它们有一些标记为安全的内置函数，并遍历表达式的所有内部结构，一旦不知道某些东西是否安全就退出。

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

例如

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

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

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