Chrome Developer Tools Tricks

How to open Developer tools in google chrome?

• Click on the chrome options -> More tools -> Developer tools
• Control+ Shift+I
• Right click on an element -> Inspect
• Press F12

How to inspect elements?

• Elements Panel – Use Functions in the Elements Panel
• Console Panel – Use Tokens in the console panel  $x(“some_xpath”) or $$(“css-selectors”)

Console Options?

• Right click on the console to get the console options
• Clear console — Clears the console screen
• Clear console history — Clears all the console history, if anything is saved.
• Save as — Save the console data.

Console Commands

console.log(‘hi baby’)	Prints hi baby
$(‘a’)	Returns first link on the page.
document.querySelectorAll(‘a’)	Returns all links on the page
document.querySelectorAll(‘a’).length	Returns the count of the links
$$(‘a’)	Returns all links
document.body.contentEditable=true	Then go to the page, we can edit anything
console.log(‘body’, document.body)	Display’s contents of body
console.log(‘Window’, window)	Display’s contents of window

Console Commands

$(‘#profileIdentifier’)	This will return the element having id= profileIdentifier
dir($(‘#profileIdentifier’) )	Returns all the properties of the element
inspect($(‘#profileIdentifier’) )	This will take directly to the element in the inspect log
inspect($$(‘a’)[1])	Returns the first link on the page.
$0	The last selected element
$1, $2, $3 so on.	The second last selected element and so on
var el= $(‘#profileIdentifier’)	we can store the element in a variable and then check. It becomes easy to use just ‘el’ instead of a big expression

Console Commands

getEventListeners($(‘#profileIdentifier’))	Returns all methods tied to the object
monitorEvents($(‘#profileIdentifier’))	All events will be logged
monitorEvents($(‘#profileIdentifier’),’click’)	One method will be logged
monitorEvents($(‘#profileIdentifier’),[‘click’, ‘keyup’,’blur’])	Multiple methods will be logged
unmonitorEvents($(‘#profileIdentifier’))	Stop monitoring the element
$_	executes the last command
clear()	– clears the screen
console.trace()	gives the call trace

CSS Locator Validation

Console is the best place to validate CSS locators. For example: On the Facebook login page we have the code

<input type=”email” class=”inputtext” name=”email” id=”email” data-testid=”royal_email”>

$$(“.inputtext”)	Here the class is = inputtext
$$(“#email”)	Here the id = email

XPath Locator Validation

Personally I prefer using the elements tab to validate XPath locators however when the DOM is really big and you have multiple matches, console can be used to validate the expressions effectively. Take the same example as above.

$x(“//input[@type=’email’]”)	Points to the input box of type= email.
$x(“//input[@id=’email’]”)	Points to the input box of id= email

If you want to know how many times a function is hit?

function foo() 
{
   console.count(‘fooed’);
}
then type foo() multiple times you will get message like fooed:1, fooed:2 etc.

If right click is disabled and you want to inspect fly out menu

First open the browser and hit F12. So now you have the browsing window and the developer tools side by side. In the browser window open the site and continue until the fly out menu, as soon it appears then press F8. This will freeze the DOM. Then take the arrow pointer from the developer tools and select the fly out menu to inspect.

Hope you like the post. Please like/comment/share.