DEV Community

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)

Guilherme Rizzo on December 24, 2020

👋 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...
Collapse
 
fchaussin profile image
François CHAUSSIN • Edited

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

Collapse
 
guivr profile image
Guilherme Rizzo • Edited

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

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
 
spic profile image
Sascha Picard

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
 
spic profile image
Sascha Picard

Just answering the question

Collapse
 
q2apro profile image
q2apro • Edited

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

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
 
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
 
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

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
 
jameshubert_com 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
 
slaven3kopic profile image
Slaven Kopic

It can be useful. Nice job!

Collapse
 
guivr profile image
Guilherme Rizzo

Thanks, Slaven!

Collapse
 
koas profile image
Koas

This looks great! Really clever idea!

Collapse
 
guivr profile image
Guilherme Rizzo

Thanks, Koas!

Collapse
 
qhantomcode profile image
Phantom

Clever idea!

Collapse
 
guivr profile image
Guilherme Rizzo

Thanks, Phantom!

Collapse
 
bnainar profile image
Mohamed Nainar

Beautiful ❤️

Collapse
 
guivr profile image
Guilherme Rizzo

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
 
laszland profile image
Laszlo Roland Kiss

I love the idea and the product itself. Congrats!

Collapse
 
guivr profile image
Guilherme Rizzo

Thanks, Laszlo!