Use Case: Providing Visual Assistance for Code Reviews

For front-end developers, code review is not just about logic; it's also about the final visual presentation. Full Page Screenshot can help you clearly showcase UI-related changes in your Pull Requests (PRs), significantly improving review efficiency.

Why Can Screenshots Accelerate Code Reviews?

• Beyond Code: The code itself cannot fully convey the visual effect. Screenshots provide "what you see is what you get" proof, making it clear to reviewers at a glance.
• Clear "Before" and "After": Including annotated screenshots in a PR description clearly shows what you've fixed or added.
• Saves Time for Reviewers: Reviewers can quickly understand UI changes without needing to switch branches, pull code, install dependencies, and run the project locally, allowing them to provide feedback faster.

Step-by-Step Guide

Step 1: Capture "Before" and "After" States

Before you start writing code, take a screenshot of the current UI with the issue—this is the "before" state. After completing your code changes, run your application locally and take a screenshot of the new UI effect—this is the "after" state.

Step 2: Highlight Core Changes

In the editor, you can annotate the "after" screenshot to highlight your work:

1. Use the Arrow and Rectangle Tools: Clearly point out the UI elements you have fixed or improved.
2. Add Text Explanations: If necessary, add short text to explain the purpose or effect of the change.
3. Create a Comparison Image: For even better effect, you can combine the "before" and "after" screenshots into a single comparison image using any image editing tool.

Step 3: Attach to Your Pull Request

Upload the processed screenshots to your Pull Request description. In the description text, you can guide reviewers to look at the screenshots, for example: "Please see the screenshot below, which demonstrates the new layout effect."

This helps team members quickly grasp the core value of your work and provide more precise feedback on the visual aspects.

Best Practices

Tip: For changes involving complex interactions or animations, a single static screenshot may not be enough. In such cases, consider recording a short GIF and attaching it to your PR description along with your screenshots to provide the most complete context.