Five tricks to use in the Console Panel

Published on Updated on

Five tricks to use in the Console Panel

Use the inspect() command to jump straight to a passed-in DOM node

inspect($('p'))

Use the copy() command to copy text to your clipboard

copy(Object.keys(window))
// stores ["top", "window", "location", "external"... and so on

Style your console output

console.log('%cHello world', 'font-size:40px;color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);');

Get the values of an object

values({
one: 1,
two: 2,
three: 3
})

// logs [1, 2, 3]

Clear the console

Cmd + K (Ctrl + L on Windows)

Updated on Improve article

Back

Using requestIdleCallback

Next

Easily duplicate DOM nodes

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.