PageSourceSearch

https://uizap.com/features/repro-steps/

html uizap.com collected 2026-10-02 00:34:16 UTC 38,784 bytes, 670 lines download raw bytes

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&#160;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.