1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Automatic Repro Steps - Bug Reproduction Made Easy | UIZap</title> 7 <meta name="description" content="Never write reproduction steps again. UIZap automatically captures every click, input, and interaction leading to a bug. Human-readable steps developers can follow instantly."> 8 <meta name="keywords" content="reproduction steps, bug reproduction, repro steps, automatic step capture, bug tracking, QA testing"> 9 <link rel="canonical" href="https://uizap.com/features/repro-steps/"> 10 11 <!-- Open Graph --> 12 <meta property="og:title" content="Automatic Repro Steps - Bug Reproduction Made Easy | UIZap"> 13 <meta property="og:description" content="Never write reproduction steps again. UIZap automatically captures every click, input, and interaction leading to a bug."> 14 <meta property="og:type" content="website"> 15 <meta property="og:url" content="https://uizap.com/features/repro-steps/"> 16 17 <!-- Twitter Card --> 18 <meta name="twitter:card" content="summary_large_image"> 19 <meta name="twitter:title" content="Automatic Repro Steps - Bug Reproduction Made Easy | UIZap"> 20 <meta name="twitter:description" content="Never write reproduction steps again. Automatic reproduction step capture for every bug."> 21 22 <!-- Fonts --> 23 <link rel="preconnect" href="https://fonts.googleapis.com"> 24 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 25 <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"> 26 <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"></noscript> 27 28 <link rel="stylesheet" href="../../css/style.css"> 29 <link rel="icon" href="../../assets/logos/Logo_Glyph_Standard.svg" type="image/svg+xml"> 30 31
31<script type="application/ld+json"> 32 { 33 "@context": "https://schema.org", 34 "@type": "FAQPage", 35 "mainEntity": [ 36 { 37 "@type": "Question", 38 "name": "How are the steps generated?", 39 "acceptedAnswer": { 40 "@type": "Answer", 41 "text": "UIZap listens for clicks, inputs, page loads, and navigation events in the active tab and converts them into human readable sentences." 42 } 43 }, 44 { 45 "@type": "Question", 46 "name": "Does it work with single page applications?", 47 "acceptedAnswer": { 48 "@type": "Answer", 49 "text": "Yes. UIZap tracks DOM changes and route updates in SPA frameworks, so navigation without a full reload still appears in the timeline." 50 } 51 }, 52 { 53 "@type": "Question", 54 "name": "Can we exclude sensitive form fields?", 55 "acceptedAnswer": { 56 "@type": "Answer", 57 "text": "You can mark fields as sensitive in the extension options, and their values are replaced with secure placeholders in the generated steps." 58 } 59 }, 60 { 61 "@type": "Question", 62 "name": "Are keyboard shortcuts captured?", 63 "acceptedAnswer": { 64 "@type": "Answer", 65 "text": "Common keyboard shortcuts and input changes are recorded along with the context of the element that had focus at the time." 66 } 67 }, 68 { 69 "@type": "Question", 70 "name": "Where do developers see the steps?", 71 "acceptedAnswer": { 72 "@type": "Answer", 73 "text": "Steps are attached to every UIZap report and flow through to connected tools, sitting alongside screenshots, logs, and metadata." 74 } 75 } 76 ] 77 } 78 </script>
78 79</head> 80<body> 81 <!-- Header --> 82 <header> 83 <div class="container"> 84 <div class="logo"> 85 <a href="../../index.html"><img src="../../assets/logos/Logo_Standard.svg" alt="UI Zap" class="header-logo"></a> 86 </div> 87 <nav aria-label="Primary"> 88 <ul> 89 <li class="nav-item dropdown"> 90 <button class="nav-button" aria-expanded="false" aria-haspopup="true" aria-controls="menu-platform" id="menu-button-platform"> 91 Platform <span class="nav-caret" aria-hidden="true"></span> 92 </button> 93 <div id="menu-platform" class="dropdown-menu mega-menu" role="menu" aria-labelledby="menu-button-platform"> 94 <div class="mega-grid"> 95 <div class="mega-col"> 96 <h4 class="mega-title">Gather</h4> 97 <a href="/features/auto-logs/">Logs (Console + Network)</a> 98 <a href="/features/repro-steps/">Metadata</a> 99 <a href="/features/repro-steps/">Repro Steps</a> 100 </div> 101 <div class="mega-col"> 102 <h4 class="mega-title">Visualise</h4> 103 <a href="/features/annotated-screenshots/">Screenshots + Annotations</a> 104 <a href="/features/video-session-replay/">Video Recording</a> 105 <a href="/features/video-session-replay/">Session Replay</a> 106 </div> 107 <div class="mega-col"> 108 <h4 class="mega-title">Prioritise</h4> 109 <a href="/integrations/">Integrations</a> 110 </div> 111 </div> 112 </div> 113 </li> 114 <li class="nav-item dropdown"> 115 <button class="nav-button" aria-expanded="false" aria-haspopup="true" aria-controls="menu-integrations" id="menu-button-integrations"> 116 Integrations <span class="nav-caret" aria-hidden="true"></span> 117 </button> 118 <ul id="menu-integrations" class="dropdown-menu" role="menu" aria-labelledby="menu-button-integrations"> 119 <li><a role="menuitem" href="/integrations/slack/">Slack</a></li> 120 <li><a role="menuitem" href="/integrations/jira/">Jira</a></li> 121 <li><a role="menuitem" href="/integrations/github/">GitHub</a></li> 122 <li><a role="menuitem" href="/integrations/asana/">Asana</a></li> 123 <li><a role="menuitem" href="/integrations/">All Integrations</a></li> 124 </ul> 125 </li> 126 <li><a href="../../index.html#pricing">Pricing</a></li> 127 <li><a href="../../developer-tools/index.html">Tools</a></li> 128 <li><a href="https://docs.uizap.com" target="_blank">Docs</a></li> 129 </ul> 130 </nav> 131 <a href="https://chromewebstore.google.com/detail/ui-zap/pplbenebhpjdokfeapedjcbllncilfka" class="btn btn-primary" target="_blank">Install Extension</a> 132 </div> 133 </header> 134 135 <!-- Hero --> 136 <section class="hero"> 137 <div class="container"> 138 <div class="hero-content"> 139 <div class="hero-badge"> 140 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 141 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> 142 <polyline points="14 2 14 8 20 8"></polyline> 143 <line x1="9" y1="15" x2="15" y2="15"></line> 144 </svg> 145 Automatic Step Capture 146 </div> 147 <h1>Never Write<br><span class="gradient-text">Reproduction Steps Again</span></h1> 148 <p class="hero-description"> 149 Every click, input, and navigation automatically captured. UIZap turns user interactions into clear, human-readable reproduction steps developers can follow instantly. 150 </p> 151 <div class="hero-actions"> 152 <a href="https://chromewebstore.google.com/detail/ui-zap/pplbenebhpjdokfeapedjcbllncilfka" class="btn btn-primary btn-large" target="_blank"> 153 Install Free Extension 154 </a> 155 <a href="https://docs.uizap.com" class="btn btn-secondary btn-large" target="_blank"> 156 Read Documentation 157 </a> 158 </div> 159 <div class="hero-stats"> 160 <div class="stat"> 161 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 162 <polyline points="20 6 9 17 4 12" fill="none" stroke="currentColor" stroke-width="2"/> 163 </svg> 164 Every interaction tracked 165 </div> 166 <div class="stat"> 167 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 168 <polyline points="20 6 9 17 4 12" fill="none" stroke="currentColor" stroke-width="2"/> 169 </svg> 170 Zero manual writing 171 </div> 172 <div class="stat"> 173 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 174 <polyline points="20 6 9 17 4 12" fill="none" stroke="currentColor" stroke-width="2"/> 175 </svg> 176 Instant developer clarity 177 </div> 178 </div> 179 </div> 180 </div> 181 </section> 182 183 <!-- Example Steps Section --> 184 <section class="features"> 185 <div class="container"> 186 <div class="section-header"> 187 <h2>From This<br><span class="gradient-text">To This</span></h2> 188 <p>Watch UIZap transform messy manual notes into clear, actionable reproduction steps.</p> 189 </div> 190 191 <div class="features-grid" style="grid-template-columns: repeat(2, 1fr);"> 192 <div class="feature-box" style="opacity: 0.6;"> 193 <div class="feature-label" style="background-color: var(--text-tertiary);">Manual Steps (Before)</div> 194 <h3>â Vague & Time-Consuming</h3> 195 <div style="background: rgba(255,255,255,0.03); padding: 20px; border-radius: 8px; margin-top: 16px; font-family: monospace; font-size: 14px; line-height: 1.8; color: var(--text-tertiary);"> 196 <p style="margin: 0 0 12px 0;">1. Go to the login page</p> 197 <p style="margin: 0 0 12px 0;">2. Enter username and password</p> 198 <p style="margin: 0 0 12px 0;">3. Click submit</p> 199 <p style="margin: 0 0 12px 0;">4. Error happens (?)</p> 200 <p style="margin: 0; color: var(--accent);">â What username? Which error?</p> 201 </div> 202 </div> 203 204 <div class="feature-box"> 205 <div class="feature-label">UIZap Steps (After)</div> 206 <h3>â Clear & Complete</h3> 207 <div style="background: rgba(255, 219, 88, 0.05); padding: 20px; border-radius: 8px; margin-top: 16px; font-family: monospace; font-size: 14px; line-height: 1.8; border: 1px solid rgba(255, 219, 88, 0.2);"> 208 <p style="margin: 0 0 12px 0;">1. Navigated to https://app.com/login</p> 209 <p style="margin: 0 0 12px 0;">2. Clicked input field "email"</p> 210 <p style="margin: 0 0 12px 0;">3. Entered text "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="770312040337120f161a071b125914181a">[email protected]</a>"</p> 211 <p style="margin: 0 0 12px 0;">4. Clicked button "Sign In"</p> 212 <p style="margin: 0; color: var(--accent);">â Every detail captured automatically</p> 213 </div> 214 </div> 215 </div> 216 </div> 217 </section> 218 219 <!-- What Gets Captured --> 220 <section class="features" style="background-color: var(--dark-surface);"> 221 <div class="container"> 222 <div class="section-header"> 223 <h2>Every Action<br><span class="gradient-text">Automatically Documented</span></h2> 224 <p>UIZap tracks all user interactions and translates them into clear steps.</p> 225 </div> 226 227 <div class="data-grid"> 228 <div class="data-item"> 229 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 230 <path d="M9 11l3 3L22 4"></path> 231 <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path> 232 </svg> 233 <h4>Clicks & Taps</h4> 234 <p>
234Button clicks, link clicks, icon taps â every clickable element interaction captured with target details</p> 235 </div> 236 <div class="data-item"> 237 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 238 <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path> 239 <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path> 240 </svg> 241 <h4>Text Input</h4> 242 <p>Form fills, search queries, text edits â captures what was typed into which fields (sensitive data redacted)</p> 243 </div> 244 <div class="data-item"> 245 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 246 <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> 247 </svg> 248 <h4>Page Navigation</h4> 249 <p>URL changes, page loads, route transitions â complete navigation history with full paths</p> 250 </div> 251 <div class="data-item"> 252 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 253 <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> 254 <polyline points="15 3 21 3 21 9"></polyline> 255 <line x1="10" y1="14" x2="21" y2="3"></line> 256 </svg> 257 <h4>Element State Changes</h4> 258 <p>Dropdowns opened, checkboxes toggled, modals displayed â all UI state changes tracked</p> 259 </div> 260 </div> 261 </div> 262 </section> 263 264 <!-- The Problem --> 265 <section class="features"> 266 <div class="container"> 267 <div class="section-header"> 268 <h2>Stop the<br><span class="gradient-text">"Can You Reproduce?" Loop</span></h2> 269 <p>Without auto-repro, bugs become a game of telephone.</p> 270 </div> 271 272 <div class="features-grid" style="grid-template-columns: repeat(2, 1fr);"> 273 <div class="feature-box" style="opacity: 0.6;"> 274 <div class="feature-label" style="background-color: var(--text-tertiary);">Without UIZap</div> 275 <h3>â Lost in Translation</h3> 276 <ul class="feature-list"> 277 <li style="color: var(--text-tertiary);"> 278 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 279 <line x1="18" y1="6" x2="6" y2="18"></line> 280 <line x1="6" y1="6" x2="18" y2="18"></line> 281 </svg> 282 "I clicked something and it broke" 283 </li> 284 <li style="color: var(--text-tertiary);"> 285 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 286 <line x1="18" y1="6" x2="6" y2="18"></line> 287 <line x1="6" y1="6" x2="18" y2="18"></line> 288 </svg> 289 Missing critical steps 290 </li> 291 <li style="color: var(--text-tertiary);"> 292 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 293 <line x1="18" y1="6" x2="6" y2="18"></line> 294 <line x1="6" y1="6" x2="18" y2="18"></line> 295 </svg> 296 Can't reproduce the bug 297 </li> 298 <li style="color: var(--text-tertiary);"> 299 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 300 <line x1="18" y1="6" x2="6" y2="18"></line> 301 <line x1="6" y1="6" x2="18" y2="18"></line> 302 </svg> 303 Days of back-and-forth 304 </li> 305 <li style="color: var(--text-tertiary);">
306 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 307 <line x1="18" y1="6" x2="6" y2="18"></line> 308 <line x1="6" y1="6" x2="18" y2="18"></line> 309 </svg> 310 Bug marked "can't reproduce" 311 </li> 312 </ul> 313 </div> 314 315 <div class="feature-box"> 316 <div class="feature-label">With UIZap</div> 317 <h3>â Crystal Clear Steps</h3> 318 <ul class="feature-list"> 319 <li> 320 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 321 <polyline points="20 6 9 17 4 12"/> 322 </svg> 323 Every interaction captured 324 </li> 325 <li> 326 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 327 <polyline points="20 6 9 17 4 12"/> 328 </svg> 329 Complete reproduction path 330 </li> 331 <li> 332 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 333 <polyline points="20 6 9 17 4 12"/> 334 </svg> 335 First-try reproducibility 336 </li> 337 <li> 338 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 339 <polyline points="20 6 9 17 4 12"/> 340 </svg> 341 Zero follow-up questions 342 </li> 343 <li> 344 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 345 <polyline points="20 6 9 17 4 12"/> 346 </svg> 347 Bug fixed immediately 348 </li> 349 </ul> 350 </div> 351 </div> 352 </div> 353 </section> 354 355 <!-- Context Data --> 356 <section class="features" style="background-color: var(--dark-surface);"> 357 <div class="container"> 358 <div class="section-header"> 359 <h2>Not Just Steps<br><span class="gradient-text">Complete Context</span></h2> 360 <p>Every reproduction step includes the context developers need to debug.</p> 361 </div> 362 363 <div class="features-grid"> 364 <div class="feature-card"> 365 <div class="feature-icon"> 366 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 367 <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect> 368 <line x1="8" y1="21" x2="16" y2="21"></line> 369 <line x1="12" y1="17" x2="12" y2="21"></line> 370 </svg> 371 </div> 372 <h3>Browser & Device</h3> 373 <p>Chrome 120 on macOS 14.2, 1920x1080 viewport â exact environment captured automatically</p> 374 </div> 375 <div class="feature-card"> 376 <div class="feature-icon"> 377 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 378 <circle cx="12" cy="12" r="10"></circle> 379 <polyline points="12 6 12 12 16 14"></polyline> 380 </svg> 381 </div> 382 <h3>Timestamps</h3> 383 <p>Every step timestamped to understand timing, delays, and sequence of interactions</p> 384 </div> 385 <div class="feature-card"> 386 <div class="feature-icon"> 387 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 388 <path d="M12 2L2 7l10 5 10-5-10-5z"></path> 389 <path d="M2 17l10 5 10-5"></path> 390 <path d="M2 12l10 5 10-5"></path> 391 </svg> 392 </div> 393 <h3>User State</h3> 394 <p>Logged in vs logged out, permissions, selected options â all user state captured</p> 395 </div> 396 </div> 397 </div> 398 </section> 399 400 <!-- Team Benefits --> 401 <section class="features"> 402 <div class="container"> 403 <div class="section-header"> 404 <h2>Better Bug Reports<br><span class="gradient-text">For Everyone</span></h2> 405 <p>QA writes less. Developers reproduce faster. Everyone wins.</p> 406 </div> 407 408 <div class="features-grid"> 409 <div class="feature-card"> 410 <div class="feature-icon"> 411 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 412 <path d="M9 11l3 3L22 4"></path> 413 <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path> 414 </svg> 415 </div> 416 <h3>For QA Teams</h3> 417 <p>Stop manually documenting every click. UIZap captures steps automatically while you test. Write bug reports 10x faster with perfect reproduction steps every time.</p> 418 </div> 419 <div class="feature-card"> 420 <div class="feature-icon"> 421 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 422 <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path> 423 </svg> 424 </div> 425 <h3>For Developers</h3> 426 <p>Reproduce bugs on first try with exact steps. No more "works on my machine" â you'll see exactly what the user did, in what order, with complete context.</p> 427 </div> 428 <div class="feature-card"> 429 <div class="feature-icon"> 430 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 431 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> 432 </svg> 433 </div> 434 <h3>For Support Teams</h3> 435 <p>Escalate customer issues with reproducible steps. No need to interrogate customers or test yourself â just capture and forward complete repro steps to engineering.</p> 436 </div> 437 </div> 438 </div> 439 </section> 440 441 <!-- Integration --> 442 <section class="integrations"> 443 <div class="container"> 444 <div class="integration-header"> 445 <h2>Steps Sent<br><span class="gradient-text">To Your Tools</span></h2> 446 <p>Reproduction steps automatically included in every ticket.</p> 447 </div> 448 449 <div class="integration-grid"> 450 <div class="integration-item"> 451 <div class="integration-item-header"> 452 <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor"> 453 <path d="M12 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .32.192.694.801.576C20.563 21.8 24 17.302 24 12 24 5.373 18.627 0 12 0z"/> 454 </svg>
455 <span class="badge badge-available">Available</span> 456 </div> 457 <h3>GitHub</h3> 458 <p>Repro steps added as formatted numbered lists in issue descriptions</p> 459 </div> 460 <div class="integration-item"> 461 <div class="integration-item-header"> 462 <svg width="40" height="40" viewBox="0 0 32 32"> 463 <path d="M29.665 15.217 17.208 3.168 16 2 6.623 11.07 2.335 15.217a.825.825 0 0 0 0 1.567L10.903 25.07 16 30l9.377-9.07.146-.14 4.142-4.006a.825.825 0 0 0 0-1.567ZM16 20.139 11.72 16 16 11.861 20.28 16 16 20.139Z" fill="#2684FF"/> 464 </svg> 465 <span class="badge badge-available">Available</span> 466 </div> 467 <h3>Jira</h3> 468 <p>Steps to reproduce section auto-filled with numbered reproduction steps</p> 469 </div> 470 <div class="integration-item"> 471 <div class="integration-item-header"> 472 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 473 <rect x="13" y="2" width="3" height="8" rx="1.5"/> 474 <path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5"/> 475 <rect x="8" y="14" width="3" height="8" rx="1.5"/> 476 <path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5"/> 477 <rect x="14" y="13" width="8" height="3" rx="1.5"/> 478 <path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5"/> 479 <rect x="2" y="8" width="8" height="3" rx="1.5"/> 480 <path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5"/> 481 </svg> 482 <span class="badge badge-available">Available</span> 483 </div> 484 <h3>Slack</h3> 485 <p>Formatted step-by-step list included in bug report messages</p> 486 </div> 487 </div> 488 489 <div style="text-align: center; margin-top: 48px;"> 490 <a href="../../integrations/" class="btn btn-secondary btn-large">View All Integrations</a> 491 </div> 492 </div> 493 </section> 494 495 <!-- Other Features --> 496 <section class="features" style="background-color: var(--dark-surface);"> 497 <div class="container"> 498 <div class="section-header"> 499 <h2>Complete<br><span class="gradient-text">Bug Reporting Suite</span></h2> 500 <p>Repro steps are just one piece. Get the full picture with UIZap.</p> 501 </div> 502 503 <div class="features-grid"> 504 <a class="feature-card" href="../auto-logs/" style="text-decoration: none;"> 505 <div class="feature-icon"> 506 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 507 <polyline points="4 17 10 11 4 5"></polyline> 508 <line x1="12" y1="19" x2="20" y2="19"></line> 509 </svg> 510 </div> 511 <h3>Auto Logs</h3> 512 <p>Console and network logs captured automatically with every bug report</p> 513 </a> 514 <a class="feature-card" href="../annotated-screenshots/" style="text-decoration: none;"> 515 <div class="feature-icon"> 516 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 517 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> 518 <circle cx="8.5" cy="8.5" r="1.5"></circle> 519 <polyline points="21 15 16 10 5 21"></polyline> 520 </svg> 521 </div> 522 <h3>Annotated Screenshots</h3> 523 <p>Screenshot with built-in markup tools for visual bug documentation</p> 524 </a> 525 <a class="feature-card" href="../video-session-replay/" style="text-decoration: none;"> 526 <div class="feature-icon"> 527 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 528 <polygon points="5 3 19 12 5 21 5 3"></polygon> 529 </svg> 530 </div> 531 <h3>Video + Session Replay</h3> 532 <p>HD screen recording or automatic 2-minute instant replay capture</p> 533 </a> 534 </div> 535 </div> 536 </section> 537 538 <!-- FAQ --> 539 <section class="features" style="background-color: var(--dark-surface);"> 540 <div class="container"> 541 <div class="section-header"> 542 <h2>Repro Steps<br><span class="gradient-text">FAQ</span></h2> 543 <p>Understand how automatic reproduction steps are created and delivered.</p> 544 </div> 545 <div class="faq-grid"> 546 <details class="faq-item"> 547 <summary> 548 <h3>How are the steps generated?</h3> 549 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 550 <polyline points="6 9 12 15 18 9"></polyline> 551 </svg> 552 </summary> 553 <p>UIZap listens for clicks, inputs, page loads, and navigation events in the active tab and converts them into human readable sentences.</p> 554 </details> 555 <details class="faq-item"> 556 <summary> 557 <h3>Does it work with single page applications?</h3> 558 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 559 <polyline points="6 9 12 15 18 9"></polyline> 560 </svg> 561 </summary> 562 <p>Yes. UIZap tracks DOM changes and route updates in SPA frameworks, so navigation without a full reload still appears in the timeline.</p> 563 </details> 564 <details class="faq-item"> 565 <summary> 566 <h3>Can we exclude sensitive form fields?</h3> 567 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 568 <polyline points="6 9 12 15 18 9"></polyline> 569 </svg> 570 </summary> 571 <p>
571You can mark fields as sensitive in the extension options, and their values are replaced with secure placeholders in the generated steps.</p> 572 </details> 573 <details class="faq-item"> 574 <summary> 575 <h3>Are keyboard shortcuts captured?</h3> 576 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 577 <polyline points="6 9 12 15 18 9"></polyline> 578 </svg> 579 </summary> 580 <p>Common keyboard shortcuts and input changes are recorded along with the context of the element that had focus at the time.</p> 581 </details> 582 <details class="faq-item"> 583 <summary> 584 <h3>Where do developers see the steps?</h3> 585 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 586 <polyline points="6 9 12 15 18 9"></polyline> 587 </svg> 588 </summary> 589 <p>Steps are attached to every UIZap report and flow through to connected tools, sitting alongside screenshots, logs, and metadata.</p> 590 </details> 591 </div> 592 </div> 593 </section> 594 <!-- Final CTA --> 595 <section class="cta"> 596 <div class="container"> 597 <div class="cta-content"> 598 <div class="cta-badge"> 599 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 600 <polyline points="20 6 9 17 4 12"/> 601 </svg> 602 Free Forever 603 </div> 604 <h2>Start Reporting Bugs<br><span class="gradient-text">With Perfect Repro Steps</span></h2> 605 <p>No credit card required. Every bug report includes automatic reproduction steps.</p> 606 <div class="hero-actions"> 607 <a href="https://chromewebstore.google.com/detail/ui-zap/pplbenebhpjdokfeapedjcbllncilfka" class="btn btn-primary btn-large" target="_blank"> 608 Install Free Extension 609 </a> 610 </div> 611 <div class="cta-features"> 612 <div class="cta-feature"> 613 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 614 <polyline points="20 6 9 17 4 12"/> 615 </svg> 616 Auto-captured steps 617 </div> 618 <div class="cta-feature"> 619 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 620 <polyline points="20 6 9 17 4 12"/> 621 </svg> 622 Human-readable 623 </div> 624 <div class="cta-feature"> 625 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 626 <polyline points="20 6 9 17 4 12"/> 627 </svg> 628 Works on any website 629 </div> 630 </div> 631 </div> 632 </div> 633 </section> 634 635 <!-- Footer --> 636 <footer> 637 <div class="container"> 638 <div class="footer-content"> 639 <div class="footer-info"> 640 <div class="footer-logo"> 641 <img src="../../assets/logos/Logo_Standard.svg" alt="UI Zap" class="footer-logo-img"> 642 </div> 643 <p>The fastest way to report bugs with automatic debug data collection, built for developers, by developers.</p> 644 <p class="copyright">© 2025 UIZap. All rights reserved.</p> 645 </div> 646 <div class="footer-links"> 647 <div class="footer-column"> 648 <h4>Product</h4> 649 <ul> 650 <li><a href="../../index.html#features">Features</a></li> 651 <li><a href="../../index.html#integrations">Integrations</a></li> 652 <li><a href="https://blog.uizap.com">Blog</a></li> 653 <li><a href="../../privacy-policy/">Privacy Policy</a></li> 654 </ul> 655 </div> 656 <div class="footer-column"> 657 <h4>Support</h4> 658 <ul> 659 <li><a href="https://tally.so/r/wM4QVl" target="_blank">Contact Us</a></li> 660 </ul> 661 </div> 662 </div> 663 </div> 664 </div> 665 </footer>
vendor: 113 bytes, lines 665-666
665 666 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
666<script src="../../assets/js/analytics.js" defer></script>
666 667
667<script src="../../assets/js/nav.js" defer></script>
vendor: 1 bytes, line 667
667
668<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"8226f79213f445e09438ea3e9a617bab","r":1,"spa":2}' crossorigin="anonymous"></script>
668 669</body> 670</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.