Developer Console tips on Chrome browser for Developers & SEO

1. Select the DOM Elements

$(selector)Returns a reference to the first DOM element with the specified CSS selector. This function is an alias for the document.querySelector()function.

The following example returns a reference to the <img>first element in document:

In addition to the way you are used to $(‘tagName’) $(‘.class’) $(‘#id’)and $(‘.class #id’), you can also use $$(‘tagName’)or $$(‘.class’). $$(selector)return an array of elements that match the CSS selector specified. This command is equivalent to the document.querySelectorAll()

following example, which prints the src attribute of all elements <img>indocument

Because returned array, so you can $$(‘.className’)[0]or $$(‘.className’)[1]comfortable.

Note: If the page uses a library like jQuery, this function will be overwritten, $which will then correspond to the page library.

2. Convert Your Browser Into An Editor

How many times have you wondered if you could edit the text of an element in the DOM directly in your browser? The answer is yes, you can turn the browser into a delicious text editor. That is, add, edit, delete text from anywhere in the DOM.

I’m sure you still do this: Right click> Inspect> Edit as HTML. Instead, type the following command into the console:document.body.contentEditable = true

3. Find Events Associated with an Element in the DOM

getEventListeners(object)Returns the event listenersregistered on a specified object. The return value is an object, which contains an array of events ( clickor KeyDown.vv ..).

The following example lists all the events registered on the object#scrollingList

Event mousedownof this object has 2 listeners. That’s the meaning of Array[2]what you see on the picture. It is possible to see the details of such listeners:

In addition, to select a specific listener, you can type the following command into the
getEventListeners($('#firstName')).click[0].listener
Easy console . 🙂

4. Monitor Events

monitorEvents(object[,events])
When an event in the specified event occurs on the object, it Event objectwill be logged console. In the above function, the parameter eventspassed in can be an event, an array of events, or a “style” events (eg "keys"including events "keydown", "keyup", "keypress", "textInput")

For example, after the event log resizeon the objectwindow
monitorEvents(window, "resize");

The following example monitors events of type keyon the object $0(previously defined as a text field)

5. Find the Time of Execution of a Block Code

Kind of like the timer.

console.time('myTime'); //Starts the timer with label - myTime
console.timeEnd('myTime'); //Ends the timer with Label - myTime

//Output: myTime:123.00 ms

We can rely on this function to measure the time to complete a code block.
For example:

console.time('myTime'); //Starts the timer with label - myTime

for(var i=0; i < 100000; i++){
  2+4+5;
}

console.timeEnd('mytime'); //Ends the timer with Label - myTime

//Output - myTime:12345.00 ms

6. Arrange the Values of a Variable into a Table

Suppose you have an array of objects with values like this.

var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]

To myArrayshow more beautiful in consoleus can use console.table(variableName).

7. Inspect an Element in the DOM

Can be inspected directly in console:

• inspect($("selector"))Will inspect the element that matches the selector and always open the DevTools Tab Elements. This is sometimes useful when the element is hard to find on the screen and you can not right-click and inspect the element directly.
• Replacing $("selector")with $0or $1or $2etc will save you time as $0it is the nearest element you have selected, $1the nearest to the second.

8. List the Properties of an Element

It’s easy, type dir($(‘selector’))in the console and it will return the object with the corresponding properties.

9. Retrieve the Value of your Last Result

$_

2+3+4
9 //- The Answer of the SUM is 9

$_
9 // Gives the last Result

$_ * $_
81  // As the last Result was 9

Math.sqrt($_)
9 // As the last Result was 81

$_
9 // As the Last Result is 9

10. Clear the Console and the Memory

clear()Or Ctrl+Lif you lazy type =))

11. Copy object value to clipboard

copy(object)Copy object as string.
If the object is elementthe same as the outer copy of its HTML.

For non-objects element, the thing that is copied to the clipboard is the JSON encoded object.

Try to select an element consoleand then type the command: copy($0)try on different objects you will understand immediately .

Resource:  https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference