17

I am debugging a large JavaScript code base where, at some point, the "console" variable gets nulled when refreshing the page.

Is there a way to set a watch on console and make JavaScript break execution when that value changes (or when a condition (console == null) is true)?

I am using Chrome on Windows 7.

user2428118
  • 7,935
  • 4
  • 45
  • 72
Janik Zikovsky
  • 3,086
  • 7
  • 26
  • 34
  • Similar question is found here:http://stackoverflow.com/questions/12577535/break-points-on-user-defined-object-properties-in-javascript – Jineesh Nov 14 '12 at 18:29
  • Solution is here: https://stackoverflow.com/questions/56582385/devtools-break-on-expression/56582386#56582386 – Vic Seedoubleyew Jun 13 '19 at 14:09

3 Answers3

22

The answer below doesn't work for window.console because console (like other browser-native environment variables) is treated specially. Any attempt to assign a value to console only "covers up" the original value; it does not replace it. You can't detect when the console value changes, but you can delete window.console to restore the original environment-supplied value.

For other values, use Object.defineProperty to define a custom setter for some global window.foobar. The setter function runs whenever window.foobar is assigned a new value:

(function() {
    var actualFoobar = window.foobar;

    Object.defineProperty(window, "foobar", {
        set: function(newValue) {
            if(newValue === null) { 
                alert("someone is clobbering foobar!"); // <-- breakpoint here!
            }

            // comment out to disallow setting window.foobar
            actualFoobar = newValue;
        },

        get: function() { return actualFoobar; }
    });

})();

Then, put a breakpoint in that setter function.

This approach will work for global variables or any object property (simply change window to the object that has the property).

apsillers
  • 112,806
  • 17
  • 235
  • 239
  • 2
    perhaps it's more informative to alert/log/document.write `console.trace()` – Elias Van Ootegem Nov 08 '12 at 15:29
  • @EliasVanOotegem An excellent suggestion; I have added it. I don't know if it's strictly necessary, since the OP just wants to add a breakpoint, but it's a fine idea nevertheless. – apsillers Nov 08 '12 at 15:33
  • I've not tested your suggestion in an actual script yet, but when pasting in the browser's console, it makes no difference at all, unless for when the entire console is reassigned. When reassigning `console.log` it still breaks – Elias Van Ootegem Nov 08 '12 at 15:36
  • Right, that's intent, isn't it? From the OP: `at some point, the "console" variable gets nulled when refreshing the page.` The OP said he wanted to watch the `console` variable, not any of its member variables, so `console.log` should be freely nullable. Am I misreading the question? Or do you mean my code is causing `console.log` to somehow *not* be nullable anymore? – apsillers Nov 08 '12 at 15:41
  • Indeed it was `console`, not `console.log` that was getting overwritten. Thanks for your code, that is a great way in general to catch a change to a global variable. Mysteriously, it does NOT get triggered in my case but its mere presence (the `get` method returning `actualConsole`) fixes the problem. – Janik Zikovsky Nov 08 '12 at 16:01
0

Browser-implemented functions can't be null-ed! Technically speaking.

If window.console.log funcion was assigned null, then just restore it deleting it!

delete console.log

That will do the job :)

EDIT: That's not an answer to your main question, but I think your question is comming from you searching a way to debug, so this answer basically skips the need to detect var changes.

alexandernst
  • 14,352
  • 22
  • 97
  • 197
0

You can't touch the console object... never, ever. The only thing that can happen is that a console variable is declared in a scope/namespace, other than the global scope, hiding the global console. You can still access it using window.console, though. Other than that, the only things I can think of that cause this are:

  • You've set the user agent in your console overrides to emulate a version of IE that doesn't support console
  • Your code is throwing an error because of some other problem with your code
  • As @alexandernst pointed out: you're overriding a property of the console object. Delete the method you're unable to access and you're fine

To find out where you need to look in the code set conditional breakpoints and watch a couple of expressions, and use the pause on uncaught exceptions button

Elias Van Ootegem
  • 74,482
  • 9
  • 111
  • 149
  • I found that overwriting `console` was effectively clobbering it. `window.console` did not go back to the original console. – Janik Zikovsky Nov 08 '12 at 16:04
  • using `window.console` would've only worked if `console` got redefined in a scope _other_ than the global scope. If `window.console` didn't work, chances are that `delete console;` or `delete window.console` would have done the trick – Elias Van Ootegem Nov 08 '12 at 16:45
  • This answer is very old, I know, but it makes no sense. Just try opening your console in dev tools and: `window.console = null`. Game over. – Madbreaks Jan 24 '20 at 19:31