Jira Integration
The TailTrace Chrome Extension can create Jira issues directly from the inspector overlay.
-
Create an API token
Go to Atlassian Account → Security → API tokens and create a new token.
-
Configure in TailTrace
Open the Chrome extension popup → Settings → Jira section:
- Enter your Jira domain (e.g.,
yourcompany.atlassian.net) - Enter your email
- Paste your API token
- Select your default project
- Enter your Jira domain (e.g.,
-
Start reporting
When inspecting an element, click “Report Bug” to create an issue.
What Gets Reported
Section titled “What Gets Reported”Each bug report includes:
- Screenshot - Attached to the issue
- Drift metrics - In the description
- Environment data - As custom fields or labels
- Element details - CSS selector and styles
Issue Format
Section titled “Issue Format”Issues are created with:
Summary: Design drift on [page] - [element]
Description:## Drift Report
Property: background-colorDetected: #3b83f6Expected: blue-500 (#3b82f6)Delta-E: 0.73
## ElementSelector: button.primary-cta
## EnvironmentURL: https://example.comViewport: 1920×1080Configuration
Section titled “Configuration”| Option | Description |
|---|---|
| Domain | Your Jira cloud domain |
| Your Atlassian account email | |
| API Token | Personal API token |
| Project | Default project key (e.g., “PROJ”) |
| Issue Type | Default to “Bug” |
REST API
Section titled “REST API”TailTrace uses Jira’s REST API v3:
POST https://{domain}.atlassian.net/rest/api/3/issueAuthorization: Basic {base64(email:token)}Content-Type: application/json
{ "fields": { "project": { "key": "PROJ" }, "summary": "Design drift detected", "description": { "type": "doc", ... }, "issuetype": { "name": "Bug" } }}