Right On Page Devtools

Look into API responses and observe console logs right on page

Why use it?

1. 🚀 Speed up debugging for web development
2. 🙈 No more overlooked JS exceptions
3. 📱 Inspect elements right on web pages

FAQ

1. 💰 What kind of pricing?

   One time payment for a lifetime license. Early birds get it for a lower price.

   Check out this product page for more details.

   Each license could support up to 5 devices.

   Once purchased, your license could enjoy all new features of this tool for free.

2. 🏗️ How does it work?

   To capture console logs and errors and observe API requests, the browser extension wraps around API like console, fetch, XMLHttpRequest to monitor their calls.

   To capture Javascript errors, the extension listens to "error" and "unhandledrejection" events.

3. 🚫 Situations where it won't work

   Right now we're not able to sniff API response with "content-security-policy" header that has restriction on "script-src"

4. 🔇 How to turn it on / off?

   Clicking on the "owl" extension icon will toggle its visibility for the current domain

   The first click on each domain requires granting permission for us to access it.

   All domains are turned off by default, except for rightonpage.dev .

5. ⭕ What are counted as errors and exceptions?

   1) console.error(..) 2) Uncaught JS exceptions 3) Unhandled Promise rejection 4) API responses with status code >= 400 .

6. ❤️ What feature do you love most as the author?

   Eating my own dog food, I really love checking and copying API request / response body & headers right on page.

Coming Features

1. Preserve logs and requests in one tab
2. Show all network requests right on page (not just API requests)
3. Show changes to local storage right on page