How can I simulate mobile devices and debug in Firefox Browser

Question

I am looking for a tool  that shows my website in a mobile device mode  Also I want to debug my website with tools like Firebug or     even better I can use Firebug  What is an established solution to do that

User · Answer

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:

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

User · Answer

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

User · Answer

I think it s better to use the chrome toggle device toolbar with the chrome inspector  It provides you a user agent switch along with responsive mode

User · Answer

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     Add Modify Headers plug in to your Firefox browser   https   addons mozilla org en-US firefox addon modify-headers    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  After that you should be able to see mobile version of you web application in Firefox and use Firebug plugin    Hope it helps

User · Answer

Use the Responsive Design Tool using Ctrl   Shift   M

User · Answer

You can use the already mentioned built in Responsive Design Mode  via dev tools  for setting customised screen sizes together with the Random Agent Spoofer Plugin  to modify your headers to simulate you are using Mobile  Tablet etc  Many websites specify their content according to these identified headers   As dev tools you can use the built in Developer Tools  Ctrl   Shift   I or Cmd   Shift   I for Mac  which have become quite similar to Chrome dev tools by now

User · Answer

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

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

Examples related to firefox

Examples related to mobile

Examples related to plugins