10 great tips for debugging and testing sites

Let’s be honest, debugging/testing a site can sometimes be vexatious and time consuming. It can take hours or even days to figure out why a feature isn’t working properly. To help alleviate this process, we at Pixafy have come up with a list of 10 tips and best practices for tackling this issue.

Here are recommendations from our team:

1. Click on everything – From the obvious to the not so obvious. Do this periodically throughout the building process.
2. Keep an open mind – Sometimes debugging requires a person to break out of a normal mental pattern and looking beyond standard protocol to find a solution.
3. Start over with a clean slate – Copy the snippet of code into a clean page to verify if the snippet is the issue or if the current page is actually the issue. This will help narrow down the possibilities of what could be wrong.
4. Look specifically for issues that may arise due to the environment itself – For example, if you’ve worked on a site using HTTP locally and when it goes live, the protocol is HTTPS, you need to make sure your assets are configured properly to deal with that.
5. Debugging PHP – Using the exit and var_dump function is always helpful (for quick fixes). Using the debugging tool “Xdebug” allows you to see the variable values in real-time and you can follow the code so you know exactly where it’s going. No pinning the donkey and hoping for the best!
6. Obvious statements – This is not necessary but can help make the debugging process a little less stressful. An example could be inserting the phrase “CAN YOU SEE THIS?” inside the exit function in PHP.
7. Check browsing console for errors – Compare the styles in Chrome’s inspector tool (bonus tip: you can view computed styles in the inspector to see what styles are being added onto something that isn’t necessarily visible when you view the rest of the inspector under regular styles). And also be sure to check the site in all browsers including older versions.
8. Be sure to check on both PCs and MACs – Sometimes something that works fine in Mac’s Chrome browser is off in a PC’s Chrome browser, for instance.
9. Write original code with the intention that it should be tested – In Javascript this means always returning something from one’s functions and adding in a small comment of what should be expected in the returned value. Taking the time to do this will save time later in testing. It can also help if in the future your function needs refactoring to fit different needs.
10. Using Test Driven Development (TDD)– This software development process consists of writing your tests before you write your functionality and refining your code until it passes your tests. This accomplishes two things:
    • Your code requires less debugging as it has been thoroughly tested before implementation.
    • Coding in a process that is step driven helps you use the same techniques when debugging (like only changing one thing at a time when testing).

    For more on Test Driven Development (TDD), check out these links:
    Test driven PHP
    Test driven JavaScript

Have you got other debugging tips or practices that work for you? Let us know in the comments!