5 Bug Reporting Tools for Developers

Posted: 21 Nov 2014 02:00 AM PST

One area in our development process that we can optimize with a proper tool is the way we handle bug reports.

Traditionally, bugs, client feedback, and change requests are discussed in lengthy real-time meetings which would then kick off the next web development phase that will address the issues. But this sequential lather-rinse-repeat workflow is slow: One of these iterations is barely doable within a timeframe faster than a week because bug reports have to be processed, organized, documented with screenshots, decided upon, and then delegated to the appropriate people.

It’s more efficient to gather feedback early and often, and to perform development work concurrently.

The Modern Way of Bug Reporting

Recently, I have noticed a refreshing movement from ambitious Web startups addressing the painfully inefficient bug-reporting and issue-tracking process.

What I’m now seeing are great solutions such as embedded interfaces that allow quality assurance (QA) personnel and clients to report bugs, provide design feedback, and request changes right from within their browsers.

In these tools, change requests and bug reports are created directly on the web pages of the project. The interface is visual and seamless: No screenshots need to be made manually, no external spreadsheets need to be filled out, etc.

This new genre of bug reporting tools, to a great extent, eliminates or reduces manual documentation, tracking, data-processing, screenshots, specs, and long meetings that eat up valuable web development time.

Furthermore, these bug reporting tools can be used by all members of the project: Clients, managers, designers, and developers, all at the same time. Access and permissions can typically be managed. Reports are generated automatically. A centralized place for reporting, tracking and managing bugs is provided to all members of the project. Integration with third-party web apps like Basecamp, Trello, and GitHub is the norm.

Discovering this new way of handling bug reports, feedback, and issue-tracking right from within the browser led me to dig into the subject a little deeper. As a web developer and (now) a project management consultant, this is a topic that is near and dear to me. I already knew some top options but I wanted to be thorough. I called friends in the industry to get their advice, as well as performed investigative online research to figure out which ones were the cream of the crop. Oh, and I also did a lot of testing.

I came across a lot of bug-reporting systems. I would like to discuss and review what I believe to be the best of the best:

Usersnap
BugHerd
BugMuncher
Redline
InVision’s LiveCapture

1. Usersnap

Usersnap, according to their site, is "bug reporting for everyone working on a web project". Getting Usersnap to work in your projects is straightforward: You can either copy-and-paste a JavaScript snippet that the bug-reporting tool will provide you, or your users can install its Chrome extension or Firefox add-on.

How It Works

Usersnap adds a Feedback button on your project’s web pages. When the button is clicked, a box appears with different commenting tools. Apart from an Arrow tool and Pen tool that helps users leave feedback on the web page, the Pixel Ruler tool comes in handy when it comes time to discuss something that needs to be shifted a few pixels up or down, or if the logo needs to be bigger (and by precisely how much).

One of Usersnap’s useful features is called Console Recorder. It tracks errors and other potentially valuable data reported by the browser’s dev console.

Usersnap plays well with many third-party tools such as Asana, Basecamp, and GitHub. For testing purposes, I hooked up Usersnap with Trello — the process was smooth and I got Trello notifications every time a bug report was created.

Pricing

Pricing starts at $19 per month. The most expensive plan is $99 per month. Integrating Usersnap with other web services such as Trello, Evernote, and GitHub requires at least a Team account, which is $49 a month.

2. BugHerd

When you use BugHerd, it will become quickly evident that the team behind this app spent a great deal of time figuring out how to simplify the bug-reporting/feedback process. Just like Usersnap, it can be used as browser extension or by copying-and-pasting a JavaScript code snippet to your web pages.

How It Works

One thing that is interesting with BugHerd is its set-up wizard, which hand-holds and walks you through the entire installation process.

When installed in a Web project, the reporting interface appears as a sidebar on the right edge of the browser’s viewport. The most important tool is the "+" button which lets the user select any HTML element on the page and add a comment on it.

Also, BugHerd adds color-coded "pins" on your project’s web pages so you can quickly and easily visualize the status of each task.

The assignee and the severity of the bug can be managed directly while you’re viewing the project, making the bug reporting and tracking process streamlined.

After submitting a bug report or change request, a new "card" is created in the system, which can be accessed through the BugHerd admin interface.

A selection of prominent project management tools can be integrated with BugHerd such as Basecamp, GitHub, Campfire, and so forth. (Unfortunately for many, at the time of writing, Trello is not yet supported).

One thing to note is BugHerd has good project management features by itself so in my opinion integrating it with other tools is not crucial.

Pricing

Pricing for BugHerd subscription plans start at $29 a month for 5 users and goes up to $180 for 50 users.

3. BugMuncher

BugMuncher is a minimalist bug reporting tool. It needs to be installed in your projects using a JavaScript snippet (there aren’t any browser extensions available). The installation process is well-documented and the fine-grained settings dialog allows you to customize your setup.

How It Works

Similar to the other bug-reporting tools, BugMuncher adds a button labeled Feedback! on your project’s pages. Clicking the button reveals a modal window with two tools: Highlight and Black out.

When a user tries to provide feedback on the page, an email address and a comment has to be entered as well. An image of the page is then sent to the BugMuncher app where it’s presented alongside other user data like the user’s browser, browser version, viewport size, click path, user agent, etc.

I had some issues with the screenshots the tool created using Google Chrome; the highlighted areas where shifted on the screenshot. But it worked nicely on other browsers I tested.

BugMuncher issue on Google Chrome where the highlighted areas were slightly shifted.

BugMuncher can be connected with some third-party tools such as Trello, GitHub, and Zendesk. I integrated Trello with BugMuncher and it worked as expected: Both the screenshot and user information was transmitted to Trello.

Pricing

BugMuncher offers three different subscription plans. Pricing starts at $19 (which allows you to gather up to 150 reports) and goes all the way up to $99 (you can white-label the tool and use your own corporate branding with the most expensive plan). Third-party software integration is available starting at the middle-tier plan (called Start Up), which costs $49.

4. Redline

Redline is beautifully simple: Its interface is well-designed.

How It Works

Redline welcomes new users with an excellent onboarding process.

This bug-reporting tool offers two possibilities for gathering in-browser feedback: A "ribbon" interface which needs to be installed on your web pages using JavaScript, as well as a bookmarklet.

I installed the ribbon which introduces a red box on the left side of the browser’s viewport. Clicking the red box opens the Tool Box panel which gives the user access to bug-reporting features such as commenting and labeling.

After submitting a bug report, the user will receive a nice "Thank You" message containing a public URL with a preview image of the report. Although this is definitely a convenient way to share a bug report, this can be a deal breaker for many agencies and clients because the bug reports are out in the open. But if you just need a beautiful and effortless solution for accepting non-sensitive bug reports and change requests, Redline will definitely get the job done.

Redline has an API as well as custom-branding features that permit you to customize the tool. Supported third-party apps are Basecamp, Trello, Jira, GitHub, etc.

Pricing

Pricing starts at $19/month and, even at this level, you already get access to SSL support and unlimited projects. API access, custom privacy settings, and white-labeling options require the Enterprise plan (the price of this plan isn’t displayed on their site).

5. InVision LiveCapture

InVision has gained a reputation for being one of the most elaborate all-in-one products for web design prototyping and project management. Integrating InVision with third-party apps can be done via their so-called Live Embed code.

Some months ago, InVision launched a new feature called LiveCapture, a Chrome browser extension that can be used to collect screenshots for feedback and collaboration.

How It Works

I installed the LiveCapture browser extension and it was a smooth and slick process. It captures the whole screen. Once logged into InVision, commenting is an easy task and inviting my co-workers was an uncomplicated affair.

InVision integrates with some of the most popular web apps in the industry like Basecamp, Trello, and Slack. InVision has a lot more features outside of bug-reporting like versioning of your designs, building "click prototypes", etc.

Pricing

Pricing starts at $15/month up to $100/month for their Team plan (which covers you up to 5 members).

Feature Comparison Table

	Usersnap	BugHerd	BugMuncher	Redline	InVision
Browser extensions	Chrome, Firefox	Chrome, Firefox, Safari	None	None	Chrome
Installation through JavaScript code	Yes	Yes	Yes	Yes	No
Tracks user and browser data	Yes	Yes	Some	Some	No
Collaboration features	Yes	Yes	No	No	Yes
User registration required?	No	Yes	No	No	Yes
Number of third-party apps supported	20	7	7	6	Embeddable

Conclusion

After using these tools, I really fell in love with the concept of in-browser bug reporting. Reporting bugs and submitting change requests is easier this way, since everything is communicated through a visual interface and the communication is seamless.

Usersnap’s features are intuitive. It can connect with 20 third-party apps, which is great for flexibility. The possibility to access client-side session information is super useful. Usersnap is the clear winner for me.

BugHerd’s "kanban board" style of organizing and presenting bugs and tasks is neat (but hides the visual communication). Overall, this is a great bug reporting tool.

Redline and BugMuncher have a straightforward set of features which might resonate well with one-person web development businesses and freelancers. As soon as team collaboration is required, switching to a more robust bug-reporting tool or integration with a third-party project management app is, in my opinion, necessary.

InVision is not a 100% fit for the purpose of bug-tracking. Though InVision’s LiveCapture browser extension allows you to grab the screen content, it does not allow users to leave comments on the screen without logging into InVision. But InVision itself is a full-fledged visual communication platform for design projects, and it does a lot of other great things that can improve your design and development workflow.