Bug 177353 – Web Inspector: do not evaluate functions in the console unless requested

• Status: NEW
• Component: Web Inspector

[Mark Roberts]

Reproduction Steps:

  1. Write the function `foo` in the console. Type out the following and hit enter:

    function foo() {
      console.log('foo')
      throw new Error('bar')
    }

  2. Next, type out the following. Do not hit enter:

    foo().

Expected Result:

  Nothing happens.

Actual Result:

  * The console prints "foo".
  * The console does not print the error.

---

I think this is problematic behavior because the function being evaluated could have side-effects the developer did not intend the browser to execute (after all, that is what "enter" is for, right?). In the example I shared, the side-effect is just printing to the console, but in general could be anything. What if the developer is typing out some code that will make a REST request? Update LocalStorage? etc. This could be destructive.

Here is another side-effect (and how I discovered this issue): consider what happens if a developer wants to explore the getUserMedia API in the browser console. She may start typing the expression

  navigator.mediaDevices.getUserMedia({ video: true }).then(stream => ...

But, when she types the third period there (right before `then`), an "Allow 'localhost' to your camera?" prompt pops up. I do not think it is a good developer experience.

[Joseph Pecoraro]

I agree that `foo().|` shouldn't be enough to evaluate user functions that may cause side-effects.

I do also think that in the the common case this can / is useful:

    document.getElementById("header").|

Produces a list of properties on the element that it fetched.

We've had discussions in the past about side-effect versus no side-effect in autocompletion. It seems all tools are willing to invoke getters:

    Object.defineProperty(o, "x", {
        get() { console.log("GETTER"); }
    });

    js> o.x.asdf|
    GETTER // o.x.|
    GETTER // o.x.a|
    GETTER // o.x.as|
    GETTER // o.x.asd|
    GETTER // o.x.asdf|

But only some Safari invokes functions as you describe.

One thing we considered in the past was determining a list of functions that we would whitelist/blacklist to safely invoke if we know they do / don't have side-effects. For example:

    function is [native code]
    `document.query*`
    `document.get*`
    `Node.prototype.query*`
    `Node.prototype.get*`

But that list will likely be problematic to maintain. And as you point out, not all native functions starting with "get" are side-effect free so we really have to have some kind of list.