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.
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"
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:
about:config
general.useragent.override
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:
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
Hope it helps!
Use the Responsive Design Tool using Ctrl + Shift + M.
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.
Source: Stackoverflow.com