Chrome Advanced Development tools

Development Tools in chrome

Chrome Advanced Development tools
==================================
Chrome Command Menu
-------------------
The command menu in chrome help many powerfull feature in the chrome page.
Command + shift + P provide the command menu. where we can use many command operations.

1) Powerfull screenshots
Screenshot Capture full size screenshot : Full size screenshot of the complete page
Screenshot Capture node screenshot : Current node screenshot. You can select the node from the Elements tab

2) Check the result of last operation in console:
$_ is the command used to get the result of last command.

'abcde'.split('').reverse().join('')

we can check the result by spiling the function and check the result by using the $_ as below
'abcde'.split('')
$_

3) Resend XHR request.
Choose the XHR request that you want to resend
Replay XHR

4)Monitor page load status by capturing screenshot
Use capture screenshot option from the network menu

5)copy function : Copy the javascript variable.
6)table function for array :  To get clear view of array element.
let users = [{name: 'Jon', age: 22},
  {name: 'bitfish', age: 30},
  {name: 'Alice', age: 33}]
table(users)

7)copy data image url
8)Store a DOM element in a global temporary variable
select the Element
right-click the mouse
Store as a global variable