Hey guys, how's you Monday going so far?

On past tips, I've showed you some features on Google DevTools , why it's such a powerful tool and why every web developer should use it. Today we'll see how we can test our websites on mobile devices by using it, it's pretty simple!

As always, we can open it by pressing F12 on a website or by opening it in the context menu by doing a right click anywhere on a page. Then we need to click on that mobile icon on the top right corner.

This will turn the mobile view and here we can mess around with some options. By clicking on the first icon on the right we can toggle the orientation - landscape and portrait. We have two inputs where we can type a custom resolution that will change the mobile preview.

Finally, we have a drop-down on the left that will present to us some presets for common mobile devices - mainly iPhones and Samsung Galaxy. Changing this will change the mobile viewport to match the device we select.

With this we can have a basic notion of how our website will behave in different devices and resolutions/viewports. Hope it's helpful for you!
See you guys! 😁👌