Salesforce1 Mobile Device Testing

Being in the middle of the Salesforce1 Developer Week, lots of Salesforce professionals will be tackling the Salesforce1 Mobile Workbook and begin customizing their own Salesforce.com orgs soon after.

If you've worked with Salesforce1 before, you're probably already familiar with this URL:

<yourInstance>.salesforce.com/one/one.app

If you're not, try it out in your browser window. Replace <yourInstance> with your instance (IE: na4.salesforce.com/one/one.app). You'll see the equivalent of the Salesforce1 mobile app within your window. This makes testing slightly easier as you begin the early stages of a Salesforce1 related project.

As you begin to fine-tune though, you'll need to begin doing some mobile testing as users will use different sized mobile phone and tablet screens. As seen above, using the one/one.app link, you get a nice preview, but the preview is sized to your screen's resolution. You're screen's resolution may not always be the best representation of what your users are seeing.

Wouldn't it be nice if you could simulate the actual devices' resolutions?

Using Google Chrome's Developer Tools, you can!

Once the Developer Tools are open, within the bottom panel, click on the "Emulation" tab. Choose a device to test with from the "Device" drop-down and then click on the "Emulate" button.

If you see something like the image on the left, you'll want to manually refresh your page. When you do, you'll see a resized version of the Salesforce1 app/page as your users on that device would see it on their device.

It's worth noting that if you don't see your user's device in the list, you can set your own custom resolution by clicking on the "Emulation" tab at the top, then "Screen" link on the left. This is also where if you need to test portrait vs landscape screen modes, you can inverse the X and X resolutions (even if SF1 doesn't support it).