正是这些表达式会导致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控制台可按需键入某些表达式的渴望评估"结果预览.
As an option since Chrome 68 (enabled by default since Chrome 72 or perhaps earlier), the DevTools console does as-you-type "eager evaluation" result preview for certain expressions.
例如，如果您键入
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.
below, without hitting Enter.
这是行不通的，例如，
document.querySelector('.top-bar .-logo').href;
并且(如预期的那样)不适用于包含循环的表达式.
and (as would be expected) it doesn't work with expressions that contain loops.
是否在某个地方准确记录了哪些表达式可以使用该表达式，哪些不可以?此功能的初始公告
Is it documented somewhere exactly which expressions will work with this and which won't? The initial announcement of the feature mentions
DevTools不急于评估表达式是否引起副作用.
但这似乎无法解释为什么它适用于 .innerHTML 而不适用于 .href .
but that doesn't seem to explain why it would work for .innerHTML but not .href.
究竟是什么决定了它将尝试计算哪些表达式?
What, exactly, determines which expressions it will attempt to evaluate?
推荐答案
They make use of a quite complex whitelist system, that can be found here.
基本上，它们具有一些标记为安全的内置程序，并遍历表达式的所有内部内容，并在不知道某些内容是否安全时立即退出.
Basically, they have some built-ins that are marked as safe, and walk through all the internals of the expression, exiting as soon as they don't know if something is safe or not.
至于为什么您给出的两个表达式不能产生相同结果的解释……这可能非常复杂.
但是我们已经注意到，两者都是 getters ，因此都将调用内部函数以返回计算出的值.此getter函数本身可以运行一些会有副作用的代码.
As for an explanation of why the two expressions you gave didn't produce the same result... That might be quite complicated.
But we can already note that both are getters, and thus will both call an internal function in order to return the computed value. This getter function can itself run some code that will have some side-effects.
例如
const o = {
_count: 0,
get count() { return this._count++; }
};
从那里开始，评估 o.count 将增加 _count 属性，因此此吸气剂被标记为不安全.
From there, evaluating o.count would increment the _count property, and thus this getter is marked as unsafe.
现在，我不得不承认我不确定内部调用什么 .href ，以及为什么此算法会将其标记为不安全，但是显然，有一些问题...而且，如果您绝对想知道它是什么，那么您可能需要检查 document.baseURI 内部结构，这些内部结构必须从 .href 调用，并且其本身被标记为不安全.
Now, I have to admit I am not sure what .href internally calls, and why this algo will mark it as unsafe, but clearly, there is something...
And if you absolutely want to know what it is, then you may want to check document.baseURI internals which must be called from .href and which is itself marked as unsafe.
这篇关于正是这些表达式会导致Chrome DevTools的“急切评估"结果的通用规则是什么?预览文字会显示吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
