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

Question

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

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

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

Answer 2

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

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

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

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

Answer 3

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

console.log(this);

或者

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

这相当于：

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

在控制台查找：

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