DEV Community

loading...
Cover image for toast.log, a browser extension to see JS errors right on your page (without opening the console)

toast.log, a browser extension to see JS errors right on your page (without opening the console)

guivr profile image Guilherme Rizzo ・2 min read

👋 Hi Devs!

6 months ago I had an idea to make a browser extension to see the console logs like toasts (temporary pop-up notifications).

So I made a proof of concept, posted on Twitter, and BOOM! It had over 1,100 likes and 160 pre-orders! People liked it a lot, so I made it :)

🚀 Since then, it has grown to 1000+ professional web developers users worldwide and received lots of improvements and new features - while still being easy and fun to use :)

🍞 toast.log is a browser extension that listens to your console and displays logs, warnings, errors, SEO issues, and network requests in a toast notification format - so you don't need to open your console.

toastlog.com

✨ toast.log is especially useful for:

  • Discovering bugs you didn't know existed;
  • Saving your time;
  • Having more space on your screen when debugging your console;
  • Having some fun seeing the logs of the websites you're browsing.

🔍 What kind of error does it get:
Javascript errors, Network requests errors (POST, GET, etc), DOM errors (broken images or resources), console.log, console.info, console.warn, console.error, and SEO issues.

🌟 What's new on toast.log 2.0:

  • SEO issues
  • Network Requests
  • Expandable arrays/objects/JSON
  • Customizable interface
  • Search through logs
  • 404 Errors
  • Mouse Events
  • Tooltips
  • Console.info
  • Gets console logs that happen at the very beginning of the page loading
  • Major bugfixes (it's much more stable now)
  • Other Improvements

👉 Check all the 2.0 features on the website's new video.

💖 This is a free update for previous 1.0 customers. If you already had it, the extension will update itself automatically.

💰 toast.log is a paid extension. Along with CSS Scan and CSS Scan Pro, this is my full-time work, so you'll always receive updates! 🙌

🙏 I’m excited to share it with you and genuinely interested in hearing what you think about it.

💌 Thanks to everyone that already bought it and supported my work!
If you have any ideas or suggestions, I'm all ears.

Discussion (31)

pic
Editor guide
Collapse
keesvv profile image
Kees van Voorthuizen

Why not open source this project and accept donations? I personally think 20 bucks is a bit too much for a plugin, besides, open sourcing gives you lots of benefits, such as growing a community and being transparent about the information you collect.

Collapse
q2apro profile image
q2apro

From a reader: I did several medium-sized open-source projects, within 13 years I got about 200 USD in donations. And I am certain I reached more than a million users.

Collapse
guivr profile image
Guilherme Rizzo Author

Thanks for the feedback, Kees.

Collapse
ekdikeo profile image
Eric B

have been doing open source for approaching 40 years. have received a total of $105 directly in that time.

Collapse
fchaussin profile image
François CHAUSSIN

I don't get it... What does this add to the built-in functionality of the browser?

Collapse
guivr profile image
Guilherme Rizzo Author

It's mostly about convenience (save time and it's easier to use) and being able to navigate through your website without having the console opened.

Also, network requests are only available on a separate tab on the Devtools and can't be seen together with logs.

And, SEO issues aren't captured by the browser's console.

Collapse
anilsansak profile image
Yaşar Anıl Sansak

Actually, you can see the network and the console tabs at the same time. If you are using Google Chrome, you can right click on a tab you want to open and then select "Move to bottom". That will open that tab at the bottom of console.

Thread Thread
guivr profile image
Guilherme Rizzo Author

Thanks for the information, Yaşar! I didn't know, sorry.

Thread Thread
anilsansak profile image
Yaşar Anıl Sansak

No need to apologize :)

Collapse
fchaussin profile image
François CHAUSSIN

Sounds good, would be great to have this on mobile browser.

Collapse
lioman profile image
Lioman

Network requests are available on console tab too in Firefox Dev tools. You just need to switch them on (XHR button)

Collapse
geomc profile image
Sascha

To inspect console logs using the built-in functionality of the browser, you have to open Dev Tools. The plugin saves this step.

Collapse
catalinradoi profile image
CatalinRadoi

Pressing F12 takes a lot of time. I would happily give 20$.

Thread Thread
geomc profile image
Sascha

Just answering the question

Collapse
jawittdesigns profile image
Jason Witt

I just purchased this to try it out.

The concept is pretty neat, but it's buggy. While testing it out I found that the toasts only showed up about half the time. Especially for the console object methods.

Good concept, but not commercially ready yet IMHO.

Collapse
guivr profile image
Guilherme Rizzo Author

Thanks for buying it, Jason!

I'm sorry for the inconvenience, could you please send me the pages or screenshot where the extension is not working well? I'll try to fix it.

Collapse
ndom91 profile image
Nico Domino

Heres an open source no-cost alternative I built a while back. Obviously doesn't compete on features, but the basics are there:

github.com/ndom91/console-toaster

Collapse
q2apro profile image
q2apro

Can you port it to be a Chrome extension?

Collapse
samleatherdale profile image
Sam Leatherdale

This is awesome. Is there a way to hide certain categories of notifications?

Collapse
guivr profile image
Guilherme Rizzo Author

Thanks, Sam! Yes, there is. Just click on the "counters" and it'll hide the specific kind of log.

In this picture, I'm hiding all errors and warnings, for example:
toast.log

PS: You can try it on the website: toastlog.com/

Collapse
jwhubert91 profile image
James Hubert

Love the idea. I have a 2015 MacBook Air with an 11 inch screen so opening the dev tools can really impact visibility for me.
Keep working on it and get the bugs! I’ll gladly buy it once you work out the kinks the other users (particularly Jason Witt’s comment) mention.

Collapse
qhantomcode profile image
Phantom

Clever idea!

Collapse
guivr profile image
Guilherme Rizzo Author

Thanks, Phantom!

Collapse
slaven3kopic profile image
Slaven Kopic

It can be useful. Nice job!

Collapse
guivr profile image
Collapse
koas profile image
Koas

This looks great! Really clever idea!

Collapse
guivr profile image
Collapse
nainardev profile image
Mohamed Nainar

Beautiful ❤️

Collapse
aleaallee profile image
Alejandro esquivel

Too expensive imho, I'd just code that extension myself instead of paying for it.

Collapse
laszland profile image
Laszlo Roland Kiss

I love the idea and the product itself. Congrats!

Collapse
guivr profile image