Apakah ada cara untuk memperluas objek secara otomatis di Alat Dev Chrome?

SETIAP WAKTU TUNGGAL Saya melihat sebuah objek di konsol saya ingin memperluasnya, jadi itu melelahkan harus mengklik panah untuk melakukan ini SETIAP WAKTU TUNGGAL :) Apakah ada cara pintas atau pengaturan untuk melakukan ini secara otomatis?

Sementara solusi menyebutkan JSON.stringifycukup bagus untuk sebagian besar kasus, ia memiliki beberapa keterbatasan

• Itu tidak dapat menangani item dengan referensi melingkar di mana console.logdapat merawat benda-benda seperti itu secara elegan.
• Juga, jika Anda memiliki pohon besar, maka kemampuan untuk secara interaktif melipat beberapa node dapat membuat eksplorasi lebih mudah.

Berikut ini adalah solusi (menggunakan perpustakaan underscore.js ) yang memecahkan kedua hal di atas dengan kreatif (ab) menggunakan console.group:

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);
        }
    }
})();

Sedang berjalan:

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"
                }
            }
        }
    }
})

Akan memberi Anda sesuatu seperti:

Nilai MAX_DEPTH dapat disesuaikan ke level yang diinginkan, dan di luar level itu, log yang diperluas akan kembali ke console.log biasa

Coba jalankan sesuatu seperti:

x = { a: 10, b: 20 }
x.x = x 
expandedLog(x)

Perhatikan bahwa ketergantungan garis bawah dapat dengan mudah dihapus - cukup ekstrak fungsi yang diperlukan dari sumbernya .

Harap dicatat juga bahwa console.groupini tidak standar.

Pertimbangkan menggunakan console.table () .

Untuk memperluas / menutup simpul dan semua anak-anaknya,

Ctrl + Alt + Click atau Opt + Click pada ikon panah

(perhatikan bahwa meskipun dev tools doc mencantumkan Ctrl + Alt + Click, pada Windows semua yang diperlukan adalah Alt + Click).

Mungkin bukan jawaban terbaik, tapi saya sudah melakukan ini di suatu tempat dalam kode saya.

Perbarui :

Gunakan JSON.stringifyuntuk memperluas objek Anda secara otomatis:

> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
> JSON.stringify(a, true, 2)
"[
  {
    "name": "Joe",
    "age": 5
  },
  {
    "name": "John",
    "age": 6
  }
]"

Anda selalu dapat membuat fungsi pintasan jika salah mengetik semua itu:

j = function(d) {
    return JSON.stringify(d, true, 2)
}

j(a)

Jawaban sebelumnya :

pretty = function(d)
{
  var s = []
  for (var k in d) {
    s.push(k + ': ' + d[k])
  }
  console.log(s.join(', '))
}

lalu, alih-alih:

-> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
-> a
<- [Object, Object]

Anda melakukannya:

-> a.forEach(pretty)
<- name: Joe, age: 5
   name: John, age: 6

Bukan solusi terbaik, tetapi berfungsi baik untuk penggunaan saya. Objek yang lebih dalam tidak akan berfungsi sehingga itu adalah sesuatu yang dapat diperbaiki.

opsi + Klik pada Mac. Baru saja menemukannya sendiri dan telah menghasilkan minggu saya! Ini menjengkelkan seperti apa pun

Ini adalah versi modifikasi dari jawaban lorefnon yang tidak bergantung pada underscorejs:

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

Ini solusi saya, sebuah fungsi yang mengulang semua properti dari objek, termasuk array.

Dalam contoh ini saya mengulangi objek multi-level sederhana:

    var point = {
            x: 5,
            y: 2,
            innerobj : { innerVal : 1,innerVal2 : 2 },
            $excludedInnerProperties : { test: 1},
            includedInnerProperties : { test: 1}
        };

Anda juga memiliki kemungkinan untuk mengecualikan iterasi jika properti dimulai dengan akhiran tertentu (yaitu $ untuk objek sudut)

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>");

Ini adalah output dari fungsi:

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

Anda juga dapat menyuntikkan fungsi ini di halaman web mana saja dan menyalin dan menganalisis semua properti, coba di halaman google menggunakan perintah chrome:

discoverProperties(google,0,'$')

Anda juga dapat menyalin output dari perintah menggunakan perintah chrome:

copy(discoverProperties(myvariable,0,'$'))

jika Anda memiliki objek besar, JSON.stringfy akan memberikan kesalahan Uncaught TypeError: Konversi struktur melingkar ke JSON, di sini adalah trik untuk menggunakan versi modifikasi itu

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);
};

sekarang kamu bisa menggunakannya JSON.stringifyOnce(obj)

Saya benar-benar bukan penggemar bagaimana Chrome dan Safari menghibur objek (over-engineered). Konsol secara default memadatkan objek, mengurutkan kunci objek saat objek diperluas, dan menunjukkan fungsi internal dari rantai prototipe. Fitur-fitur ini harus menjadi pengaturan opt-in. Pengembang secara default mungkin tertarik pada hasil mentah sehingga mereka dapat memeriksa apakah kode mereka berfungsi dengan benar; dan fitur ini memperlambat pengembangan, dan memberikan hasil sortir yang salah.

Cara memperluas objek di Konsol

Direkomendasikan

1. console.log(JSON.stringify({}, undefined, 2));

   Bisa juga digunakan sebagai fungsi:

   console.json = object => console.log(JSON.stringify(object, undefined, 2));
   
   console.json({});
   

2. "Opsi + Klik" (Chrome pada Mac) dan "Alt + Klik" (Chrome pada Jendela)
   Namun, itu tidak didukung oleh semua browser (misalnya Safari), dan Konsol masih mencetak rantai jenis prototipe, kunci objek diurutkan secara otomatis saat diperluas, dll.

Tidak direkomendasikan

Saya tidak akan merekomendasikan salah satu jawaban teratas

1. console.table() - ini hanya ekspansi dangkal, dan tidak memperluas objek bersarang

2. Tulis fungsi underscore.js khusus - terlalu banyak overhead untuk apa yang seharusnya menjadi solusi sederhana

Ini bekerja di sekitar, tetapi bekerja untuk saya.

Saya menggunakan dalam kasus di mana kontrol / widget pembaruan otomatis tergantung pada tindakan pengguna. Misalnya, ketika menggunakan typeahead.js twitter, setelah Anda fokus keluar dari jendela, dropdown menghilang dan saran dihapus dari DOM.

Dalam alat dev klik kanan pada node yang ingin Anda buka aktifkan break on ... -> modifikasi subtree , ini kemudian akan mengirim Anda ke debugger. Terus tekan F10 atau Shift + F11 sampai Anda bermutasi. Setelah itu bermutasi maka Anda bisa memeriksanya. Karena debugger aktif, UI Chrome dikunci dan tidak menutup dropdown dan saran masih dalam DOM.

Sangat berguna saat mengatasi masalah tata letak node yang dimasukkan secara dinamis yang mulai disisipkan dan dihapus secara konstan.

Cara lain yang lebih mudah adalah

• Gunakan JSON.stringify (jsonObject)
• Salin dan tempel hasilnya ke Visual Studio Code
• Gunakan Ctrl + K dan Ctrl + F untuk memformat hasilnya
• Anda akan melihat objek diperluas yang diformat

Saya sudah mencoba ini untuk objek sederhana.

Anda bisa lihat di sini:

https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/

Cara termudah:

import SampleJson from '../../assets/SampleJson.json';
...
console.log(SampleJson);

Anda juga harus menambahkan kode berikut ke tsconfig:

{  "compilerOptions": {  ..."resolveJsonModule": true, "esModuleInterop": true... } }

Saya tidak mengklaim kepemilikan atas hal ini, hanya merujuk sumber yang bermanfaat.

Anda dapat melihat elemen Anda dengan mengakses document.getElementsBy ... lalu klik kanan dan salin objek yang dihasilkan. Sebagai contoh:

document.getElementsByTagName('ion-app') mengembalikan objek javascript yang dapat disalin disalin ke editor teks dan melakukannya secara penuh.

Lebih baik lagi: klik kanan pada elemen yang dihasilkan - 'Edit as html' - 'Pilih semua' - 'Salin' - 'Tempel'