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.
但这似乎并不能解释为什么它适用于
究竟是什么决定了它将尝试评估的表达方式?
他们使用了一个非常复杂的白名单系统,可以在这里找到。
基本上,他们有一些标记为安全的内置插件,并遍历表达式的所有内部,一旦他们不知道某些东西是否安全就会退出。
至于为什么你给出的两个表达式没有产生相同结果的解释......这可能相当复杂。
但我们已经注意到两者都是getter,因此它们都会调用内部函数以返回计算值。这个getter函数本身可以运行一些会产生一些副作用的代码。
例如
1 2 3 4 | const o = { _count: 0, get count() { return this._count++; } }; |
从那里,评估
现在,我不得不承认我不确定
如果你绝对想知道它是什么,那么你可能想要检查