Có cách nào để tự động mở rộng đối tượng trong Chrome Dev Tools không?

MERYI LẦN MỘT LẦN Tôi xem một đối tượng trong bảng điều khiển Tôi sẽ muốn mở rộng nó, vì vậy sẽ rất mệt mỏi khi phải bấm vào mũi tên để thực hiện điều này MERYI LẦN MỘT LẦN :) Có phím tắt hoặc cài đặt nào để thực hiện điều này tự động không?

Mặc dù giải pháp đề cập JSON.stringifylà khá tuyệt vời cho hầu hết các trường hợp, nhưng nó có một vài hạn chế

• Nó không thể xử lý các mục với các tham chiếu tròn trong đó console.logcó thể chăm sóc các đối tượng đó một cách thanh lịch.
• Ngoài ra, nếu bạn có một cây lớn, thì khả năng tương tác gấp đi một số nút có thể giúp việc khám phá dễ dàng hơn.

Đây là một giải pháp (sử dụng thư viện underscore.js ) giải quyết cả hai điều trên bằng cách sáng tạo (ab) bằng cách sử dụng 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);
        }
    }
})();

Hiện đang chạy:

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

Sẽ cung cấp cho bạn một cái gì đó như:

Giá trị của MAX_DEPTH có thể được điều chỉnh đến mức mong muốn và ngoài mức lồng nhau đó - nhật ký mở rộng sẽ quay trở lại console.log thông thường

Hãy thử chạy một cái gì đó như:

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

Lưu ý rằng có thể dễ dàng loại bỏ sự phụ thuộc gạch dưới - chỉ cần trích xuất các chức năng cần thiết từ nguồn .

Cũng xin lưu ý rằng đó console.grouplà không chuẩn.

Cân nhắc sử dụng console.table () .

Để mở rộng / thu gọn một nút và tất cả các con của nó,

Ctrl + Alt + Nhấp hoặc Opt + Nhấp vào biểu tượng mũi tên

(lưu ý rằng mặc dù tài liệu công cụ dev liệt kê Ctrl + Alt + Click, nhưng trên Windows tất cả những gì cần thiết là Alt + Click).

Có thể không phải là câu trả lời tốt nhất, nhưng tôi đã làm điều này ở đâu đó trong mã của tôi.

Cập nhật :

Sử dụng JSON.stringifyđể mở rộng đối tượng của bạn tự động:

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

Bạn luôn có thể tạo một chức năng phím tắt nếu đau để gõ tất cả những điều đó:

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

j(a)

Câu trả lời trước :

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

sau đó, thay vì:

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

Bạn làm:

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

Không phải là giải pháp tốt nhất, nhưng hoạt động tốt cho việc sử dụng của tôi. Các đối tượng sâu hơn sẽ không hoạt động để đó là thứ có thể được cải thiện.

tùy chọn + Nhấp vào máy Mac. Chỉ cần phát hiện ra nó bây giờ và đã thực hiện tuần của tôi! Điều này đã gây phiền nhiễu như bất cứ điều gì

Đây là phiên bản sửa đổi của câu trả lời của lorefnon, không phụ thuộc vào dấu gạch dưới:

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

Đây là giải pháp của tôi, một hàm lặp lại tất cả các thuộc tính của đối tượng, bao gồm cả mảng.

Trong ví dụ này, tôi lặp lại một đối tượng đa cấp đơn giản:

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

Bạn cũng có khả năng loại trừ phép lặp nếu các thuộc tính bắt đầu bằng một hậu tố cụ thể (ví dụ $ cho các đối tượng góc)

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

Đây là đầu ra của hàm:

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

Bạn cũng có thể thêm chức năng này vào bất kỳ trang web nào và sao chép và phân tích tất cả các thuộc tính, thử trong trang google bằng lệnh chrome:

discoverProperties(google,0,'$')

Ngoài ra, bạn có thể sao chép đầu ra của lệnh bằng lệnh chrome:

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

nếu bạn có một đối tượng lớn, JSON.opesfy sẽ báo lỗi Uncaught TypeError: Chuyển đổi cấu trúc vòng tròn thành JSON, đây là mẹo để sử dụng phiên bản sửa đổi của nó

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

bây giờ bạn có thể sử dụng JSON.stringifyOnce(obj)

Tôi thực sự không phải là người hâm mộ về cách Chrome và Safari điều khiển các đối tượng (được thiết kế quá mức). Bảng điều khiển theo mặc định ngưng tụ đối tượng, sắp xếp các khóa đối tượng khi đối tượng được mở rộng và hiển thị các chức năng bên trong từ chuỗi nguyên mẫu. Các tính năng này nên được cài đặt chọn tham gia. Các nhà phát triển theo mặc định có thể quan tâm đến kết quả thô để họ có thể kiểm tra xem mã của họ có hoạt động chính xác không; và các tính năng này làm chậm sự phát triển và đưa ra kết quả sắp xếp không chính xác.

Cách mở rộng đối tượng trong Bảng điều khiển

Đề xuất

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

   Cũng có thể sử dụng như một chức năng:

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

2. "Tùy chọn + Nhấp chuột" (Chrome trên máy Mac) và "Alt + Nhấp chuột" (Chrome trên cửa sổ)
   Tuy nhiên, nó không được hỗ trợ bởi tất cả các trình duyệt (ví dụ Safari) và Bảng điều khiển vẫn in chuỗi loại nguyên mẫu, các khóa đối tượng được tự động sắp xếp khi mở rộng, v.v.

Không được khuyến khích

Tôi sẽ không đề xuất một trong những câu trả lời hàng đầu

1. console.table() - đây chỉ là mở rộng nông và không mở rộng các đối tượng lồng nhau

2. Viết hàm underscore.js tùy chỉnh - quá nhiều chi phí cho những gì nên là một giải pháp đơn giản

Đó là một công việc xung quanh, nhưng nó làm việc cho tôi.

Tôi sử dụng trong trường hợp tự động cập nhật điều khiển / widget tùy thuộc vào hành động của người dùng. Ví dụ: khi sử dụng typeahead.js của twitter, một khi bạn tập trung ra khỏi cửa sổ, danh sách thả xuống sẽ biến mất và các đề xuất được xóa khỏi DOM.

Trong các công cụ dev, nhấp chuột phải vào nút mà bạn muốn mở rộng cho phép ngắt trên ... -> sửa đổi cây con , điều này sau đó sẽ gửi bạn đến trình gỡ lỗi. Tiếp tục nhấn F10 hoặc Shift + F11 cho đến khi bạn biến thành dom. Một khi đó đột biến thì bạn có thể kiểm tra. Vì trình gỡ lỗi đang hoạt động, giao diện người dùng của Chrome bị khóa và không đóng trình đơn thả xuống và các đề xuất vẫn còn trong DOM.

Rất thuận tiện khi xử lý sự cố bố trí các nút được chèn động được bắt đầu chèn và loại bỏ liên tục.

Một cách khác dễ dàng hơn là

• Sử dụng JSON.opesify (jsonObject)
• Sao chép và Dán kết quả vào Visual Studio Code
• Sử dụng Ctrl + K và Ctrl + F để định dạng kết quả
• Bạn sẽ thấy đối tượng mở rộng được định dạng

Tôi đã thử điều này cho các đối tượng đơn giản.

Bạn có thể thấy ở đây:

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

Cách dễ nhất:

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

Bạn cũng phải thêm mã sau vào tsconfig:

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

Tôi khẳng định không có quyền sở hữu này, chỉ cần tham khảo một nguồn hữu ích.

Bạn có thể xem phần tử của mình bằng cách truy cập document.getElementsBy ... và sau đó nhấp chuột phải và sao chép đối tượng kết quả. Ví dụ:

document.getElementsByTagName('ion-app') trả lại đối tượng javascript có thể được sao chép dán vào trình soạn thảo văn bản và nó thực hiện đầy đủ.

Tốt hơn nữa: nhấp chuột phải vào yếu tố kết quả - 'Chỉnh sửa dưới dạng html' - 'Chọn tất cả' - 'Sao chép' - 'Dán'