This post talks about some basics of inspecting objects. You're assumed to have at least little Javascript coding proficiency(beginning Javascript coder having written at least few basic Javascript codes).
The Fundamentals
Inspecting Complicated/Large Objects
Inspecting Objects With Cyclic Linkages
Reducing Object Inspection Results
That's all for now. I hope this can help you grasp these basic knowledge. For those comprehending object inspections, feel free to correct me if there's anything wrong.
For those wanting to have a solid understanding to object inspections, I might open a more advanced topic for that later.
The Fundamentals
You probably know console.log(obj) prints a string showing the contents of obj in human readable forms, which can be really simple, like:
The console will show(Firefox 41.0.2):
If the object to be inspected is an Array/Object:
The console will show(Firefox 41.0.2):
The Array ["A", "B"] contains "A" and "B", and the latters are directly linked to the former; Similarly, The Object {a: 1, b: 2} contains the property name-value pairs a: 1 and b: 2, and the latters are directly linked to the former.
Code:
console.log("1", "2");
Code:
1 2
Code:
console.log(["A", "B"]);
console.log({a: 1, b: 2});
Code:
Array [ "A", "B" ]
Object { a: 1, b: 2 }Inspecting Complicated/Large Objects
Some objects aren't simple nor small enough to be completely shown using console.log(obj) alone. For instance:
Using console.log(test_obj_1); will show this in the console(Firefox 41.0.2):
It's crystal clear and obvious that none of the test_obj_prop_i_j are logged at all, as they're directly linked to test_obj_prop_i, which are directly linked to test_obj_1, meaning all test_obj_prop_i_j are indirectly linked to test_obj_1. This implies that console.log(obj) only logs what's directly linked to obj.
1 way to log all indirectly linked objects as well as directly linked ones is to use obj.toSource(). For instance, using console.log(test_obj_1.toSource()); will show this in the console(Firefox 41.0.2):
Code:
var test_obj_1 ={
test_obj_prop_1:{
test_obj_prop_1_1:{},
test_obj_prop_1_2:{},
},
test_obj_prop_2:{
test_obj_prop_2_1:{},
test_obj_prop_2_2:[],
},
test_obj_prop_3:{
test_obj_prop_3_1:[],
test_obj_prop_3_2:[],
},
test_obj_prop_4:[[],[]],
test_obj_prop_5:[[],{}],
test_obj_prop_6:[{},{}],
test_obj_prop_7:[],
test_obj_prop_8:{},
};
Code:
Object { test_obj_prop_1: Object, test_obj_prop_2: Object, test_obj_prop_3: Object, test_obj_prop_4: Array[2], test_obj_prop_5: Array[2], test_obj_prop_6: Array[2], test_obj_prop_7: Array[0], test_obj_prop_8: Object }1 way to log all indirectly linked objects as well as directly linked ones is to use obj.toSource(). For instance, using console.log(test_obj_1.toSource()); will show this in the console(Firefox 41.0.2):
Code:
({test_obj_prop_1:{test_obj_prop_1_1:{}, test_obj_prop_1_2:{}}, test_obj_prop_2:{test_obj_prop_2_1:{}, test_obj_prop_2_2:[]}, test_obj_prop_3:{test_obj_prop_3_1:[], test_obj_prop_3_2:[]}, test_obj_prop_4:[[], []], test_obj_prop_5:[[], {}], test_obj_prop_6:[{}, {}], test_obj_prop_7:[], test_obj_prop_8:{}})Inspecting Objects With Cyclic Linkages
In some incredibly extreme cases, you might have to log some exceptionally insane objects like this, however:
The below codes:
Will show this in the console(Firefox 41.0.2):
Now test_obj_prop_9 stores undefined due to the source test_obj_prop_9: (void 0). That's because now test_obj_prop_9 is indirectly linked to test_obj_1, which is directly linked to test_obj_prop_9, meaning their linkages become cyclic. It means that whenever there's undefined/(void 0) that shouldn't exist, the existence of cyclic linkages is a reasonably educated speculation.
Cyclic linkages have to be stopped right upon being detected, otherwise the object will be infinitely being linked(directly or indirectly) to itself, which can cause extraordinarily serious problems.
Code:
var test_obj_1 = {
test_obj_prop_1:{
test_obj_prop_1_1:{},
test_obj_prop_1_2:{},
},
test_obj_prop_2:{
test_obj_prop_2_1:{},
test_obj_prop_2_2:[],
},
test_obj_prop_3:{
test_obj_prop_3_1:[],
test_obj_prop_3_2:[],
},
test_obj_prop_4:[[],[]],
test_obj_prop_5:[[],{}],
test_obj_prop_6:[{},{}],
test_obj_prop_7:[],
test_obj_prop_8:{},
test_obj_prop_9: test_obj_1,
};
Code:
console.log(test_obj_1);
console.log(test_obj_1.toSource());
Code:
Object { test_obj_prop_1: Object, test_obj_prop_2: Object, test_obj_prop_3: Object, test_obj_prop_4: Array[2], test_obj_prop_5: Array[2], test_obj_prop_6: Array[2], test_obj_prop_7: Array[0], test_obj_prop_8: Object, test_obj_prop_9: undefined }
({test_obj_prop_1:{test_obj_prop_1_1:{}, test_obj_prop_1_2:{}}, test_obj_prop_2:{test_obj_prop_2_1:{}, test_obj_prop_2_2:[]}, test_obj_prop_3:{test_obj_prop_3_1:[], test_obj_prop_3_2:[]}, test_obj_prop_4:[[], []], test_obj_prop_5:[[], {}], test_obj_prop_6:[{}, {}], test_obj_prop_7:[], test_obj_prop_8:{}, test_obj_prop_9: (void 0)})Cyclic linkages have to be stopped right upon being detected, otherwise the object will be infinitely being linked(directly or indirectly) to itself, which can cause extraordinarily serious problems.
Reducing Object Inspection Results
Sometimes though, you might be just interested in some parts of the inspected object, but that object's simply so large that those uninterested parts become annoying to you. For instance, suppose you're just interested in all arrays directly or indirectly linked to test_obj_1, so you'll want the inspection result to be reduced to this:
Coming up with this reduced inspection result can be done by eliminating all uninterested parts from the bottom up. For instance, let's start with the original inspection result:
As test_obj_prop_1_1, test_obj_prop_1_2, test_obj_prop_2_1, the empty Objects directly linked to test_obj_prop_5 and test_obj_prop_6, and test_obj_prop_8 aren't Arrays and are empty, it's sure that they're uninterested and can thus be safely deleted(test_obj_prop_9 should be deleted too as it's certainly problematic):
Now test_obj_prop_1 also isn't an Array and is empty, so again it's sure that it's uninterested and can thus be safely deleted as well:
Now the reduced inspection result only shows the interested parts.
Code:
({test_obj_prop_2:{test_obj_prop_2_2:[]}, test_obj_prop_3:{test_obj_prop_3_1:[], test_obj_prop_3_2:[]}, test_obj_prop_4:[[], []], test_obj_prop_5:[[]], test_obj_prop_6:[], test_obj_prop_7:[]})
Code:
({test_obj_prop_1:{test_obj_prop_1_1:{}, test_obj_prop_1_2:{}}, test_obj_prop_2:{test_obj_prop_2_1:{}, test_obj_prop_2_2:[]}, test_obj_prop_3:{test_obj_prop_3_1:[], test_obj_prop_3_2:[]}, test_obj_prop_4:[[], []], test_obj_prop_5:[[], {}], test_obj_prop_6:[{}, {}], test_obj_prop_7:[], test_obj_prop_8:{}, test_obj_prop_9: void 0)})
Code:
({test_obj_prop_1:{}, test_obj_prop_2:{test_obj_prop_2_2:[]}, test_obj_prop_3:{test_obj_prop_3_1:[], test_obj_prop_3_2:[]}, test_obj_prop_4:[[], []], test_obj_prop_5:[[]], test_obj_prop_6:[], test_obj_prop_7:[]})
Code:
({test_obj_prop_2:{test_obj_prop_2_2:[]}, test_obj_prop_3:{test_obj_prop_3_1:[], test_obj_prop_3_2:[]}, test_obj_prop_4:[[], []], test_obj_prop_5:[[]], test_obj_prop_6:[], test_obj_prop_7:[]})That's all for now. I hope this can help you grasp these basic knowledge. For those comprehending object inspections, feel free to correct me if there's anything wrong.
For those wanting to have a solid understanding to object inspections, I might open a more advanced topic for that later.
Last edited:
