Testing the real word (a.k.a. the not staging, the not dev server, the real world live internet). Obtrusive, valueable testing feedback while browsing. Every page, all the time.

What is it?

It's a sandboxed, extendable testing chrome extension and framework! It runs pre-defined and custom tests on each page that you visit.

What does it do?

The extension collects the whole lifecycle of a pageload (http-headers, onpageload, onDOMready, ...) in an object, then it executes javascript functions against this object and returns testing feedback. Additionally it can fetch external APIs from the rules, plus other variants of the page you are currently on (i.e. with/without trailing slash, mobile version, whatever you like ...) and perform test on these fetches.

It has multiple pre-defined rules currently targeting SEO and webperformance best practices. Plus some open-graph debugging.

How I built it

A chrome extension built with react that executes pre-existing and custom rules (written by me or by you)

Challenges I ran into

Actually collecting the lifecycle of a page was easy, working around google chrome sandbox to enable fetch API was hard. There are an unbelievable number of state changes all the time, that is wher react came in very handy. Don't think such an application would be possible (without loosing ones mind) without react.

Accomplishments that I'm proud of

Real Time robots.txt testing. While you browse a page the robots.txt gets fetched, the URL tested against it and if a robots.txt rule matched feedback (what rules match and what rule wins) get reported back.

Also we already got the feedback of devs that they found bugs and identified areas of improvement as the real world - the wild wild internet - is a different beast than the utopia of our "everything within our control" dev environment. Some user it to test their sites for known edge-cases and have started to write their own rules.

What I learned

The lifecycle of a pageload is complicated and a story full of misconceptions and simplifications. Also react is awesome and pretty good debug output. Also the real world is something between messy and really, really messed up. And: for good websites we need in your face visual feedback whenever we look at a page.

What's next for f19n obtrusive livetest

More rules, more edge cases to test. More best practice speed tests, more test for social media best practices. More outside contribution for new rules.

Built With

Share this project: