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

Question

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

我在函数的范围变量中寻找一个变量值为"Fred".如何在函数范围内的变量中搜索此值？

Answer 1

您需要将一个脚本添加到控制台,以便您可以实际执行搜索,因为默认情况下开发人员工具不允许这样做.这是你的功能(请参阅下面的我的要点评论以获得更新):

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

Answer 2

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

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

有关 Chrome 开发者工具的更多信息，请访问：

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