If you're building software and websites, you know that bugs are inevitable. The real challenge is to make sure that your team has an efficient way to identify, report and track bugs.
JIRA is an amazing tool to keep track of bugs. However, reporting them can prove cumbersome. It breaks up your workflow and it is often not descriptive enough for developers to understand and reproduce bugs fast enough.
That's why we created Marker.io, the best way to create detailed-rich bug reports in JIRA without leaving your website.
See how Marker.io + JIRA work together in this video
If you'd like to set up your own bug reporting & tracking workflow around Marker.io and JIRA follow these easy steps.
Step1: Connect your JIRA account
To log bug reports in your JIRA projects, you will need a Marker.io account (If you don't have one yet, start your free trial now)
Then, go to your Marker.io integration admin and sync up your JIRA account.
Step 2: Paste our snippet code onto your website.
This step enables the feedback widget on your website
Click on “Copy Snippet Code”
Open the backend of your website
Paste our snippet code anywhere above the closing head tag.
You are now all set to receive feedback directly into your Jira account!
Step 3: Capture a screenshot of the bug
At this point, you should have the Marker.io screen capture extension installed in your browser. (if not, log into your account and install now here)
Go to your website and start hunting for bugs. When you find one, click on the Marker.io browser extension and capture a screenshot.
Step 4: Select your JIRA project
After capturing your screenshot, the Marker.io editor will open. In the upper left corner, select in which JIRA project and issue type you want to start sending bug reports.
Marker will automatically remember the last Project and issue type you used for next time.
Step 5: Annotate to get your point across
Use the built-in annotation tools inside the Marker.io editor to get your point across.
Step 6: Fill out a bug report template
When you're done annotating your screen capture, make sure to document the actual and expected results of the bug. Some bugs might be obvious for you, but your developers won't always know what the final results should look like.
Take the time to fill out the bug report template and your developers will thank you for it! The description will be automatically converted using Markdown in a new JIRA issue.
Step 7: Assign priority & team member
Consider adding a priority level to your bug report to make it manageable for your team to know on what they should work next. You can even add a team member.
Step 8: Create & view the issues in JIRA
When you are ready, hit the big green button that reads "Create issue". Your screenshot will be converted into a JIRA issue in your selected project and all the information you included will be added to the issue as well.
On top of all this information, Marker automatically grabs the technical information about your browser, OS, and screen as well as the original Page URL. Your developers will now be able to easily reproduce the bug and they won't have to ask you again which browser you used or what is the size of your screen. The best part, you didn't have to do anything to.
Here’s an example of a well-documented bug report in JIRA created with Marker.io:
This JIRA issue has all the information needed for your team to act on it:
The issue is in the correct repository.
The issue has a priority (using labels).
The bug is assigned to a team member.
The annotated screenshot is attached.
The expected and actual results are well documented.
The technical browser information is included.
The URL where the screenshot was captured is in the description.
The bug has a due date.
Wrapping it up
Invite your team to collaborate on a dedicated JIRA project and roll out Marker.io to your entire team so anybody can report professional bugs and feedback in seconds without interrupting their workflow.
Wait.... what about bug reporting on Mobile?
Read our special guide about how Marker.io can help with bug reporting on responsive websites and mobile apps
Did this answer your question?