Javascriptコンソールでオブジェクトのフルネームと "パス"を取得する方法は？

Question

私が見ることができる大きなSPAがあるとします。ここに、デバッグの目的で見たい、および/または変更したいデータが入っているオブジェクトがどこかにあります。

私は、コード内でconsole.log(myObject)を置くことができ、それはいいですコンソールに示されます...しかし、どのように現在のウィンドウ内のオブジェクトのIが出力完全パスかフルネームすることができます

window.myApp.something.anothersomthing[12].myObject

、その後、私のオブジェクトを取得する：私はJSコンソールを開き、例えば入力することができますか？私が見つけられるのはタイプの印刷方法だけですが、それは助けになりません。何か案は？

Answer 1

ここでは、オブジェクトのオブジェクトグラフを検索し、このオブジェクトが検出されたパスを出力する非常に素朴な実装を紹介します。

注意点がいくつかあります：

1. スニペットで見ることができるように、私はから検索を開始するコンテキストとしてwindow.myAppに渡します。 windowを渡すと、いくつかのエラーが発生します。
   たとえば、Chromeではwindow.clientInformation.plugins[0] === window.clientInformation.plugins[0]がfalseに評価されます。これにより、既に訪問したオブジェクトを追跡できなくなります。

2. スクリプトが誤動作を起こす可能性のある実装の詳細がいくつかあります（ゲッター、プロキシ、ジェネレータなど）。例えば ​​`something`が関数の場合

function search(object, context) { 
 
    let found = []; 
 
    let visited = []; 
 

 
    let visit = (object, reference, path) => { 
 
    if (object === reference) { 
 
     found.push(path); 
 
    } 
 

 
    if (!visited.includes(reference)) { 
 
     visited.push(reference); 
 

 
     if (Array.isArray(reference)) { 
 
     for (let i = 0; i < reference.length; i++) { 
 
      visit(object, reference[i], path + '[' + i + ']'); 
 
     } 
 
     } else if (reference === Object(reference)) { // test for object 
 
     for (let key in reference) { 
 
      visit(object, reference[key], path + '.' + key); 
 
     } 
 
     } 
 
    } 
 
    } 
 

 
    visit(object, eval(context), context); 
 

 
    return found; 
 
} 
 

 
// example 
 
let myObject = {}; 
 
let myApp = { 
 
    something: { 
 
    anotherSomething: [null, null, null, null, null, null, null, null, null, null, null, null, { 
 
     myObject: myObject 
 
    }] 
 
    } 
 
}; 
 

 
window.myApp = myApp; 
 

 
console.log(search(myObject, 'window.myApp'));