Introducing Toybox Inspect
Brendan Mahony
July 29, 2019
3m read

Dev Tools — we use them constantly when QA'ing the sites we've designed. As we go through the page, we right-click on elements (praying it will select the correct one) watching as our entire site shifts over as a wall of code appears.

HTML, CSS, console errors — a mammoth-sized mass of information displays right before our eyes. Quite frankly, most of this isn't relevant to what we as designers need to do our jobs.

When doing QA, I simply want to know:

  • Does something look off?
  • Are there accessibility issues?
  • What styles are being applied?

If I happen to come across an issue, then it's my job to log that bug and share with my team.

Being designers and developers ourselves - we thought it was about time that designers got an Inspector of their own — one that is built with them in mind. That is why today, we're officially launching Toybox Inspect (Also check us out on Product Hunt)

Inspect is built by and for designers. It is truly the fastest way to view CSS, accessibility and spacing of any element on your site. If you notice something looks off or inconsistent, log a bug in literally 1-click.

Inspect has a ton of amazing features that will supercharge your QA workflow. Read more about what makes this tool so valuable for your team and process below:

Clean CSS

It's a serious pain to look through rows and rows of CSS (most of which isn't even being applied!) to find what you're looking for. Not only that - you have to constantly be right-clicking or scanning the DOM to select the element you want.

To change all that - we built Inspect so you can simply hover over an element to view JUST the CSS being applied. Not a bunch of other styles you don't care about.

Accessibility

We all know how important it is for our sites to be passing a11y guidelines. That's why we've included the WCAG color contrast ratios directly within Inspect.

As you're hovering over elements - you can instantly be notified if something doesn't pass AA or AAA ratings.

Redlines

Spacing is almost always the thing we designers need to tweak. It can often look different when making its way from your design files to the web. Things get lost and padding/margin frequently require some love.

With Inspect, you can now turn on redlines to see the spacing between any element on your page.

Log a bug

One of the biggest pains is after you've actually found a tweak you need to make (i.e. let's change this padding-top from 4px to 8px) — it can take a HUGE amount of time, tools, and effort to simply notify your Engineers and team of the issue.

Well, that is now a thing of the past. If you notice a bug — all you have to do is leave a comment and Toybox takes care of the rest. Once you press post, we take cropped screenshots, full-page screenshots, record the browser data, OS, viewport size and more.

Simply share the Toybox project with your team or export the tasks to your existing tools. Your QA process will never be the same — helping you build the best bug-free experience for your users.

Try it out today

We've got a lot of exciting improvements and features we'd love to add and we can't do it without you. Try Toybox Inspect today (free 30 day trial) and let us know your thoughts. You can reach us anytime at brendan @ toyboxsystems.com or follow us on Twitter

Start your free trial
Free 30 day trial · No credit card required · Easy setup
backed by
© Toybox 2019