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 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 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

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

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

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

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

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

Examples related to firefox

Examples related to mobile

Examples related to plugins