Developer workflow
Keep Code Snippets and Screenshots Visible While Debugging
When a UI bug takes you between editor and browser, the screenshot and suspected lines can disappear behind windows. FloatBoard can keep that small set visible above the editor while you test a fix; it is not a searchable code library. This guide shows a repeatable debugging workflow and compares massCode, Pieces and Cacher for storage and retrieval.
Start with one reproducible UI bug
First write down the action that triggers the bug, the viewport or window size and what actually happens. Then record the expected behavior. A screenshot without these details can look convincing but leave a teammate unable to reproduce anything.
Keep the screenshot in your issue or project folder, where it will still be available after this working session. Copy only the smallest relevant markup or CSS fragment onto your temporary board. Label it with the file path and component name so you can return to the authoritative source.
Do not paste access tokens, customer data or private URLs into a board that may appear in a screen share. Redact the screenshot before sharing it.
Put a screenshot and code snippet side by side
- Capture the visual symptom. Make one screenshot at the size where the problem appears. Keep the original in the bug report.
- Copy the relevant snippet. Add its file path and a brief note about why you suspect it. A text card is a reference, not a synchronized copy of the source file.
- Add both to FloatBoard. Put the screenshot in the image panel and the snippet plus expected result in the text panel. The image above shows this mixed layout.
- Pin the board beside the editor. Keep it in view while the editor and browser remain the tools you use to change and test the code.
- Change one likely cause and reproduce again. Replace the working note with the new observation; do not stack unexplained copies of the same snippet.
This is useful when you need a snippet manager with images for the immediate task. FloatBoard is not a searchable code library or an IDE: it does not run code, highlight syntax or keep pasted text in sync with Git.
Example: debug an overflowing image grid at 390px
Suppose a gallery extends past its container on a narrow screen. The note below keeps the question, evidence and next check together. It is an illustrative checklist, not a diagnosis of FloatBoard or a universal CSS fix.
Bug: image cards overflow the gallery panel
Reproduce: open the gallery at a 390px viewport
Actual: horizontal scrolling appears
Expected: cards stay inside the panel
Source: styles/gallery.css, .gallery-grid
Evidence: screenshot saved in issue #123
Next check: grid columns, item min-width, image sizingIn DevTools, inspect the actual grid and its children. If a child cannot shrink, test whether its minimum size causes the overflow; if the column definition is fixed, test a responsive layout. Keep the before and after screenshots at the same viewport. The fix belongs in the source and its test, not in the reference note.
Snippet manager or floating board? Choose by the job
A code snippet manager is a better place for examples you want to search and reuse next month. A floating board is for the few references you must compare while fixing one bug today. This is a feature-and-use-case comparison based on the linked product documentation, checked on 28 September 2026; we did not benchmark the competing apps. FloatBoard publishes this guide.
| Tool | Useful when | Image and code context |
|---|---|---|
| massCode | You need a searchable, reusable local snippet library. Its Code workspace supports folders, tags and search. | Its Notes and Drawings can contain visual material. Do not treat it as a text-only app. |
| Pieces | You need capture and retrieval features beyond a small working board. | Pieces documents image pasting and code extraction from screenshots. Check its current product and plan before choosing it. |
| Cacher | You want a searchable code library, editor integrations or team snippets. Its documentation describes search and insertion. | Its attachments support pasted images. Do not assume a snippet manager cannot store screenshots. |
| FloatBoard | You want a small screenshot and text reference visible above your editor while investigating one issue. | Separate image and text panels sit in one always-on-top window. There is no code-library search or syntax highlighting. Check the current plan limits before planning a larger working set. |
Looking for a massCode alternative or a Pieces alternative? If the missing feature is search, tagging or long-term snippet reuse, FloatBoard is not a direct replacement. If your problem is losing the screenshot while changing CSS, try a mixed reference board alongside your existing snippet library. Dash is another documentation and snippet tool, primarily for macOS, when API reference lookup is the main job.
Use clipboard history for retrieval, the board for comparison
A clipboard manager can preserve recently copied material, including images in some products. A saved snippet adds information such as title, language and source. A floating board keeps selected material visible. These are different roles, and one app can support more than one role.
FloatBoard combines recent text clipboard history with a visible text-and-image board. The board lets you compare a screenshot with a pasted code fragment, but its clipboard history is not a versioned snippet library. Always compare an older clip with the current source before reusing it. See the clipboard workflow for the product details.
Questions developers ask about snippets and screenshots
What is the best way to organize code snippets?
Keep production code in the repository. Save genuinely reusable fragments in a searchable snippet manager with a descriptive title, language, source link and date or version. Keep temporary debugging fragments in a small task board, then remove them when the issue is resolved.
Can a clipboard manager store images?
Some can; capabilities differ by product. FloatBoard lets you add images to its visible board and has recent text clipboard history. Do not assume its history stores every image you have copied. For a screenshot you must preserve, save the original in your project or issue tracker.
Is there a free alternative to Pieces for snippets?
massCode is a free, open-source snippet library, according to its official site. FloatBoard has a limited free plan for visible text-and-image references, but is not a Pieces replacement for searchable snippets or image-to-code extraction. Compare current plans and features on each official site.
What is the best code snippet manager for Windows?
There is no single best choice for every workflow. For a searchable local library, compare massCode with Cacher; for screenshot-to-code features, examine Pieces. For keeping a screenshot and the few relevant lines visible while you edit, FloatBoard can complement those tools. Try the task you actually repeat before committing your whole library.
Keep the fix, clear the temporary board
When the issue is fixed, record the reproduction steps, changed file and before-and-after evidence in the issue or pull request. Store reusable snippets in the repository or a searchable library. Remove temporary references that no longer explain the task.
Try FloatBoard for a small UI debugging task with one screenshot, one snippet and one expected result. If the real pain is research notes rather than code, see the writing reference workflow.