In this video I am going to show you 5 commands to master chrome dev tools
1 - Convert object to table
Command: table({})
let data = {
"market": "Capital Market",
"marketStatus": "Close",
"tradeDate": "11-Jan-2021",
"index": "NIFTY 50",
"last": 14347.25,
"variation": 209.89999999999964,
"percentChange": 1.48,
"marketStatusMessage": "Market is Closed"
};
table(data); // convert json to table
2 - Print all keys for an object
Command: keys({})
let data = {
"market": "Capital Market",
"marketStatus": "Close",
"tradeDate": "11-Jan-2021",
"index": "NIFTY 50",
"last": 14347.25,
"variation": 209.89999999999964,
"percentChange": 1.48,
"marketStatusMessage": "Market is Closed"
};
keys(data); // return keys of object
3 - Clear the console
Command: clear()
You can clear the console by typing CMD+K on MAC or CTRL+K on windows
Otherwise you can also call clear followed by round brackets and press return key
let data = {
"market": "Capital Market",
"marketStatus": "Close",
"tradeDate": "11-Jan-2021",
"index": "NIFTY 50",
"last": 14347.25,
"variation": 209.89999999999964,
"percentChange": 1.48,
"marketStatusMessage": "Market is Closed"
};
clear(); // clears console
4 - Inspecting element
Command: inspect(elementSelector)
You can inspect element without touching mouse or touchpad using following command
// go to google.com
// open developer console and type
inspect(document.querySelector('input[name="q"]'));
5 - Show markup of recently selected element
$0
returns the most recently selected element
BONUS TIP
Similarly, $1 returns the second most recently selected one
The $0
, $1
, $2
, $3
and $4
commands work as a historical reference to the last five DOM elements inspected within the Elements panel
Top comments (2)
Nice 😄, What tools did you use to record and edit videos ?
Screenflow, Chrome browser and Blue Yeti mic.