Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 30, 2019 06:00 pm GMT

5 Tips and Tricks for Firefox DevTools - Responsive Design Mode

This is a series I try to keep up with, Ive gathered so many tricks over the years. If youve liked this or want to see more, Im @lakatos88 on Twitter, follow me there!

This is the fifth post in a series of productivity tips and tricks to help you debug web applications with Firefox Devtools. It shows you 5 tips & tricks for working with the Responsive Design Mode in the Firefox Developer Tools.

I use the Responsive Design Mode as a quick way to test on mobile, locally, without having to deploy. The throttling capabilities, touch events, and custom sizes make it perfect for my needs. I like the fact that I have the rest of the Developer Tools active side-by-side, without having to connect them to my phone browser, and having to look in 2 separate places to debug. It doesnt work for complex stuff, like pan and zoom, but its enough for one finger touch events. Sometimes I use the custom user agent just to see what kind of UA tracking websites do in general. Im not a fan of the fact that since Firefox 60, automatic reload doesnt happen for user agent switching or when you enable touch events, but I understand the reasoning behind the feature.

Add custom devices

You can edit the display size in the Responsive Mode of Firefox Developer tools, but if you want to make that a preset youll have to add a custom device. You can open the device dropdown, and select Edit list. That gives you a list of the most common presets, and you can enable/disable the ones you need. If thats not enough, you can add your own custom device. If you think the default list should be different, Mozilla is maintaining a GitHub repo for that, feel free to submit a PR.

Add custom device

Throttling

You can throttle the speed of your network requests and see how your website loads on different connections. Firefox has a lot of presets useful for mobile devices, with an intuitive name instead of me having to guess what speed a bad 3G connection would be.

Speed Throttling

Simulate touch events

You can simulate touch events in the Responsive Design Mode by clicking the little hand icon. It will disable drag-and-drop selection, and enable touch events, including tap and long-tap events. Click events will be turned into tap events and a long-click event will be simulated into a long-tap event, opening the contextual menu.

Simulate touch events

Change user agent

You can change the user agent string from the Responsive Design Mode of Firefox DevTools. Youll have to go to the Settings icon in the top right corner and enable Show user agent, and then you can change it in the input field. I personally like to set the Reload when the user agent is changed as well because most websites do their user agent detection on load. You can see here how the Google home page changes when it thinks Im not an iPhone anymore, and Im the DuckDuckGo crawling bot .

Change user agent

Left align the Viewport

The Responsive Design Mode is centered by default, and that is all good when Im only testing. But when Im debugging, Id like to be able to us as much of the rest of the screen for the DevTools panel. You can make align the Responsive Design Viewport to the left, by enabling the option in the Settings menu.

Left align the Viewport


Original Link: https://dev.to/lakatos88/5-tips-and-tricks-for-firefox-devtools-responsive-design-mode-42bj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To