A directory of brand guidelines: logosearch.link

Poor man’s debugging, but cooler

Dom Habersack
Dom HabersackMay 13, 2020
Glasses positioned neatly next to Apple headphones, an Apple keyboard, and an Apple mouse.
Your coworkers will want your autograph when you show them this.

As far as debugging methods go, good old console.log does not get enough love. While full debugger-sessions are nice, sometimes a boring log message is all you need. Browsers have a neat feature that makes those messages much more helpful when we’re trying to fix bugs.

Console logs are convenient, because they don’t interrupt the execution of code. Messages appear as they happen, and we can manually inspect any logged variables.

console.log({
  name: 'Arcadia',
  villagers: [
    'Rory',
    'Plucky',
    'Norma',
    'Hugh',
    'Zell',
    'Puddles',
    'Octavian',
    'Yuka',
    'Sprocket',
    'Alfonso'
  ]
})

That works well enough, but we cannot do anything with that data besides look at it. We can supercharge that workflow with a feature available in many dev tools.

Most browsers allow us to take any log output and assign it to a variable. In Safari, right-clicking any log output reveals an action called “Log Value”. This action assigns the selected value to variables called $1, $2, $3 and so on. Chrome calls that same action “Store as global variable”, and the variables temp1, temp2, etc.

Once assigned to a variable, we can play around with that data right in the console. Instead of manually inspecting my island, we can sort its villagers and see the result:

// replace `$1` with `temp1` if you’re using Chrome
const sortedVillagers = $1.villagers.sort()

console.log(sortedVillagers)
// => ["Alfonso", "Hugh", "Norma", "Octavian", "Plucky",
//     "Puddles", "Rory", "Sprocket", "Yuka", "Zell"]

This is particularly helpful when inspecting larger, more complex objects. You could log an entire catalog of product objects and quickly test your filter logic in the browser.

This little trick has made my life a lot easier recently. There are so many cool features hidden in the browsers’ development tools. I’m looking to expand my repertoire, so please share your favorites!

– Dom

Continue reading

A Lego Stormtrooper in front of an empty canvas.
#51August 26, 2020

Tired of learning by building todo-apps?

Tutorials often default to todo-apps. These twists on that idea help you dig into how the framework you’re learning really works.

Assorted colorful miniature houses.
#69December 30, 2020

I finally understand “many small functions”

Writing many small functions instead of a few large ones is common wisdom. It took a book from the 90s for me to understand why that’s better.

A model of a space shuttle.
#80March 17, 2021

When you know too much to be helpful

Once you speak the language experts in your field use every day, it becomes harder to remember what it was like to not know what you know now.

Read all issues →