Toybox Inspect

Visually inspect CSS, accessibility, & redlines on your site

With Toybox Inspect - instantly view the CSS, accessibility and spacing of any element you hover over. If you notice an issue, log a bug with 1-click.
✓ View clean CSS
✓ Check if your site is a11y
✓ See spacing with redlines
✓ Export bugs to existing tools
Discussion
Would you recommend this product?
5 Reviews4.0/5
Hi there Product Hunt 👋 It's been almost a year since we launched our first version of Toybox - craziness! We're now super excited to share the completely rebuilt and reimagined version 2.0 :) Over the past year, we've seen how frustrating and time-consuming gathering feedback and logging bugs on websites can be. Because of this, we set out wanting to: 1. Help you quickly find bugs on your site 2. Let you log those bugs in seconds 3. Make sure you have all the info needed to easily fix those bugs. To help us in this mission, today we're introducing Toybox Inspect. Inspect lets you visually see the CSS, accessibility, and spacing of any element on your site - just by hovering over it. This is an awesome tool for designers and developers to spot any UI inconsistencies, accessibility issues, or spacing problems in a flash. We've got a long way to go but we're thrilled to share what we have and we think you're going to love it. Looking forward, we've some great new features planned for the product including linting, auditing, and more! We'd love to hear any and all feedback you may have. We'll be here all day or feel free to email us directly at brendan @ toyboxsystems.com or jono @ toyboxsystems.com Thanks so much for your support, The Toybox Team
I have CSSscan, but I would rather use this! Use-case: feedback loops for website iterations! The in-context notes (including viewport and device) as well as redlines, contrast ratio checks and a task list make this a game changer in my workflow. All of this used to go in an unbearably long slack thread. Really great work y'all, I'm really impressed!
@makennasmutz Thanks so much!
@makennasmutz Really appreciate that! That is 100% the workflow that we are trying to improve i.e. feedback loops for website iterations. As you get using it - please don't hesitate to reach out if you have any questions or feedback. Would love to hear your thoughts :)
I've been using Toybox for about a year and although I don't use all of its features, I find that contextual comments are the easiest way for me to both send and receive feedback about web designs. Once you get a hang of the interface it makes it a lot easier to give feedback that would have been tough to describe with a screen grab or written word, which means that for OCD guys like myself, I can finally tell someone they need to move a button 3 pixels to the right, or which of the elements don't look aligned to my eye, or which colors clash, etc. Being able to give feedback with precision is fantastic.
@peter_pezaris Thanks so much Peter! So glad it's been helpful for your team :)
We've been using the Inspect beta for the past few weeks and it's been incredible. It allows us to QA our UI much faster than Chrome dev tools.
@williamsulinski Thanks so much William!! So glad to hear that :)
Viewing CSS can just be done with CSSscan, which is $19 in total (on sale) and lasts a lifetime? I don't see a reason to have toybox for this much more money. I must admit, though, that the tool itself looks good. The pricing just isn't nearly competitive enough from what I can see.
@lucas_hogendoorn1 Totally hear you. We think CSSscan is an awesome tool and great value for what it does. We've taken that concept a big step further though - letting you complete a full QA feedback loop with commenting, task management, integrations, and more.