<commit_before>---
rss: false
layout: article
title: "Types of Device Emulators and Simulators"
seotitle: "Types of Device Emulators and Simulators"
description: "Device emulators and simulators let you mimic your development site on a range of devices from your workstation. Learn about the different types of device emulators and simulators available."
introduction: "Device emulators and simulators let you mimic your development site on a range of devices from your workstation. Learn about the different types of device emulators and simulators available."
authors:
  - megginkearney
article:
  written_on: 2015-04-14
  updated_on: 2015-04-14
  order: 2
collection: device-testing
key-takeaways:
  emulator: 
    - When you don’t have a particular device, or want to do a spot check on something, the best option is to emulate the device right inside your browser.
    - Device emulators and simulators let you mimic your development site on a range of devices from your workstation.
    - Cloud-based emulators let you automate unit tests for your site across different platforms.
---

{% wrap content%}

{% include modules/toc.liquid %}

{% include modules/takeaway.liquid list=page.key-takeaways.emulator %}

## Browser emulation

Browser emulators are great for testing a site's responsiveness, but they don’t
emulate differences in API, CSS support, and certain behaviors that you'd see
on a mobile browser. Test your site on browsers running on real devices to be
certain everything behaves as expected.

### Chrome DevTools emulation

Chome DevTools has a [Device emulation tool](https://web-central.appspot.com/web/tools/setup/device-testing/devtools-emulator) that creates a viewport with the right width and height to match a selected device and accounts for the screen density.

You can activate device emulation by following these four steps:

1. With Chrome DevTools open, click the arrow icon with three horizontal lines
2. Click the mobile device in the top left.
3. Select the `Emulation` tab at the bottom.
4. Then select the device you want to test against from the drop down.

<img src="imgs/chrome-devtools-emulation.png" alt="Chrome DevTools Emulation Guide" />

### Firefox responsive view

Firefox has a [responsive design view](https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View)
that encourages you to stop thinking in terms of specific devices and instead
explore how your design changes at common screen sizes or your own size by
dragging the edges.

To use the responsive view, open the developer tools in Firefox and click the<commit_msg>Types of emulators and simulators launch ready<commit_after>---
rss: false
layout: article
title: "Types of Device Emulators and Simulators"
seotitle: "Types of Device Emulators and Simulators"
description: "Device emulators and simulators let you mimic your development site on a range of devices from your workstation. Learn about the different types of device emulators and simulators available."
introduction: "Device emulators and simulators let you mimic your development site on a range of devices from your workstation. Learn about the different types of device emulators and simulators available."
authors:
  - megginkearney
article:
  written_on: 2015-04-14
  updated_on: 2015-04-14
  order: 2
collection: device-testing
key-takeaways:
  emulator: 
    - When you don’t have a particular device, or want to do a spot check on something, the best option is to emulate the device right inside your browser.
    - Device emulators and simulators let you mimic your development site on a range of devices from your workstation.
    - Cloud-based emulators let you automate unit tests for your site across different platforms.
---

{% wrap content%}

{% include modules/toc.liquid %}

{% include modules/takeaway.liquid list=page.key-takeaways.emulator %}

## Browser emulation

Browser emulators are great for testing a site's responsiveness, but they don’t
emulate differences in API, CSS support, and certain behaviors that you'd see
on a mobile browser. Test your site on browsers running on real devices to be
certain everything behaves as expected.

### Chrome DevTools emulation

Chome DevTools has a [Device emulation tool](tools/setup/device-testing/devtools-emulator) that creates a viewport with the right width and height to match a selected device and accounts for the screen density.

You can activate device emulation by following these four steps:

1. With Chrome DevTools open,
click the arrow icon with three horizontal lines.
2. Click the mobile device in the top left.
3. Select the `Emulation` tab at the bottom.
4. Then select the device you want to test against from the drop down.

<img src="imgs/chrome-devtools-emulation.png" alt="Chrome DevTools Emulation Guide" />

### Firefox responsive view

Firefox has a [responsive design view](https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View)
that encourages you to stop thinking in terms of specific devices and instead
explore how your design changes at common screen sizes or your own size by
dragging the edges.

To use the responsive view, open the developer tools in Firefox and click the
{'fraction_non_alphanumeric': 0.05501930501930502, 'fraction_numerical': 0.008108108108108109, 'mean_word_length': 4.564983888292159, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6272355', 'n_tokens_mistral': 1415, 'n_tokens_neox': 1287, 'n_words': 701}