5 Command To Master Chrome Dev Tools

#javascript #chrome #devtools #html

Subscribe On Youtube

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