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

Question

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?

Dan Overlander · Answer 1 · 2015-11-04T21:51:28.787

12

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');

edited Nov 04 '15 at 21:51

answered Apr 10 '15 at 16:14

Dan Overlander

166
2
13

6

Incidentally I've made an enhanced version of this script (since I like and use it often, myself) and posted it as a gist: https://gist.github.com/DorkForce/34eb9a1ebf14cc5b0ba7 – Dan Overlander Apr 23 '15 at 12:55
Uncaught ReferenceError: $scope is not defined – Abdullah Nurum Jul 03 '19 at 17:27
Hi Abdullah - Is $scope defined before you ran scanScope? If you can, please provide the commands you entered that led up to this error. Thanks- – Dan Overlander Jul 05 '19 at 01:21

Alex · Accepted Answer · 2021-05-18T16:39:00.450

0

Since you've set a breakpoint within Chrome DevTools on a particular line, that's within the scope/context of said variable. 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.

For more information about Chrome DevTools visit:

https://developers.google.com/chrome-developer-tools/

edited May 18 '21 at 16:39

answered Jul 11 '12 at 17:57

Alex

34,899
5
77
90

7

Thanks, I did set a breakpoint within the function and thus have access to the scope of the variable. How do I now search for that variable with the value "Fred"? This function has 100 local variables. – dangerChihuahua007 Jul 11 '12 at 18:17
hover over each of the variables, this will show a popup with the value it is assigned. – Alex Jul 11 '12 at 18:28
Actually you can access them from Eclipse debugger if you have recent version of Chrome: http://code.google.com/p/chromedevtools/wiki/Release_0_3_6#Function_Scope_and_Primitve_Values Chrome in-browser dev-tools should soon catch up with this feature. – beefeather Jul 12 '12 at 15:09

score -2 · Answer 3 · answered Apr 19 '14 at 14:07

manually in console this way:

console.log(this);

OR

console.log({set x(){}});

which is equivalent to:

console.log(Object.defineProperty({},'x',{get: function(){}}));

in console look up:

get x: function (){} --> <function scope> --> Global: Window

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

3 Answers3

Linked