Emoji Debugging

I realised that the debugging I do nowadays is exclusively “emoji debugging”, maybe better known as “printf() debugging”. Coming from C# development in Visual Studio, which has the best debugging experience I know, I find this works surprisingly well.

console.log('🥑')
console.dir(allCompanies, { depth: null })
...
console.log('🍋')
console.dir(filteredCompanies, { depth: null })

Using emojis makes it easy to recognise the log statements in a crowded log output and a quick way to answer the questions “Did we get here?” and “How does the relevant data look?”

Using the same language for the front-end, it doesn’t matter if I’m in a Remix action or a client rendered component. console.dir doesn’t take an options argument in web browsers, but it isn’t needed either, so just skip it or accept the extra output.

I guess the main reason I’ve ended up here is that my local development is based on Docker Compose where attaching to a process isn’t the easiest, especially from Neovim. The idea of doing the same for my teams C# services is apparently not worth pursuing — mein Gott how complicated: C#: Printing all properties of an object [duplicate]

So, if you’re already console logging for figuring out what you’ve done wrong, consider adding some emojis for a more efficient debugging experience! 🐛