Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I search through scope variables in Google Chrome Developer Tools?

Tags:

I set a breakpoint in a javascript function with Google Chrome Developer Tools.

I am looking for a variable in the scope variables of the function with the value "Fred." How do I search for this value amongst the variables within the scope of the function?

like image 739
dangerChihuahua007 Avatar asked Jul 11 '12 17:07

dangerChihuahua007


People also ask

How do I view the scope in Chrome?

When browser execution reaches the breakpoint, you'll have access to all variable/functions within its, and the global, scope. Navigate to the console tab and start typing, the console will autocomplete variables within scope.

How do I view variables in dev tools?

Go to DevTools settings (the cog wheel). Check General > Sources > Display variable values inline while debugging.

How do I track a variable in Chrome?

To add a variable to the watch list use the add icon to the right of the section heading. This will open an inline input where you provide the variable name to watch. Once it is filled in press your Enter key to add it to the list. The watcher will show you the current value of the variable as it is added.


1 Answers

You'll need to add a script to the console so that you can actually perform a search, as the Developer Tools don't allow for this by default. Here's that function for you (See my Gist comment below for an update):

function scanScope(whatToScan, scanValue) {  	for (var key in whatToScan) {  		if (whatToScan[key] == scanValue) {  			console.log(key + ' = ' + whatToScan[key]); 		  		} else {  			if( (typeof whatToScan[key] === "object") && (key !== null) ) {   				scanScope(whatToScan[key], scanValue);  			}  		}  	}  }

Copy and paste that into the console, and then call it with the scope you want to search through and the value you want to search for. Be careful that you don't search too large an object, of course. If you're programming in Angular, for instance, and following the "always have a dot" rule, you can scan through it with a call like:

scanScope($scope.model, 'Fred');
like image 121
Dan Overlander Avatar answered Sep 20 '22 13:09

Dan Overlander