web-dev-qa-db-fra.com

Comment effectuer une recherche dans les variables d'étendue dans les outils de développement de Google Chrome?

J'ai défini un point d'arrêt dans une fonction javascript avec les outils pour développeurs de Google Chrome.

Je cherche une variable dans les variables de portée de la fonction avec la valeur "Fred". Comment rechercher cette valeur parmi les variables comprises dans la portée de la fonction?

javascriptgoogle-chrome-devtools
15
dangerChihuahua007

Vous pouvez définir un point d'arrêt dans Chrome DevTools sur une ligne particulière, située dans la portée/le contexte de ladite variable. Lorsque l'exécution du navigateur atteint le point d'arrêt, vous aurez accès à toutes les variables/fonctions de son étendue et de son étendue globale.

Vous pouvez également utiliser la console de Chrome et générer toutes les variables accessibles dans la portée actuelle. Pour plus d'informations sur Chrome DevTools, visitez:

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

3
xandercoded

Vous devrez ajouter un script à la console pour pouvoir réellement effectuer une recherche, car les outils de développement ne le permettent pas par défaut. Voici cette fonction pour vous ( Voir mon commentaire de résumé ci-dessous pour une mise à jour ):

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

Copiez et collez-le dans la console, puis appelez-le avec l'étendue dans laquelle vous souhaitez effectuer la recherche et la valeur que vous souhaitez rechercher. Veillez à ne pas chercher un objet trop gros, bien sûr. Si vous programmez en Angular, par exemple, et que vous suivez la règle du "toujours avoir un point", vous pouvez le parcourir avec un appel du type:

scanScope($scope.model, 'Fred');

9
Dan Overlander

manuellement dans la console de cette façon:

console.log(this);

OR

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

qui équivaut à:

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

dans la console, regardez:

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

0
user669677