デベロッパーツールで定義されているグローバル変数一覧を確認したい。

Question

概要

デベロッパーツールでJavascriptで定義されているグローバル変数や、環境変数を一覧を確認したいです。

コンソールログで、キーがわかっていれば確認出来ますが、その他のグローバル変数を確認したいと考えております。

確認する方法を教えて頂けないでしょうか？

Answer 1

グローバルオブジェクト

グローバル変数とは「グローバルオブジェクトのプロパティ」です。
ブラウザでは「グローバルオブジェクト」は「window オブジェクト」を指します。
コンソールに出力する場合、[[Prototype]] にも注意して確認してください。

console.dir(window);

プロトタイプチェーンによって、[[Prototype]] 上にあるプロパティも「windowのプロパティ」として扱われ、グローバル変数となります。

• 継承とプロトタイプチェーン - JavaScript | MDN

プロパティの列挙

for-in 文は「プロトタイプチェーン上のプロパティ」を含めて列挙しますが、「列挙不可能なプロパティ」「Symbolのプロパティ」を列挙しません。

• for...in - JavaScript | MDN

Object.getOwnPropertyNames() は「列挙不可能なプロパティ」「Symbolのプロパティ」も列挙しますが、「プロトタイプチェーン上のプロパティ」を列挙しません。

• Object.getOwnPropertyNames() - JavaScript | MDN

全てを列挙するには、[[Prototype]] を辿りながら、Object.getOwnPropertyNames() を実行する必要があります。

function getPropertyNames(object) {
  const propertyNames = new Set(Object.getOwnPropertyNames(object));

  while (object = Object.getPrototypeOf(object)) {
    for (let key of Object.getOwnPropertyNames(object)) {
      propertyNames.add(key);
    }
  }

  return propertyNames;
}

console.log(getPropertyNames(window));

Re: yuki_90453 さん

Answer 2

グローバル変数はwindowオブジェクトの事なので
console.log(window);
で見れます。