Chrome Dev Toolsでオブジェクトを自動展開する方法はありますか？
毎回、コンソールでオブジェクトを表示したいので、それを展開するために矢印をクリックするのは面倒です：毎回これを自動的に行うショートカットまたは設定はありますか？
solution に言及する JSON.stringify はほとんどの場合非常に優れていますが、いくつかの制限があります
console.logがそのようなオブジェクトをエレガントに処理できる循環参照を持つアイテムを処理できません。- また、大きなツリーがある場合は、いくつかのノードをインタラクティブに折りたたむことができるため、探索が簡単になります。
console.group を使用して創造的に（ab）を使用して上記の両方を解決するソリューション（ nderscore.js ライブラリを使用）を次に示します。
expandedLog = (function(){
var MAX_DEPTH = 100;
return function(item, depth){
depth = depth || 0;
if (depth > MAX_DEPTH ) {
console.log(item);
return;
}
if (_.isObject(item)) {
_.each(item, function(value, key) {
console.group(key + ' : ' +(typeof value));
expandedLog(value, depth + 1);
console.groupEnd();
});
} else {
console.log(item);
}
}
})();
現在実行中：
expandedLog({
"glossary": {
"title": "example glossary",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": ["GML", "XML"]
},
"GlossSee": "markup"
}
}
}
}
})
次のようなものを提供します：
MAX_DEPTHの値は、必要なレベルに調整でき、ネストのそのレベルを超えます-拡張ログは通常のconsole.logにフォールバックします
次のようなものを実行してみてください。
x = { a: 10, b: 20 }
x.x = x
expandedLog(x)
アンダースコアの依存関係は簡単に削除できることに注意してください。必要な関数を the source から抽出するだけです。
また、console.groupは非標準であることに注意してください。
console.table（） の使用を検討してください。
ノードとそのすべての子を展開/縮小するには、
Ctrl + Alt +クリックまたはOpt +クリック矢印アイコン
（ dev tools doc はCtrl + Alt + Clickをリストしますが、WindowsではAlt + Clickのみが必要です）。
最良の答えではないかもしれませんが、私はコードのどこかでこれを行っています。
更新：
つかいます JSON.stringifyオブジェクトを自動的に展開するには：
> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
> JSON.stringify(a, true, 2)
"[
{
"name": "Joe",
"age": 5
},
{
"name": "John",
"age": 6
}
]"
それをすべて入力するのが痛い場合は、いつでもショートカット関数を作成できます。
j = function(d) {
return JSON.stringify(d, true, 2)
}
j(a)
前回答：
pretty = function(d)
{
var s = []
for (var k in d) {
s.Push(k + ': ' + d[k])
}
console.log(s.join(', '))
}
次に、代わりに：
-> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
-> a
<- [Object, Object]
あなたがやる：
-> a.forEach(pretty)
<- name: Joe, age: 5
name: John, age: 6
最良の解決策ではありませんが、私の使用には適しています。より深いオブジェクトは機能しないため、改善することができます。
以下は、アンダースコアに依存しないlorefnonの答えの修正版です。
var expandedLog = (function(MAX_DEPTH){
return function(item, depth){
depth = depth || 0;
isString = typeof item === 'string';
isDeep = depth > MAX_DEPTH
if (isString || isDeep) {
console.log(item);
return;
}
for(var key in item){
console.group(key + ' : ' +(typeof item[key]));
expandedLog(item[key], depth + 1);
console.groupEnd();
}
}
})(100);
option + Macをクリックします。今自分でそれを発見し、私の週を作りました！これは何と同じくらい迷惑です
これが私の解決策です。配列を含むオブジェクトのすべてのプロパティを反復する関数です。
この例では、単純なマルチレベルオブジェクトを反復処理します。
var point = {
x: 5,
y: 2,
innerobj : { innerVal : 1,innerVal2 : 2 },
$excludedInnerProperties : { test: 1},
includedInnerProperties : { test: 1}
};
プロパティが特定の接尾辞で始まる場合、反復を除外する可能性もあります（つまり、angularオブジェクト）の$
discoverProperties = function (obj, level, excludePrefix) {
var indent = "----------------------------------------".substring(0, level * 2);
var str = indent + "level " + level + "\r\n";
if (typeof (obj) == "undefined")
return "";
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
var propVal;
try {
propVal = eval('obj.' + property);
str += indent + property + "(" + propVal.constructor.name + "):" + propVal + "\r\n";
if (typeof (propVal) == 'object' && level < 10 && propVal.constructor.name != "Date" && property.indexOf(excludePrefix) != 0) {
if (propVal.hasOwnProperty('length')) {
for (var i = 0; i < propVal.length; i++) {
if (typeof (propVal) == 'object' && level < 10) {
if (typeof (propVal[i]) != "undefined") {
str += indent + (propVal[i]).constructor.name + "[" + i + "]\r\n";
str += this.discoverProperties(propVal[i], level + 1, excludePrefix);
}
}
else
str += indent + propVal[i].constructor.name + "[" + i + "]:" + propVal[i] + "\r\n";
}
}
else
str += this.discoverProperties(propVal, level + 1, excludePrefix);
}
}
catch (e) {
}
}
}
return str;
};
var point = {
x: 5,
y: 2,
innerobj : { innerVal : 1,innerVal2 : 2 },
$excludedInnerProperties : { test: 1},
includedInnerProperties : { test: 1}
};
document.write("<pre>" + discoverProperties(point,0,'$')+ "</pre>");関数の出力は次のとおりです。
level 0
x(Number):5
y(Number):2
innerobj(Object):[object Object]
--level 1
--innerVal(Number):1
--innerVal2(Number):2
$excludedInnerProperties(Object):[object Object]
includedInnerProperties(Object):[object Object]
--level 1
--test(Number):1
この関数を任意のWebページに挿入し、すべてのプロパティをコピーして分析し、chromeコマンドを使用してGoogleページで試してください：
discoverProperties(google,0,'$')
また、chromeコマンドを使用してコマンドの出力をコピーできます。
copy(discoverProperties(myvariable,0,'$'))
@Hady Your Macソリューションは、適切なWindowsソリューションを示してくれました！展開したい最上位ノード（私の場合は）でAltキーを押しながら左クリックすると、そのタグ内のすべてが展開されます。
大きなオブジェクトがある場合、JSON.stringfyはUncaught TypeErrorエラーを返します：循環構造をJSONに変換します。
_JSON.stringifyOnce = function(obj, replacer, indent){
var printedObjects = [];
var printedObjectKeys = [];
function printOnceReplacer(key, value){
if ( printedObjects.length > 2000){ // browsers will not print more than 20K, I don't see the point to allow 2K.. algorithm will not be fast anyway if we have too many objects
return 'object too long';
}
var printedObjIndex = false;
printedObjects.forEach(function(obj, index){
if(obj===value){
printedObjIndex = index;
}
});
if ( key == ''){ //root element
printedObjects.Push(obj);
printedObjectKeys.Push("root");
return value;
}
else if(printedObjIndex+"" != "false" && typeof(value)=="object"){
if ( printedObjectKeys[printedObjIndex] == "root"){
return "(pointer to root)";
}else{
return "(see " + ((!!value && !!value.constructor) ? value.constructor.name.toLowerCase() : typeof(value)) + " with key " + printedObjectKeys[printedObjIndex] + ")";
}
}else{
var qualifiedKey = key || "(empty key)";
printedObjects.Push(value);
printedObjectKeys.Push(qualifiedKey);
if(replacer){
return replacer(key, value);
}else{
return value;
}
}
}
return JSON.stringify(obj, printOnceReplacer, indent);
};
_これでJSON.stringifyOnce(obj)を使用できます
その回避策が、それは私のために動作します。
ユーザーのアクションに応じてコントロール/ウィジェットが自動更新される場合に使用します。たとえば、Twitterのtypeahead.jsを使用している場合、ウィンドウの外にフォーカスすると、ドロップダウンが消え、提案がDOMから削除されます。
開発ツールで、展開するノードを右クリックして、enable break on ...-> subtree modificationを選択すると、デバッガーに送信されます。 F1またはShift + F11を押すと、domが変化します。それが変異したら、検査することができます。デバッガーがアクティブであるため、ChromeのUIはロックされ、ドロップダウンを閉じず、提案はまだDOMにあります。
常に挿入および削除を開始する動的に挿入されたノードのレイアウトをトラブルシューティングするときに非常に便利です。
別の簡単な方法は
- JSON.stringify（jsonObject）を使用します
- 結果をコピーしてVisual Studio Codeに貼り付けます
- Ctrl + KおよびCtrl + Fを使用して結果をフォーマットします
- フォーマットされた拡張オブジェクトが表示されます
単純なオブジェクトに対してこれを試しました。
私は実際にはChromeとSafariコンソールオブジェクト（オーバーエンジニアリング）のファンではありません。コンソールはデフォルトでオブジェクトを圧縮し、オブジェクトが展開されるときにオブジェクトキーをソートし、内部を表示しますこれらの機能はオプトイン設定である必要があります。開発者はデフォルトで生の結果に興味があるため、コードが正常に機能しているかどうかを確認できます。
コンソールでオブジェクトを展開する方法
推奨
console.log(JSON.stringify({}, undefined, 2));関数としても使用できます：
_
console.json = object => console.log(JSON.stringify(object, undefined, 2)); console.json({});_- 「Option + Click」（MacのChrome）および「Alt + Click」（WindowsのChrome）
ただし、すべてのブラウザ（Safariなど）でサポートされているわけではなく、Consoleはプロトタイプタイプチェーンを引き続き印刷し、オブジェクトキーは展開時に自動ソートされます。
非推奨
どちらの答えもお勧めしません
console.table()-これは浅い展開のみであり、ネストされたオブジェクトを展開しませんカスタムのunderscore.js関数を作成する-単純なソリューションにすべきオーバーヘッドが大きすぎる
ここで見ることができます：
https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/
最も簡単な方法：
import SampleJson from '../../assets/SampleJson.json';
...
console.log(SampleJson);
また、tsconfigに次のコードを追加する必要があります。
{ "compilerOptions": { ..."resolveJsonModule": true, "esModuleInterop": true... } }
私はこれの所有権を主張せず、単に参考資料を参照しています。