Bugs. They break things, nobody likes them, and they even crawl up and scare you when you least expect it.
No, I’m not talking about the kind of bugs you’ll find under your office desk. I’m talking about the bugs you’ll find during development.
As a developer using the Hubspot CMS, I don’t have to worry as much about bugs as I have when working with other CMS tools. HubSpot removes a lot of hassle that comes from designing websites from scratch — including managing files sources and linking them correctly in HTML, typing the correct header tag, and embedding any kind of external source properly.
But there are still problems that come up, even when working in HubSpot. The most common problems I come across in web development are:
- “Why is this image so small on mobile?”
- “Where did this weird blank space come from?”
- “Why is this link going to https://www.cutecatskittens.com/?“
Well, that last problem isn’t one I hope you’ll come across very often, but the other ones are very common issues. These problems aren’t just frustrating for your client. They also cost you or your developer time, and more time means more money.
Here’s the good news. While you might not be able to prevent 100 percent of errors, you can put a huge dent in your “To Fix” list by using these five simple tools. These resources will benefit you while designing your websites in HTML on any platform, including creating a website from scratch.
5 Free Tools You Can Use To Fix Bugs During Website Development
1. The Browser Developer Tools
Let’s start with the first two problems listed above. These issues can be tedious to fix, but identifying the source of the problem is easier than you think.
Believe it or not, thanks to in-browser tools, almost everything you need to figure out why an image on your site isn’t the right size or why there’s a weird blank space on your page is just 3 clicks away.
Browser developer tools are available on everyone’s favorite web browsers. These browsers all share tools such as a console, HTML editor, and a responsive design viewer in some shape or form.
The best thing about these in-browser tools, specifically the HTML editor, is the convenience of simply clicking the HTML element that you are trying to fix via the inspector and editing the code on the spot directly through the editor.
To download these tools and find out how to enable them, just click your preferred browser below:
2. Responsive Design Checker
When it comes to designing web pages in 2019, your website will often be viewed on a smartphone than a computer. Responsive web design is now a must, and it’s something all developers should pay attention to.
The Responsive Design Checker lets you check how friendly your website layout is across a multitude of devices. Just enter the URL of your published site and choose the device you would like to see your website rendered on!
3. Stack Overflow & W3C School
Our minds weren’t meant to be efficient human databases. When it comes to HTML, you shouldn’t be obligated to remember how to float an image to the right of a paragraph off the top of your head.
Google is your best friend, but with great power comes great responsibility. You should only use Google if you understand exactly what needs to be solved and fundamentally how to solve it.
Although you may be trying to figure out the “how” using a google search, it is not in best practice to simply copy and paste the solution from the internet. Even if it works, later on during production, you will need to know why it works to efficiently maintain your site after launch or to effectively document your code to another developer.
So how can you get answers without muddying up your code?
- Stackoverflow – The community of online development geniuses has answered every question under the sun for all languages of programming. For example, if you have a specific problem in JavaScript such as “How to disable the ‘open link in new tab’ in the browser?” Your answer will definitely be on there.
- W3C School – W3 School is a haven of resources that includes almost everything that’s even possible in the realm of HTML, CSS, JavaScript, PHP, SQL, Python, jQuery, and Java. With thousands of tutorials, references, and “Try It Yourself” codes, it’s a wonderful source to refresh your knowledge and to learn even more about Web Development.
4. Go for Walk
This one isn’t a standard “tool,” but it’s certainly still relevant! Going for a walk is a great way to reset your brain after a long day of coding.
According to Information Theory, your eyes transmit around 10,000,000 bits of information a second, while your conscious mind can only process only 50 bits a second. That’s a lot of information.
I mentioned earlier that our mind isn’t the best database in existence and when you’re staring at code all day, the same information gets processed over and over again to the point where there is no room for new traffic. You’re trying to figure out the problem, not remember it in your sleep.
A walk outside around the office enforces new ideas to flow. Plus, it spares your eyes 5 mins of screen time as well. Shoot for a short 5-16 minute walk at least once a day
5. The Rubber Duck Debugging
At some point in time, during any sort of development, you’ll probably have driven yourself mad like the narrator from “The Tell-Tale Heart.” Instead of wracking your brain to find answers, enlist some help. This is where the Rubber Duck Method comes into play.
Here’s how it works:
- Choose your “duck.” Your duck could be your best friend, someone who works in your office, or even an actual duck. You don’t need to worry about finding someone who understands code (or English). Anyone capable of listening will do!
- Start explaining your code to the duck, step by step, line by line, on what exactly your code does from the top.
- Hopefully, at some point, you realize that the code you think works that in the way you want to actually works differently than it should. You’ll work through the problem on your own, and your wonderful duck will just sit there happily knowing it saved you 20 more hours of debugging.
The Best Paid Bug Fixers On The Market
While a few of these tips are very general and don’t offer exact solutions to the problem you might be trying to solve, here are two paid platform solutions that will help you squash those bugs during web development.
Polypane
Polypane allows you to develop, debug, and view multiple screens to help you create a responsive website. Every action is synchronous, meaning any action that happens on one screen, happens across all others, creating an efficient platform to develop your website across multiple devices.
Learn more about Polypane here. (here’s a video as well https://youtu.be/hqhY6eHyQhI)
If you’re a solo dev or even a small team with limited resources, Saber provides immediate feedback on errors on your site. From Javascript errors and User Experience bugs, feedback is directly recorded with customizable forms that can include screenshots from your team, customers, and users.
Learn more about Saber here.
Talk With A HubSpot Expert
Apart from these hub-based do-it-all, solve-it-all, platforms of figuring out what’s wrong with your site, ROI’s strategy session is a valuable resource free to you. Plus, it won’t be something you’ll need to cancel after a 7-day free trial.
Schedule your free strategy session today and find out how transform your site into a sales-generating machine!
