In this video I am going to show you 5 commands to master chrome dev tools

1. Convert object to 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)

2. Print all keys for an object

keys(data)

3. Clear the console

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

clear()

4. Inspecting element

You can inspect element without touching mouse or touchpad using following command

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

#devtips #shortvideo #shorts

свернуть