Interesting Google Chrome developer tools commands.
Editing
| Command | Description |
| document.body.contentEditable = true | Make web page editable |
Select DOM elements
| Command | Description |
| $(<identifier>) | Returns first matching identifier |
| $$(<identifier>) | Returns all matching identifiers |
| $x(<xPath>) | Returns array of XPath matches |
Console Commands
| Command | Description |
| console.assert($("body").childNodes<1, "no content") | Assertions |
| console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]); | Displays an array |
| console.log("%s has %d points", "Sam", 100); console.warn("Node count:", a.childNodes.length) console.error("Error message") | Log statements |
| console.count("Init for object" + obj); | Count execution |
| dir(<element>) | View object dir($("body")) |
| inspect(<element>) | Inspect element in Elements view |
Events
| Command | Description |
| monitorEvents(<element>, ); unmonitorEvents(<element>, <event>); | Monitor events monitorEvents(document.body, "click"); unmonitorEvents(document.body, "click"); |
Profiling
| Command | Description |
| console.time("Array initialize"); console.timeEnd("Array initialize"); | Performance measurement |
| profile(<name>) profileEnd(<name>) | CPU profiling |