Debugging Debunked

You are midway through your project. You have been coding since time immemorial, yet you aren't able to make that feature work. You have no clue what is going wrong.
Behold my friend, I now proudly present you the 3 steps to debug any code, however complex it may seem.

The three steps

1.Log it on the console

Seems quite obvious right ? Then why don't you use this powerful technique. Also, add some pleasant prefixes to those logs. For example , you need to check if your React Component called Kid is receiving the prop named age, go for something like this:

console.log("The Kid component is having this age : " + props.age );


2.Use customised phrases to replace the actual data

Suppose you are trying to use a Flatlist to render the contents fetched from the back end. But regardless of whatever you do, nothing shows up on the screen. You can even see the contents on console, but it seems like some magical spell has restricted it from being presented.
What you can do now is, replace the data you are trying to display with some funny phrases , for example if you have this :

<Flatlist
   data={props.data}
   renderItem={({item}) => (
                <View>
                  <Text style={styles.textData}>{item.title} 
                  </Text>
                </View>
               )}
   keyExtractor={item => item.title}
/>

And the "title" is not being displayed , use this :

<Flatlist
   data={props.data}
   renderItem={({item}) => (
                <View>
                  <Text style={styles.textData}>
                     Somebody said today that I’m lazy. I 
                     nearly answered him.                  
                  </Text>
                </View>
               )}
   keyExtractor={item => item.title}
/>

And check if you can see that phrase on the screen. If you can't, most probably you have messed up the styling. Add some background colours and see what happens..

3.Search About It

If your code has some wild snippets or it uses some library you don't know much about, dive into it. Skim stackoverflow , medium articles , dev.to blogs , or wherever you find relevant stuff.

Finally , loop through the steps again.

Let me know if this little procedure helped you.

Happy Debugging :)