Tips for Debugging the Code in Your Mobile App

When coding your app, you will almost inevitably write code that does not behave as you intended. HTML and CSS are relatively forgiving, with the browser even going so far as to insert tags so the page renders properly. However, JavaScript isn’t so forgiving, and the smallest error, such as a missing quotation mark, can cause the page to not render properly.

Errors in web applications can consist of syntax errors, logic errors, and display errors. Often, the most likely culprit causing errors in your code will be syntax related. Here are some common errors to check when debugging your code:

• Opening and closing tags: In HTML, every opening tag has a closing tag, and you always close the most recently opened tag first.
• Right and left angle brackets: In HTML, every left angle bracket < has a right angle bracket >.
• Right and left curly brackets: In CSS and JavaScript, every left curly bracket must have a right curly bracket. It can be easy to accidentally delete it or forget to include it.
• Indentation: Indent your code and use plenty of tabs and returns to make your code as readable as possible. Proper indentation will make it easier for you to identify missing tags, angle brackets, and curly brackets.
• Misspelled statements: Tags in any language can be misspelled, or spelled correctly but not part of the specification. For example, in HTML,

  <img scr="image.jpg">

  is incorrect because scr should really be src for the image to render properly. Similarly, in CSS font-color looks like it is spelled correctly but no such property exists. The correct property to set font color is just color.

Keep these errors in mind when debugging — they may not solve all your problems, but they should solve many of them. If you have tried the steps above and still cannot debug your code, tweet @nikhilgabraham and include the #codingFD hashtag and your codepen.io URL in your tweet.