Have you ever tried to do something on a website, and nothing happened, and you are sure it was an error but no error message was displayed?

Sometimes an error message is available but it wasn’t renderd on the GUI. In this post and supporting video I will show you how to see those error messages.

Problem: I’m using social media sites something goes wrong I have no idea what it is.

No error message is displayed on the screen.

• Q: Is there a way to see an error message?
• A: Yes there is, use the developer network tab.

Example: on my Instagram account I want to change the profile photo

• I select a PNG file
• Upload
• and… nothing happens

There’s no error message. And my profile photo is the same.

Tip: Error Message visible Using “Inspect Element”

The tip is… if I do an “Inspect Element” I can see the error message

• I get the developer tools,
• And I go into network tab.
• When I edit profile photo here and upload a photo.
• I view the HTTP request to the server.
• And i can see an error message it says “Sorry this picture format isn’t supported please try another picture in jpeg”

This is a reusable tactic

This is a tactic that I use with social media sites and other web sites, all the time, because very often when they use javascript to communicate with the server, they do not show the error message on screen.

Watch the video showing this in detail on YouTube:

SlideShare Version