Chrome’s Developer Console

chrome-console.md

1. Select DOM Elements

Find one element

$('<CSS_SELECTOR>');

Find all elements

$$('<CSS_SELECTOR>');

2. Convert Your Browser Into An Editor

document.body.contentEditable = true;

// or

document.designMode = 'on';

3. Find Events Associated with an Element in the DOM

getEventListeners($('<CSS_SELECTOR>'));

Find a particular event

getEventListeners($('<CSS_SELECTOR>')).eventName[0].listener;

4. Monitor Events

monitorEvents($('<CSS_SELECTOR>'));
monitorEvents($('<CSS_SELECTOR>'), 'eventName');
monitorEvents($('<CSS_SELECTOR>'), ['eventName1', 'eventName3', ...]);
unmonitorEvents($('<CSS_SELECTOR>'));

5. Find the Time Of Execution of a Code Block

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

// Output: myTime:123.00 ms

6. Arrange the Values of a Variable into a Table

console.table(variableName);

// Example
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}];
console.table(myArray);

7. Inspect an Element in the DOM

inspect($('<CSS_SELECTOR>'));

$0, $1, $2, etc

8. List the Properties of an Element

dir($('<CSS_SELECTOR>'));

9. Retrieve the Value of your Last Result

$_

// Example
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();

// Shortcut
CTRL + L

11. Copy something

copy(<SOMETHING>);