How can I simulate mobile devices and debug in Firefox Browser? [closed]

Solution 1:

You can use tools own browser (Firefox, IE, Chrome...) to debug your JavaScript.

As for resizing, Firefox/Chrome has own resources accessible via Ctrl + Shift + I OR F12. Going tab "style editor" and clicking "adaptive/responsive design" icon.

Old Firefox versions

New Firefox/Firebug

Chrome

*Another way is to install an addon like "Web Developer"

Solution 2:

Use the Responsive Design Tool using Ctrl + Shift + M.

Solution 3:

Most web applications detects mobile devices based on the HTTP Headers.

If your web site also uses HTTP Headers to identify mobile device, you can do the following:

1. Add Modify Headers plug in to your Firefox browser ( https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ )
2. Using plugin modify headers:
   • select Headers tab-> select Action 'ADD'
   • to simulate e.g. iPhone add a header with name User-Agent and value: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
   • click 'Add' button
3. After that you should be able to see mobile version of you web application in Firefox and use Firebug plugin.

Hope it helps!

Solution 4:

You could use the Firefox add-on User Agent Overrider. With this add-on you can use whatever user agent you want, for examlpe:

Firefox 28/Android: Mozilla/5.0 (Android; Mobile; rv:28.0) Gecko/24.0 Firefox/28.0

If your website detects mobile devices through the user agent then you can test your layout this way.

Update Nov '17:

Due to the release of Firefox 57 and the introduction of web extension this add-on sadly is no longer available. Alternatively you can edit the Firefox preference general.useragent.override in your configuration:

1. In the address bar type about:config
2. Search for general.useragent.override
3. If the preference doesn't exist, right-click on the about:config page, click New, then select String
4. Name the new preference general.useragent.override
5. Set the value to the user agent you want

Solution 5:

I would use the "Responsive Design View" available under Tools -> Web Developer -> Responsive Design View. It will let you test your CSS against different screen sizes.