DevTools Panel

The DevTools Panel provides deeper analysis capabilities than the Side Panel. Use it when you need to inspect element styles, view complete HTML context, or export detailed reports.

Opening the DevTools Panel

1. Open Chrome DevTools (F12 or Ctrl+Shift+I / Cmd+Option+I)
2. Find the VertaaUX tab in the DevTools panel bar
3. Click the tab to activate the panel

When to Use DevTools vs Side Panel

Interface Overview

The DevTools Panel uses a split-pane layout:

Left Pane: Issue List

The left side displays all discovered issues:

Features:

• Same filtering options as Side Panel (severity, category, status)
• Search box for finding specific issues
• Issue count with severity breakdown
• Collapsible category groups

Click an issue to view its details in the right pane.

Right Pane: Issue Detail

The right side shows comprehensive details for the selected issue:

Overview Tab

• Issue title and severity badge
• Description - What the problem is
• Impact - How it affects users
• WCAG Reference - Success criterion and level (for accessibility issues)
• Rule ID - Internal identifier for the check

Element Tab

View the affected DOM element:

Element HTML:

<button class="submit-btn" style="padding: 4px;">
  Submit
</button>

The full element HTML is shown, not truncated like in the Side Panel.

Element selector:

button.submit-btn

Click the copy icon to copy the selector.

Element path:

html > body > main > form > button.submit-btn

The full DOM path from root to element.

Styles Tab

View computed styles relevant to the issue:

For color contrast issues:

For touch target issues:

Context Tab

See the element in page context:

• Screenshot thumbnail - Element highlighted on page capture
• Surrounding HTML - Element with parent and sibling context
• Related issues - Other issues on the same or nearby elements

Bottom Bar: Actions

Action buttons span the bottom of the panel:

Element Inspector Integration

The DevTools Panel integrates with Chrome's built-in DevTools:

Inspecting an Element

1. Select an issue in the VertaaUX panel
2. Click "Open in Elements"
3. Chrome switches to the Elements tab with the element selected
4. Modify styles in real-time to test fixes

Testing Fixes

Workflow for fixing a contrast issue:

1. Select the contrast issue in VertaaUX DevTools
2. Note the current color and required ratio
3. Click "Open in Elements"
4. In the Styles pane, edit the color property
5. Chrome shows the new contrast ratio in real-time
6. When satisfied, copy the new value to your code

Viewing Computed Styles

For complex styling issues:

1. Select the issue in VertaaUX DevTools
2. Click "Open in Elements"
3. In Chrome DevTools, switch to the "Computed" tab
4. See all computed values, including inherited styles

Comparing with WCAG Criteria

For accessibility issues, the DevTools Panel shows WCAG mapping:

Example: Color Contrast Issue

WCAG 2.1 Success Criterion 1.4.3 - Contrast (Minimum)
Level: AA
Requirement: Text must have a contrast ratio of at least 4.5:1

Current: 3.2:1 (FAIL)
Required: 4.5:1 (AA) or 7:1 (AAA)

Links to the official WCAG documentation are included for reference.

Export Options

The DevTools Panel supports comprehensive exports:

JSON Export

Full data export for integrations:

{
  "scan": {
    "url": "https://example.com",
    "timestamp": "2024-01-15T10:30:00Z",
    "mode": "full",
    "duration_ms": 12340
  },
  "summary": {
    "total": 24,
    "by_severity": {
      "critical": 2,
      "serious": 5,
      "moderate": 10,
      "minor": 7
    }
  },
  "issues": [
    {
      "id": "issue_1",
      "rule_id": "color-contrast",
      "severity": "serious",
      "message": "Text has insufficient color contrast",
      "element": {
        "selector": "p.subtitle",
        "html": "<p class=\"subtitle\">Welcome</p>",
        "path": "html > body > header > p.subtitle"
      },
      "wcag": {
        "criterion": "1.4.3",
        "level": "AA"
      },
      "details": {
        "foreground": "#666666",
        "background": "#ffffff",
        "ratio": "5.74:1",
        "required": "4.5:1"
      }
    }
  ]
}

Use cases:

• Import into issue tracking systems
• Feed into CI/CD pipelines
• Custom reporting dashboards

CSV Export

Spreadsheet-friendly format:

Use cases:

• Share with designers or PMs
• Import into Jira, Linear, or other trackers
• Create prioritized fix lists

Screenshot Export

Capture annotated page screenshot:

1. Click "Export Screenshot" in the panel header
2. Choose annotation options:
   • All issues highlighted
   • Only selected issue
   • Severity filter
3. PNG downloads with issue annotations baked in

Use cases:

• Documentation and reports
• Bug tickets with visual context
• Before/after comparisons

Keyboard Shortcuts

Navigate the DevTools Panel efficiently:

Using with Other DevTools Panels

With Console

Check for JavaScript errors related to accessibility:

// In Console, find elements missing ARIA labels
document.querySelectorAll('button:not([aria-label]):not([aria-labelledby])');

With Network

Debug issues related to dynamically loaded content:

1. Enable "Preserve log" in Network panel
2. Run a Full Scan in VertaaUX
3. Check which requests completed before scan finished

With Performance

Correlate UX issues with performance:

1. Record a Performance trace
2. Run a VertaaUX scan
3. Compare: slow interactions often have UX issues

Tips for Deep Analysis

1. Use the Styles tab - Understand why an issue exists, not just that it does
2. Test fixes live - Edit styles in Elements panel before changing code
3. Export regularly - Keep records of issues found and fixed
4. Compare scans - Export before and after fixing to show progress
5. Link issues - Use JSON export to feed into tracking systems

Next Steps

Related

• API Get Audit - Retrieve detailed audit results programmatically
• CLI Output Formats - Same export formats from command line