952848 - Should be able to put the console into strict mode

Status: NEW

(DevTools :: Console, enhancement, P3)

Description

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

We should be able to make it so that everything you evaluate in the console is in strict mode, if you so choose.

https://twitter.com/m_gol/status/414823826242150401

@m_gol:

> I use ES5 strict mode everywhere. It’d be great if DevTools could be set so
> that code in the console is always strict

Comment 1

[Mihai Sucan [:msucan]]

I like the idea. Is there a way to do this with the Debugger API?

Comment 2

[Florent Fayolle]

> Is there a way to do this with the Debugger API?

Maybe a good way to do this is by prepending the |"use strict";| statement at each evaluation.

I don't know if we should implement a command (|useStrict([true|false]);|), or just toggle it when the user sends |"use strict";| (without any other expression before or after). 

If we choose the latter:
- the user may want to come back to the sloppy mode, and there is no standard |"use sloppy"|. So maybe using the |useStrict(false)| command?
- the user may not understand if they compare the |"use strict";| expression alone or with another expression after (e.g. |"use strict"; foo()|).
- But the user may also not understand why |"use strict";| doesn't enter in strict mode for any other expressions they enter

So maybe when the user enters |"use strict";| only, give the user a hint that they should use the |useStrict([true|false])| command to enter/leave the strict mode instead (at least, as a first step). What do you think?

Also what would be great I think is an option to force this strict mode by default.

---

Related blog post: http://blog.getify.com/dev-consoles-considered-harmful#non-strict-mode

Florent

Comment 3

[Brian Grinstead [:bgrins]]

(In reply to fayolle-florent from comment #2)
> > Is there a way to do this with the Debugger API?
> 
> Maybe a good way to do this is by prepending the |"use strict";| statement
> at each evaluation.

That doesn't work as-is.  You can see this works without error:

"use strict"; let x = 1; let x = 2; x;
> 2

If you wrap it in a IIFE then you get the result:

(function() {"use strict"; let x = 1; let x = 2; x;})();
> TypeError: redeclaration of let x

I do wonder if 'strict mode' could be an option to evalWithDebugger though.

Comment 4

[Florent Fayolle]

> That doesn't work as-is.  You can see this works without error:
> 
> "use strict"; let x = 1; let x = 2; x;

Wait, is this really a problem of strict mode here? If I type |(function() { let a = 42; let a = 43; })()|, it throws without being in strict mode (though that's an odd issue... could that be a remaining bug of |let|?). But if I run |"use strict"; someUndeclaredVar = 42|, it throws correctly.

Florent

Comment 5

[Panos Astithas (he/him) [:past] (please ni?)]

If prepending |"use strict";| to the evaluated expression doesn't work, we should ask jimb or some SpiderMonkey folks why. We can't use an IIFE here, because it would alter the behavior of the evaluation.

I like the idea that entering |"use script";| in the console enters strict mode (i.e. the console remembers it for future evaluations). I agree that it doesn't have an equally nice way to revert to non-strict mode apart from closing and reopening the console, but I doubt that's something many users would need (or couldn't deal with it by toggling the console). Adding a toggle in the UI would be an option, but a quite heavy one for a feature with only marginal use (if at all). I'd prefer that we went on with just |"use script";| and introduce a toggle only if enough users ask for one.

Comment 6

[Brian Grinstead [:bgrins]]

(In reply to Panos Astithas [:past] from comment #5)
> If prepending |"use strict";| to the evaluated expression doesn't work, we
> should ask jimb or some SpiderMonkey folks why. We can't use an IIFE here,
> because it would alter the behavior of the evaluation.

Just double checked and it does work after all: `"use strict"; mistypedVaraible = 17;` throws as expected.

> I like the idea that entering |"use script";| in the console enters strict
> mode (i.e. the console remembers it for future evaluations). I agree that it
> doesn't have an equally nice way to revert to non-strict mode apart from
> closing and reopening the console, but I doubt that's something many users
> would need (or couldn't deal with it by toggling the console). Adding a
> toggle in the UI would be an option, but a quite heavy one for a feature
> with only marginal use (if at all). I'd prefer that we went on with just
> |"use script";| and introduce a toggle only if enough users ask for one.

We could log a message after someone types "use strict"; with a link to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode and some instructions on how to revert (either close the console, type in a string we specify, etc).

Alternatively, we could add a button to the UI but only once someone has typed "use strict".  At that point for the rest of the session, you can toggle strict mode using that button.  And there could be a pref (off by default) that would start the console in strict mode (and then the button would show up by default).

Comment 7

[Panos Astithas (he/him) [:past] (please ni?)]

All good ideas. Maybe an exitStrictMode() command wouldn't be so bad after all.

Comment 8

[Jason Orendorff [:jorendorff]]

(In reply to Panos Astithas [:past] from comment #5)
> If prepending |"use strict";| to the evaluated expression doesn't work, we
> should ask jimb or some SpiderMonkey folks why.

/me detects the lack of a ni? from across the web and zooms to the rescue

It does work!

    ◀ with(Math) {}
    ▶ undefined

    ◀ "use strict"; with (Math) {}
    ✖ SyntaxError: strict mode code may not contain 'with' statements

`let` is not a good way to detect strict mode, because stuff like `let x = 1, x = 2;` is supposed to be an error in both strict and non-strict code. Unfortunately we haven't implemented this for the global scope yet. We're working on it.

(This is one reason we have not enabled `let` support for the whole Web yet. It's not finished.)

Comment 9

[Florent Fayolle]

Attachment: 952848.patch

I played a bit with this bug. Here is a first version of my patch.

What works:
1. Typing "use strict"; in the Console
2. The exitStrictMode() command

TODO:
1. Use helperResult to let the client print the message it wants
2. Localization for the information message printed in the Console as suggested in comment 6 (I think the hard part, I may need help about this)
3. Tests

Brian, any tip on how to do this?

Florent

Comment 10

[Brian Grinstead [:bgrins]]

Comment on attachment 8600481 [details] [diff] [review]
952848.patch

Review of attachment 8600481 [details] [diff] [review]:
-----------------------------------------------------------------

FYI I can't open the tools with this patch applied.   Localizing the string should be doable, just move any messaging to browser/devtools/webconsole/webconsole.js (_executeResultCallback?), then add a definition to webconsole.properties [0], then call l10n.getStr("mystring");

[0]: https://dxr.mozilla.org/mozilla-central/source/browser/locales/en-US/chrome/browser/devtools/webconsole.properties

::: toolkit/devtools/server/actors/webconsole.js
@@ +1185,5 @@
> +
> +    // Append the "use strict"; statement to the evaluated string
> +    // if the strict mode is enabled.
> +    if (aOptions && aOptions.useStrict || this.useStrict) {
> +      actualExpr = "'use strict'; " + actualExpr;

I'm worried about the case where someone enters a string like:

function foo() { console.log("bar"); }

If I enter this string:

'use strict'; function foo() { console.log("bar"); } then this returns "use strict" as the result of the command and then foo isn't defined after that.

::: toolkit/devtools/webconsole/utils.js
@@ +1888,5 @@
>      value: payload,
>    };
>  });
>  
> +WebConsoleCommands._registerOriginal("exitStrictMode", function (aOwner) {

I wonder if we could add an enterStrictMode command to be symmetric, and handle the whole '"use strict" as a single string thing enabling strict mode' thing separately (as a follow up or separate patch)

Comment 11

[Florent Fayolle]

> I'm worried about the case where someone enters a string like:
> 
> function foo() { console.log("bar"); }

Oh, yes, good catch!

So I guess we need an option for the eval() methods of the Debugger API. And/Or change the way the Debugger evaluates the "use strict" statement (I think it should expose the defined variables in the global environment, at the contrary of the standard eval() as exposed to the webpage).

Thoughts?

Florent

Comment 12

[Brian Grinstead [:bgrins]]

(In reply to fayolle-florent from comment #11)
> > I'm worried about the case where someone enters a string like:
> > 
> > function foo() { console.log("bar"); }
> 
> Oh, yes, good catch!
> 
> So I guess we need an option for the eval() methods of the Debugger API.
> And/Or change the way the Debugger evaluates the "use strict" statement (I
> think it should expose the defined variables in the global environment, at
> the contrary of the standard eval() as exposed to the webpage).
> 
> Thoughts?

Sounds like a good ni? for :jorendorff

Comment 13

[Florent Fayolle]

Attachment: chromium_behavior_usestrict.png

> And/Or change the way the Debugger evaluates the "use strict" statement 
> (I think it should expose the defined variables in the global environment, at 
> the contrary of the standard eval() as exposed to the webpage).

BTW, that's what the Chrome DevTools do (see the attached screenshot).

Florent

Comment 14

[Jason Orendorff [:jorendorff]]

Sorry for letting this go so long.

We can add a strict-mode option in the Debugger API. The flag already exists internally: that's how we make console code automatically strict when you're paused inside strict-mode code. So it is strictly a matter of plumbing (and writing a few tests) to let the caller pass in a strictMode boolean.

Comment 15

[Brian Grinstead [:bgrins]]

Attachment: useStrict-WIP.patch

I'm just stashing this here for future reference - this implements some of the plumbing needed to allow a useStrict option to the debugger api.

I worked on it quite some months ago and IIRC, I stopped working on it because it made interacting with the console as a REPL harder.  Maybe assignments weren't persisted into the next execution, or it was just annoying to not be able to do `foo = 10` - I can't remember exactly.  Plus having a 'mode' would require some kind of UI and I don't know if it's worth it.

Comment 16

[Ashley Claymore]

Big +1 for this.

While thinking about https://github.com/tc39/proposal-record-tuple I've been wondering: if/when this is added to EcmaScript I can see people using their browser console to teach/learn about using records and tuples. I can see people potentially developing the wrong intuition that trying to assign to a record/tuple is always a silent error. Unaware of the difference to strict mode.

With constructs like es-modules and classes, and build tools like TypeScript putting code into strict-mode by default. I think it is possibly becoming less 'common knowledge' that sloppy mode is even a thing to be aware of, let alone the differences in behavior. There may come a time where it makes sense for devtool style consoles to be in strict mode by default.