Find which variable holds a value using Chrome Devtools

Question

I'm trying to access some values in a remote web application to build a Chrome extension.

For that, I'd like to find which JS variable holds a given value, and I was wondering if one can do some sort of "global search" on the values of all variables in memory.

Is this possible with any tool? Inspector, profiler, etc...?

Answer 1

All credit for this answer goes to tomwrong. See his answer for more details on the issues/improvements for this snippet.

The code

function globalSearch(startObject, value) {
    var stack = [[startObject,'']];
    var searched = [];
    var found = false;

    var isArray = function(test) {
        return Object.prototype.toString.call( test ) === '[object Array]';
    }

    while(stack.length) {
        var fromStack = stack.pop();
        var obj = fromStack[0];
        var address = fromStack[1];

        if( typeof obj == typeof value && obj == value) {
            var found = address;
            break;
        }else if(typeof obj == "object" && searched.indexOf(obj) == -1){
           if ( isArray(obj) ) {
              var prefix = '[';
              var postfix = ']';
           }else {
              var prefix = '.';
              var postfix = '';
           }
           for( i in obj ) {
              stack.push( [ obj[i], address + prefix + i + postfix ] );
           }
           searched.push(obj);
        }
    }
    return found == '' ? true : found;
}

Answer 2

You could iterate over all items in the global scope like this:

var test = 123,
    someVar = 812;

for(key in window){
    if(typeof window[key] === 'number' && window[key] == 123){
        console.log(key, window[key]);
    }
}

Combine that with some recursion, and you could theoretically iterate over all objects and their children, available in a object:

function searchObject(object, search){
    for(key in object){
        if(typeof object[key] === 'number' || typeof object[key] === 'string'){
            if(object[key] === search){
                console.log(key, window[key]);
            }
        }else if(typeof object[key] === 'object'){
            searchObject(object[key], search);
        }
    }
}

This is just a quick and dirty example. It only checks for strict equality (So no "string contains"), and it iterates over arrays with for in, which is evil. But it should give you an idea of how it works.

Don't pass window or document to this function, though. That won't work due to circular references.

---

However, you can also place a breakpoint in your code in the chrome dev tools.
You can then inspect the current value of your variables in the "Scope Variables" area on the right.