Debugging: it’s a process that drives every developer crazy from time to time. While it’s essential, it can be very time-consuming and often disrupts our workflow.
As Sam Mullins identified in part 1, we needed a tool that made debugging easier – requiring minimal effort and enhancing productivity.
The aim of Ladebug
Ladebug (pronounced Ladybug) is a new debugging system that aims to make debugging errors easier for everyone. Ladebug is designed on a web-based platform with a companion Chrome extension app where all the magic happens. This Chrome extension will detect if your current page is an ASP.NET error screen and, if it is, display potential solutions on how to fix your error. These solutions are created by a Redweb developer who’s had the same or similar error and been able to find a fix.
On solving an error, Ladebug will prompt you to ask what the fix was. This is where you either select another user’s solution that helped you, or write down what you did to fix your error. Your feedback is then used in the part of the algorithm that suggests relevant solutions to others that may encounter a similar error in the future.
- HTML, CSS with Bootstrap v4
- HTML, CSS with Bootstrap v4
- Asp.NET MVC with Entity Framework
- Elastic Search
Whilst planning how to build Ladebug, one functionality that was very important was the ability to store large volumes of HTML documents and search through them to find a similar matching document. The naive approach would be to use an SQL database to store and retrieve data, but SQL databases just aren’t as optimised for this type of task. This is where Elastic Search – a search engine recommended by Sam – came into the picture.
Elastic Search is a multi-faceted search engine that is commonly used for full text search and log analytics. It allows you to store large volumes of data that can later be recalled through a search. Elastic Search is an incredibly fast, scalable and easy to use independent search engine, making it perfect for what I wanted to do. The end goal being for the chrome extension to request suggestions as soon as the webpage loads with an error screen, and have the backend respond almost instantly. We needed the system to be extremely fast, even if there were millions of records to search through. In addition, an SQL database used alongside Elastic Search would store related data that didn’t need to be indexed.
Prior to storing HTML documents in Elastic Search, the document must go through a process that would extract the relevant information. AngleSharp, a HTML parser, was used for this exact purpose. AngleSharp made it easy to extract only the information that was necessary before it was stored, improving the quality of data and enhancing the speed of the Elastic Search queries.
The diagram outlines the core concept of how the chrome extension works with the backend.
Front end design
The front end of both the web app and Chrome extension were designed using Bootstrap V4. Bootstrap is an awesome framework for building responsive, mobile first websites. Vue.js was predominantly used in the Chrome extension, because it’s an amazing framework for building single-page applications. The combination of these frameworks allowed me to speed up development and really focus on designing a polished application.
Ladebug in context
Roughly a week later, Ladebug went live for use within the team and it was immediately put to the test. Our yearly Sitecore license had expired and being new to the team I was unsure of what to do. Straight away, Ladebug found a potential solution for this error. It turned out that Sam had stumbled across this same problem 30 minutes previously and had posted a solution. Following his instructions, I was able to update my Sitecore license successfully. I upvoted his solution when prompted by Ladebug, making it more likely to be recommended to other users encountering the same issue.
By using Ladebug, I fixed the problem easily, saved time and avoided disturbing Sam (who would’ve been my first port of call).
What next for Ladebug?
Currently, the algorithm Ladebug uses to recommend solutions is very static. It’s pre-programmed on where to look with the help of user-defined configuration settings, which works extremely well. However, in some edge cases it doesn’t work as well because there is an infinite number of ASP.NET errors and there isn’t a one-size-fits-all way of analysing them.
Also, Ladebug cannot understand the context in which the error occurred, which can play a huge role in suggesting solutions to fix a problem. It would be nice to integrate a machine learning process that can understand the context errors occur in so that this information can be used to suggest more accurate solutions.
Even so, we’ve been using the finished product for a few months now and have already noticed how our debugging process has become more simplified and streamlined. As any developer will tell you, that can only be a good thing!