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.