October 8, 2018

Framed! Browser Extension

Doing testing in production is very risky, and there are times when you may not be aware that you're in production. There is a tool called "Framed!", that will let you know when you're in Production. Now you'll be aware when you're in Production with a simple frame around the website.

Developer Description

This tool grants you the power to add a custom border to visually separate different web hostsFrame your hosts, avoid mistakes!

As a web developer you are probably working with a bunch of different environments, all looking almost exactly the same. Keeping track of whether you are on a more safe-to-experiment development server, or if you accidentally stumbled in on the live server, isn't all that easy or obvious.

Laptop Framed

Four Things I Learns about Framed!

  • You can use a wildcard for the hostnames, so *.company.com will handle all sites under the domain.
  • Set a custom frame id name, so that it doesn't interfere with any existing property.
  • If you're using a Retina Display, use a larger border width so it's more visible. 8px worked well in my testing.
  • The nice thing about Framed! is that you just need to set it once. If you haven't used it in a while, you may wonder why certain sites have red frames around them.

Get Framed!

The Browser utility is available for Firefox and Chrome.

Comments

Add your Comments

Feel free to leave a comment about this post.

- Feel Free to add HTML to your comment!