How to simulate mobile devices and debug them in Firefox browser?

Question

I am looking for a tool that displays my site as a mobile device. I also want to debug my site using tools like Firebug or ... even better to use Firebug. What is the installed solution for this?

Answer 1

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

Regarding resizing, Firefox / Chrome has its own resources available via Ctrl + Shift + I OR F12 . Go to the “Style Editor” tab and click on the “Responsive / Responsive Design” icon.

Old versions of Firefox

New Firefox / Firebug

Chromium

* Another way is to install the add-on, for example, "Web developer"

Answer 2

Use the responsive design tool with Ctrl + Shift + M.

Answer 3

Most web applications detect mobile devices based on HTTP headers.

If your website also uses HTTP headers to identify your mobile device, you can do the following:

• Add Modify Headers to connect to your Firefox browser ( https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ )
• Using plugins to edit plugins:
  • select the Headers tab-> select the "ADD" action
  • to simulate, for example. iPhone adds a header with the name User-Agent and the 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 the add button
• After that, you can see the mobile version of your web application in Firefox and use the Firebug plugin.

Hope this helps!

Answer 4

You can use the Firefox User Agent Overrider add-in. With this add-in, you can use any user agent you want, for example:

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

If your site detects mobile devices through a user agent, you can test your layout in this way.

---

Update November '17:

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

• In the address bar, enter about:config
• Search for general.useragent.override
• If the preference does not exist, right-click on the about: config page, click Create, then select String
• Name the new preference general.useragent.override
• Set the value for the required user agent

Answer 5

I would use Responsive Design, available under Tools → Web Developer → Responsive Design. This will allow you to test your CSS for different screen sizes.

Answer 6

You can use the already mentioned built-in Adaptive Design Mode (via the developer tools) to set custom screen sizes along with the Random Agent Spoofer Plugin for changing headers to simulate the use of mobile devices, tablets, etc. Many websites define their content according to the specified headings.

You can use the built-in development tools ( Ctrl + Shift + I or Cmd + Shift + I for Mac) as developer tools, which have become very similar to Chrome dev tools by now.

Answer 7

I think it's better to use a toolbar with a chrome switch with a chrome inspector. It provides you with a user agent switch along with flexible mode.