Today was filled with a lot of heartache trying to debug my CSS code. After hours of trying to find errors in my code through “inspect” in the browser, I aligned the sub-menu to the right side and got the box shadows to work. The hours I spent trying to the error ended up being a simple mistake as expected. My mistake were misspelling in the CSS code, which was widgetbox not being separated by a – in between, and also not having a . in front of sub-menu to call its class.
However, I finally couldn’t take it anymore and took the Debug Like A Pro course from Coding Phase. The course covers common errors and solution to debug code.
How to debug in the terminal
A common error in the terminal is following along with a course or project but using the wrong operating system. It is important to be using the correct operating system. For windows it is beneficial to just use ubuntu bash since it’ll be the terminal used in real work environments. Macs automatically runs the proper command terminal used professionally.
Another common error to run into is a 404 library not found, this usually occurs when there is an error in the code with one of the dependencies. This happens in people’s github project as well. A way to resolve this is to reach out the developer that wrote the code and let them know that there is an error in the code.
A powerful command to use in terminal is sudo. Sudo stands for either “substitute user do” or “super user do”. This gives you more administrative power to run applications. Sometimes you will need to use sudo code to run certain commands for your project.
How to debug HTML & CSS
Text editors are good tools to see if there is errors in code. For example VS Code allows you to see tags when you hover on it. However, if you didn’t close the tag properly it will not say the tag description when you hover on top of it. Color schemes also change when a property or value isn’t proper.
Debugging CSS with editor and browser. This is a common way to debug CSS code is through the browsers editor which can be accessed by left clicking an element and hitting “inspect”.
Inside of the developer tools screen you’ll see the code and it’ll highlight where it is. Within the code you’ll be able to see which CSS code works. If the code doesn’t work it’ll have a line through it. However, if you just read the error message it’ll give a good description on how to fix the code.
You can select anywhere on the screen to inspect the code and see if there are any errors.
If both of these methods fail (which it did for me) there is a life saving resource. This important resource is W3C Validator, it validates HTML and CSS code. If there are any errors in the code it’ll tell you ranging from missing closing tags, suggestion for better code with better tags.<div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-155635758-671-5d0773b28c958' data-src='https://widgets.wp.com/likes/#blog_id=155635758&post_id=671&origin=trilamanila.com&obj_id=155635758-671-5d0773b28c958' data-name='like-post-frame-155635758-671-5d0773b28c958'><h3 class="sd-title">Like this:</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class="loading">Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div>