警告ボックス内のオブジェクトを検査するにはどうすればよいですか?通常、オブジェクトに警告すると、ノード名がスローされます。
alert(document);
しかし、アラートボックスでオブジェクトのプロパティとメソッドを取得したいと考えています。可能であれば、どうすればこの機能を実現できますか?または他の提案はありますか?
特に、console.logとFirebugが利用できない運用環境向けのソリューションを探しています。
JSON.stringify
役に立ちます。
警告ボックス内のオブジェクトを検査するにはどうすればよいですか?通常、オブジェクトに警告すると、ノード名がスローされます。
alert(document);
しかし、アラートボックスでオブジェクトのプロパティとメソッドを取得したいと考えています。可能であれば、どうすればこの機能を実現できますか?または他の提案はありますか?
特に、console.logとFirebugが利用できない運用環境向けのソリューションを探しています。
JSON.stringify
役に立ちます。
回答:
for
- in
オブジェクトまたはアレイ内の各プロパティのループ。このプロパティを使用して、値を取得および変更できます。
注:「スパイ」を使用しない限り、プライベートプロパティは検査に使用できません。基本的に、オブジェクトをオーバーライドして、オブジェクトのコンテキスト内でfor-inループを実行するコードを記述します。
forは次のようになります。
for (var property in object) loop();
いくつかのサンプルコード:
function xinspect(o,i){
if(typeof i=='undefined')i='';
if(i.length>50)return '[MAX ITERATIONS]';
var r=[];
for(var p in o){
var t=typeof o[p];
r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+' ') : o[p]+''));
}
return r.join(i+'\n');
}
// example of use:
alert(xinspect(document));
編集:少し前に、私は自分の検査官を書きました、あなたが興味があれば、私は共有させていただきます。
編集2:まあ、とにかく私は1つを書いた。
どの程度alert(JSON.stringify(object))
最新のブラウザで?
の場合TypeError: Converting circular structure to JSON
、ここに他のオプションがあります:循環参照がある場合でも、DOMノードをJSONにシリアル化する方法は?
ドキュメンテーション:JSON.stringify()
出力のフォーマットまたは見栄えに関する情報を提供します。
alert(JSON.stringify(object, null, 4)
。ここで、4
インデントに使用するスペースの数です。
stringify
メソッドを表示しません:JSON.stringify({f: ()=>{}}) => "{}"
。また、オブジェクトがtoJSON
メソッドを実装する場合、そのメソッドが返すものを取得します。これは、オブジェクトを検査する場合には役に立ちませんJSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'
。
console.dir(object)
Firebugプラグインの使用
console.dir
機能を知りませんでした。Firebugでオブジェクト全体を表示できなくなった理由を理解できませんでした。これでソートされました。ありがとう!
console.log
表示の便利さに加えて、これに他の利点があるかどうかを知る必要があります
いくつかの方法があります:
1. typeof tells you which one of the 6 javascript types is the object.
2. instanceof tells you if the object is an instance of another object.
3. List properties with for(var k in obj)
4. Object.getOwnPropertyNames( anObjectToInspect )
5. Object.getPrototypeOf( anObject )
6. anObject.hasOwnProperty(aProperty)
コンソールのコンテキストでは、.constructorまたは.prototypeが役立つ場合があります。
console.log(anObject.constructor );
console.log(anObject.prototype ) ;
コンソールを使用します。
console.log(object);
または、html dom要素を検査する場合は、console.dir(object)を使用します。例:
let element = document.getElementById('alertBoxContainer');
console.dir(element);
または、使用できるjsオブジェクトの配列がある場合:
console.table(objectArr);
大量のconsole.log(objects)を出力している場合は、次のように書くこともできます
console.log({ objectName1 });
console.log({ objectName2 });
これは、コンソールに書き込まれたオブジェクトにラベルを付けるのに役立ちます。
console
スタイリングstackoverflow.com/q/7505623/1480391を使用していて、互換性がないため使用できません
var str = "";
for(var k in obj)
if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
str += k + " = " + obj[k] + "\n";
alert(str);
これはクリスチャンの優れた答えの露骨なぼったくりです。私はそれをもう少し読みやすくしました:
/**
* objectInspector digs through a Javascript object
* to display all its properties
*
* @param object - a Javascript object to inspect
* @param result - a string of properties with datatypes
*
* @return result - the concatenated description of all object properties
*/
function objectInspector(object, result) {
if (typeof object != "object")
return "Invalid object";
if (typeof result == "undefined")
result = '';
if (result.length > 50)
return "[RECURSION TOO DEEP. ABORTING.]";
var rows = [];
for (var property in object) {
var datatype = typeof object[property];
var tempDescription = result+'"'+property+'"';
tempDescription += ' ('+datatype+') => ';
if (datatype == "object")
tempDescription += 'object: '+objectInspector(object[property],result+' ');
else
tempDescription += object[property];
rows.push(tempDescription);
}//Close for
return rows.join(result+"\n");
}//End objectInspector
これは、より読みやすいオブジェクトインスペクタです。コードの記述には時間がかかるため、http://etto-aa-js.googlecode.com/svn/trunk/inspector.jsからダウンロードできます。
このように使用してください:
document.write(inspect(object));
console.log
FirefoxやChromeで