Mobile device emulation using Node JS and puppeteer

Hi. Welcome to trycoder.com where we teach and train on coding/development. If this is your first time visiting our website, I recommend you checkout our youtube channel and facebook group to get more from us.

In this tutorial, we will discuss how to get a mobile device view of a website without actually using a mobile phone. We will achieve this using a node JS library developed by Google called Puppeteer. If this is your first-time hearing about puppeteer, I recommend you check out our article on how to get started with puppeteer.

Mobile device emulation is a very necessary task especially for web developers because a good look of a web page on mobile is very important. Apart from that, there are also many reasons why a developer would want to perform mobile device emulation.

NB: Ensure you have Node JS and puppeteer installed in your local machine.

As written on their official website, puppeteer is “headless chrome”, meaning it performs everything a normal browser does but except for the fact that, you don’t see it opening up and been done by a user.

So in mobile device emulation, puppeteer actually open up a website in a mobile browser just like a user will actually pick up his/her mobile phone, press chrome and navigate to a website.

We are going to write a short code where after opening the site in a mobile browser, puppeteer will take a screenshot and save in our local machine as proof.

Isn’t it awesome guys!!!

So developers can rather just run a script in few seconds and see how a website looks on mobile rather than picking up a mobile phone itself to do that.
Also, puppeteer provides features to get the mobile view from different types of mobile phones via its configuration. It can be configured to set a specific screen size, phone and much more.

Below is an example of opening a website on iPhone 6 and logs the page title on the console. The comments in the code explain the different lines.

server.js

const puppeteer = require('puppeteer')

const iPhone = puppeteer.devices['iPhone 6']; // set device type

(async () => {
  const browser = await puppeteer.launch() //launch browser
  const page = await browser.newPage() //new page/tab
  await page.emulate(iPhone) //emulate device
  await page.goto('https://go237.com/') //navigate to url
  await page.screenshot({
    path: './uploads/image.png', // set path and name of screenshot
    fullPage: false
  })
  console.log(await page.title()) //log title of page
  await browser.close() //close browser
})()

Run script and check uploads folder in your project directory.

OUTPUT

Thanks for reading!

Comments

Introduction to flask

Hello. Welcome to another session on this platform. If you are new here, please do checkout our previous articles on python programming language and stay excited on this session because we are entering into one of python’s web-based application called flask. In this article, we are going to see the following What is flask Prequistes Installation of flask in python Some of flask template engine. What is flask? Flask is one of python-based framework which is used to create web applications. Flight is a very light web framework. During installation, flask comes with pre-installed modules and functions which are used to backup your own web applications. Flask is very easy to understand and perfect go-to for beginners and with flask, a web server can run in less than 3 lines of code. Prequistes Before learning flask, we recommend the reader to have a basic mastery of python concepts. Installation of flask Before installing flask, we have to checked if python has been installed or. If n...

How to generate random numbers using NumP1

Hello. Welcome to another edition on this platform. For more better understanding, do checkout our YouTube channel to get the video tutorial. In this article of today, we are going to see how to generate random numbers using any of the following methods: Generating a random number Generating a random float and integer Generating random number arrays Generating random number from an array What is a random number? This is a number which cannot be predicted before its occurrence. This number might not different every time. Programmatically, they are two categories of random numbers: Pseudo-Random numbers True Random numbers. Just as programs which are written by programmers are a set of instructions, we must follow an algorithm to generate random numbers. Random numbers which are generated using an algorithm are called Pseudo-Random numbers. To generate a true random number, it is important to get the data from sources such as the keyboards, mou...

Introduction to Django

Hello. Welcome to another session on this platform. If you are new here, please do checkout our previous articles on python programming language and stay excited on this session. we are entering into one of python’s application called Django. In this article, we are going to discuss the following: What is Django Why must we use Django A brief history of Django Installation of Django Popularity of Django What is Django? Python has so many framework application and Django happen to be one of them. Being a python-based-framework, it is used to quickly create web applications. When building websites, django provides similar ready-made components to handle user authentication, forms, a way to upload components. Why use django? Django is very fast. It takes applications from concept to applications very quickly Django has thousand available packages in it when it is installed. With django, we can launch web applications is a matter of hours. Django is a highly is secured and helps...

Work Diary

Search This Blog