A few days ago, I wrote a blog post about 3 web development tools you’ve probably never heard of and, lo and behold, I was told by many people that, in fact, they had never heard of them. So today, I figured I’d share the wealth and let you know about three more. You’re welcome.
1. Visual Event
![Visual Event](/assets/img/blog/web-dev-tools/visual-event.png)
This is a handy bookmarklet that creates a visual overlay on the current webpage indicating which DOM elements have events bound to them. This is abolutely clutch for cutting your way through the jungle of events handlers that often pollute a complicated page. In a single glance, you can figure out if the button that’s misbehaving has a click handler, or if it’s the div above it, or the body tag all the way at the top.
2. lorempixum
![lorempixum](/assets/img/blog/web-dev-tools/lorem-pixum.png)
Building a prototype of a website and need a placeholder image? Look no further than this awesome
service. Just include a standard img src
tag in your page and specify the
dimensions, colors and even category of the image in the URL, and you’re done.
For example:
<img src="http://lorempixum.com/400/200/sports">
Produces the following image (and you’ll get a different one each time you refresh the page):
Of course, an honorable and adorable mention must go out to http://placekitten.com/, a service which offers roughly the same functionality, except all the images are of kittens:
3. loads.in
![loads.in](/assets/img/blog/web-dev-tools/loads-in.png)
Test your webpage’s load time from various locations and web browsers all over the world. Just plug in the URL, click start, and you get back the load time, screenshots of the page loading at various stages, a waterfall chart and even the ability to download the HAR file.
Herman van der Veer
If you enjoyed this post, you may also like my books, Hello, Startup and Terraform: Up & Running. If you need help with DevOps or infrastructure, reach out to me at Gruntwork.