如何在 Google Chrome 开发者工具中搜索范围变量？答案

【问题标题】：How do I search through scope variables in Google Chrome Developer Tools?如何在 Google Chrome 开发者工具中搜索范围变量？
【发布时间】：2023-03-28 03:10:01
【问题描述】：

我使用 Google Chrome 开发者工具在 javascript 函数中设置了一个断点。

我正在函数的作用域变量中查找值为“Fred”的变量。如何在函数范围内的变量中搜索这个值？

【问题讨论】：

标签： javascript google-chrome-devtools

【解决方案1】：

您需要将脚本添加到控制台，以便您可以实际执行搜索，因为默认情况下开发人员工具不允许这样做。这是适合您的功能（请参阅下面的我的 Gist 评论以获取更新）：

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

将其复制并粘贴到控制台中，然后使用要搜索的范围和要搜索的值调用它。 当然，请注意不要搜索太大的对象。例如，如果您使用 Angular 进行编程，并遵循“始终有一个点”的规则，则可以扫描它像这样的电话：

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

【讨论】：

顺便说一句，我制作了这个脚本的增强版（因为我自己喜欢并经常使用它）并将其发布为要点：gist.github.com/DorkForce/34eb9a1ebf14cc5b0ba7
Uncaught ReferenceError: $scope is not defined
嗨 Abdullah - $scope 是在您运行 scanScope 之前定义的吗？如果可以，请提供您输入的导致此错误的命令。谢谢-

【解决方案2】：

由于您在 Chrome DevTools 中的特定行上设置了断点，因此该断点位于所述变量的范围/上下文中。当浏览器执行到达断点时，您将可以访问其以及全局范围内的所有变量/函数。

导航到控制台选项卡并开始输入，控制台将自动完成范围内的变量。

有关 Chrome DevTools 的更多信息，请访问：

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

【讨论】：

谢谢，我确实在函数中设置了一个断点，因此可以访问变量的范围。我现在如何搜索值为“Fred”的变量？这个函数有 100 个局部变量。
将鼠标悬停在每个变量上，这将显示一个带有分配值的弹出窗口。
实际上，如果您有最新版本的 Chrome，您可以从 Eclipse 调试器访问它们：code.google.com/p/chromedevtools/wiki/… Chrome 浏览器内开发工具应该很快就会赶上这个功能。

【解决方案3】：

以这种方式手动在控制台中：

console.log(this);

或

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

相当于：

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

在控制台中查找：

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

【讨论】：