As a byproduct of code optimization done by modern browsers, while debugging, you can't "see" all variables which "factually" are in scope. This is well known and has been addressed in a previous question here on SO. This feature, while most certainly useful in production is annoying me a lot during development, it slows me down (that should be obvious.)

Now my question is, is there any way to turn off this behavior? Can I edit some configuration file, or is there a browser plugin, or maybe there is a "special build version for developers" of the browser executable? I love typing my code into the console right away when I'm writing new code, so this is really bugging me.

UPDATE / EDIT

Here is a partial solution, credit to Paul1365972.

You have to start the chrome browser from the command line, with special options, like so:

1. Close Chrome completely
2. Run Chrome from console with "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" --js-flags="--allow-natives-syntax" that's for windows other OS similar.
3. Open developer console and execute "%GetHeapUsage()". If you properly started Chrome with the option, a number will be logged to the console, otherwise you'll get a syntax error.

With this command line flag, you can 'talk to the V8' engine with commands starting with %, which are syntax errors in plain JavaScript. A list to available V8 commands of this kind was given in Paul's answer.

There is %NeverOptimizeFunction() on that list, which is something which looked like the thing I'd just have to call and be done with it. Unfortunately, that function does not do what I hoped for, as demonstrated in next screenshot.

(((The other link from Paul's answer (v8-natives node module) is of no importance to us here in this context. All it does is it wraps one-liners around the "%" function calls so the code doesn't crash browsers which are not v8.)))

(((I remember a time when this worked (when this optimization wasn't invented/implemented yet). I don't know how long ago. Ten years? 15 years? Something like that. What was the last Chrome version (if any) and what was the last firefox version (more sure here that it exists) where you could do? It won't get you the bounty, but it will get you an upvote, if you happen to know and post it as an answer.)))

THE SOLUTION

THANK YOU PETR SRNICEK

NEW QUESTION

While Petr's solution helps a lot, it is not perfect. This question is getting too long, so I posted a new question on how Petr's solution can be improved. (I could of course edit this question here, but that would feel "unhistorical", if you know what I mean.)

As a byproduct of code optimization done by modern browsers, while debugging, you can't "see" all variables which "factually" are in scope. This is well known and has been addressed in a previous question here on SO. This feature, while most certainly useful in production is annoying me a lot during development, it slows me down (that should be obvious.)

Now my question is, is there any way to turn off this behavior? Can I edit some configuration file, or is there a browser plugin, or maybe there is a "special build version for developers" of the browser executable? I love typing my code into the console right away when I'm writing new code, so this is really bugging me.

UPDATE / EDIT

Here is a partial solution, credit to Paul1365972.

You have to start the chrome browser from the command line, with special options, like so:

1. Close Chrome completely
2. Run Chrome from console with "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" --js-flags="--allow-natives-syntax" that's for windows other OS similar.
3. Open developer console and execute "%GetHeapUsage()". If you properly started Chrome with the option, a number will be logged to the console, otherwise you'll get a syntax error.

With this command line flag, you can 'talk to the V8' engine with commands starting with %, which are syntax errors in plain JavaScript. A list to available V8 commands of this kind was given in Paul's answer.

There is %NeverOptimizeFunction() on that list, which is something which looked like the thing I'd just have to call and be done with it. Unfortunately, that function does not do what I hoped for, as demonstrated in next screenshot.

(((The other link from Paul's answer (v8-natives node module) is of no importance to us here in this context. All it does is it wraps one-liners around the "%" function calls so the code doesn't crash browsers which are not v8.)))

(((I remember a time when this worked (when this optimization wasn't invented/implemented yet). I don't know how long ago. Ten years? 15 years? Something like that. What was the last Chrome version (if any) and what was the last firefox version (more sure here that it exists) where you could do? It won't get you the bounty, but it will get you an upvote, if you happen to know and post it as an answer.)))

THE SOLUTION

THANK YOU PETR SRNICEK

NEW QUESTION

While Petr's solution helps a lot, it is not perfect. This question is getting too long, so I posted a new question on how Petr's solution can be improved. (I could of course edit this question here, but that would feel "unhistorical", if you know what I mean.)

• javascript
• google-chrome
• optimization
• console
• v8

• unintended consequences, chapter tenthousandone. this optimization has a negative effect on my coding style. I find myself using the old fashioned for loop (instead of .map, .forEach, .reduce) more than I otherwise would, just so I avoid running into this issue. – mathheadinclouds Commented Nov 18, 2019 at 19:19
• The v8-natives library just wraps the important % calls in code in a simple library that should be noops in a browser or node which was not started in the special --allow-natives-syntax flag.. – Nathanael Commented Nov 27, 2019 at 0:26
• I ran some tests, the 'bodyOnLoad' function isn't optimized anyways; so using the internals commands to try and force it to de-optimize doesn't do anything. – Nathanael Commented Nov 27, 2019 at 4:04
• @Nathanael: The important call is %NeverOptimizeFunction(foo) I just called it also for bodyOnload, "just because", thinking "well, it won't hurt". The issue is that foo is NOT deoptimized in the way I was hoping for. Variable lorem is invisible. Let's say I want to write the some code which is to go into function foo. Instead of typing it into my text editor, I type it into the dev console (while the debugger is sitting at foo), see if it does what I want, and then copy/paste it from console to my text editor. That is how I love to work. And can't. Because of the optimization. Get it? – mathheadinclouds Commented Nov 27, 2019 at 5:15
• 1 I spent several ours experimenting with various --js-flags (including several TurboFan-related ones) as well as with several V8 native commands before Paul1365972 posted his answer but I was not able to achieve the desired behaviour. I believe that this approach might be a dead end. It might be worthwhile to add a [v8] tag to this question. Somebody with a deep understanding of the inner workings of V8 might be able to clarify whether this is the way to go or perhaps point you in the correct direction. – Petr Srníček Commented Nov 27, 2019 at 17:39

3 Answers 3

You can get access to all variables by wrapping the debugger statement in an eval like this: eval("debugger;");. This hacky solution adds another anonymous function to the call stack though and it is obviously of no use for breakpoints that are set manually in DevTools.

This does not seem to be a very good solution, but since it is the only one that achieves the intended behaviour so far, I am posting it as an answer.

Google Chrome uses the V8 JS-Engine, you can enable native calls to it with the --allow-natives-syntax flag, this exposes many useful debugging functions (full list here) like the one you are looking for: %NeverOptimizeFunction(). Without this flag, these calls would be illegal syntax so be careful when deploying (or use the v8-Natives library).

To enable this feature just open chrome with --js-flags="--allow-natives-syntax" (only use this for debugging of trusted websites, as this can give untrusted js code access to things you really do not want it to have access to).

I really hope this question has a REAL answer. What follows isn't a real answer, it's a makeshift. I wrote a helper tool with which you can create stupid helper code of the form if (false) { console.log(variables, from, closures); } (see screen shot in question) using static analysis - you paste in your code, the stupid statement is created, you can copy it, then you don't need to type it. I don't know if that helps a lot, since all this copying and pasting also takes time, but that's what I got.

fiddle