Web Inspector: Improve support for logging Proxy objects in console

• Component: Web Inspector
• Status: RESOLVED FIXED

[Joseph Pecoraro]

Summary:
Improve support for logging Proxy objects in console

  - Avoid accessing Proxy traps where possible
  - Display "Proxy" but preview the target value since that is what users will want
  - Expanding should show Internal [[Target]] and [[Handler]] properties

Test:
<script>
console.log(new Proxy({foo:1}, {
    get() { alert('error'); }
});
</script>

[Joseph Pecoraro]

<rdar://problem/28432553>

[Joseph Pecoraro]

Created attachment 291343 [details]
[PATCH] Proposed Fix

[Saam Barati]

Comment on attachment 291343 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=291343&action=review

> Source/JavaScriptCore/inspector/JSInjectedScriptHost.cpp:393
> +    while (ProxyObject* proxy = jsDynamicCast<ProxyObject*>(target))

Would it ever be worth showing the intermediate Proxy tree or is it worth reviewing until we find a non-proxy target?

[Saam Barati]

Comment on attachment 291343 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=291343&action=review

> Source/JavaScriptCore/bindings/ScriptValue.cpp:138
> +    return JSValueIsStrictEqual(toRef(scriptState), toRef(scriptState, jsValue()), toRef(scriptState, anotherValue.jsValue()));

Maybe it's worth adding a test here like where you log an object followed by a number and ensure that valueOf isn't called in the object?

[Joseph Pecoraro]

Comment on attachment 291343 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=291343&action=review

>> Source/JavaScriptCore/inspector/JSInjectedScriptHost.cpp:393
>> +    while (ProxyObject* proxy = jsDynamicCast<ProxyObject*>(target))
> 
> Would it ever be worth showing the intermediate Proxy tree or is it worth reviewing until we find a non-proxy target?

Expanding a Proxy object will show you the full Proxy tree. However the initial preview will show the final target value.

For example:

    var innerProxy = new Proxy({foo:1, bar:2}, {});
    var outerProxy = new Proxy(innerProxy, {});

Logging just the outerProxy would show something immediately useful like:

    ▶︎ Proxy {foo: 1, bar: 2}

Expanding the Proxy would show [[Target]] and [[Handler]] so you get the full tree:

    ▼ Proxy
        handler: {}
        target: ▼ Proxy
            handler: {}
            target: {foo: 1, bar: 2}

[Joseph Pecoraro]

Comment on attachment 291343 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=291343&action=review

>> Source/JavaScriptCore/bindings/ScriptValue.cpp:138
>> +    return JSValueIsStrictEqual(toRef(scriptState), toRef(scriptState, jsValue()), toRef(scriptState, anotherValue.jsValue()));
> 
> Maybe it's worth adding a test here like where you log an object followed by a number and ensure that valueOf isn't called in the object?

I'll add a test.

[Joseph Pecoraro]

Created attachment 291372 [details]
[PATCH] Proposed Fix

[Joseph Pecoraro]

<https://trac.webkit.org/changeset/207229>