{"id":8564,"date":"2017-04-04T07:56:12","date_gmt":"2017-04-04T07:56:12","guid":{"rendered":"http:\/\/graphenelive.in\/?p=614"},"modified":"2017-04-04T07:56:12","modified_gmt":"2017-04-04T07:56:12","slug":"developer-console-tips-chrome-browser-developers-seo","status":"publish","type":"post","link":"http:\/\/graphenelive.in\/developer-console-tips-chrome-browser-developers-seo\/","title":{"rendered":"Developer Console tips on Chrome browser for Developers & SEO"},"content":{"rendered":"
\n
This article will summarize console tips<\/b> on the Chrome<\/a><\/b> browser for web developers<\/a> ,<\/b> help you speed up the process of code as well as debug.<\/div>\n

<\/a><\/div>\n

1. Select the DOM Elements<\/h3>\n

$(selector)<\/code>Returns a reference to the first DOM element with the specified CSS selector. This function is an alias for the document.querySelector()<\/code>function.<\/p>\n

The following example returns a reference to the <img><\/code>first element in document<\/code>:<\/p>\n

\"Selector-img-chrome-devtools\"<\/a><\/div>\n
<\/div>\n

In addition to the way you are used to $(\u2018tagName\u2019) $(\u2018.class\u2019) $(\u2018#id\u2019)<\/code>and $(\u2018.class #id\u2019)<\/code>, you can also use $$(\u2018tagName\u2019)<\/code>or $$(\u2018.class\u2019). $$(selector)<\/code>return an array of elements that match the CSS selector specified. This command is equivalent to the document.querySelectorAll()<\/code><\/p>\n

following example, which prints the src attribute of all elements <img><\/code>indocument<\/code><\/p>\n

\"All-selector-chrome-devtools\"<\/a><\/div>\n
<\/div>\n

Because returned array, so you can $$(\u2018.className\u2019)[0]<\/code>or $$(\u2018.className\u2019)[1]<\/code>comfortable.<\/p>\n

Note: If the page uses a library like jQuery, this function will be overwritten, $<\/code>which will then correspond to the page library.<\/p>\n

2. Convert Your Browser Into An Editor<\/h3>\n

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.<\/p>\n

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<\/code><\/p>\n

3. Find Events Associated with an Element in the DOM<\/h3>\n

getEventListeners(object)<\/code>Returns the event listeners<\/code>registered on a specified object. The return value is an object, which contains an array of events ( click<\/code>or KeyDown<\/code>.vv ..).<\/p>\n

The following example lists all the events registered on the object#scrollingList<\/code><\/p>\n

\"Scrolling-list-chrome-devtools\"<\/a><\/div>\n
<\/div>\n

Event mousedown<\/code>of this object has 2 listeners. That’s the meaning of Array[2]<\/code>what you see on the picture. It is possible to see the details of such listeners:<\/p>\n

\"Scrolling-list-expanded-chrome-devtools\"<\/a><\/div>\n
<\/div>\n

In addition, to select a specific listener, you can type the following command into the
\ngetEventListeners($('#firstName')).click[0].listener<\/code>
\nEasy console . \ud83d\ude42<\/p>\n

4. Monitor Events<\/h3>\n

monitorEvents(object[,events])<\/code>
\nWhen an event in the specified event occurs on the object, it Event object<\/code>will be logged console<\/code>. In the above function, the parameter events<\/code>passed in can be an event, an array of events, or a “style” events (eg \"keys\"<\/code>including events \"keydown\"<\/code>, \"keyup\"<\/code>, \"keypress\"<\/code>, \"textInput\"<\/code>)<\/p>\n

For example, after the event log resize<\/code>on the objectwindow<\/code>
\nmonitorEvents(window, \"resize\");<\/code><\/p>\n

\"Monitor-events-chrome-devtools\"<\/a><\/div>\n
<\/div>\n

The following example monitors events of type key<\/code>on the object $0<\/code>(previously defined as a text field)<\/p>\n

\"Monitor-keys\"<\/a><\/div>\n

 <\/p>\n

5. Find the Time of Execution of a Block Code<\/h3>\n

Kind of like the timer.<\/p>\n

console.time('myTime'); \/\/Starts the timer with label - myTime\nconsole.timeEnd('myTime'); \/\/Ends the timer with Label - myTime\n\n\/\/Output: myTime:123.00 ms<\/code><\/pre>\n
We can rely on this function to measure the time to complete a code block.
\nFor example:<\/p>\n
console.time('myTime'); \/\/Starts the timer with label - myTime\n\nfor(var i=0; i < 100000; i++){\n  2+4+5;\n}\n\nconsole.timeEnd('mytime'); \/\/Ends the timer with Label - myTime\n\n\/\/Output - myTime:12345.00 ms<\/code><\/pre>\n
6. Arrange the Values of a Variable into a Table<\/h3>\n
Suppose you have an array of objects with values like this.<\/p>\n
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}]<\/code><\/pre>\n
To myArray<\/code>show more beautiful in console<\/code>us can use console.table(variableName)<\/code>.<\/p>\n
\"Console-table-chrome-console-tricks\"<\/a><\/div>\n
 <\/p>\n
7. Inspect an Element in the DOM<\/h3>\n
Can be inspected directly in console<\/code>:<\/p>\n