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

JavaScript Functions

Hi there, and welcome to another exciting lesson on JavaScript. If this is your first time here, please do well to check out our previous lessons. In the previous lesson, we were discussing JavaScript math methods. It was very intuitive as we got to learn how to use the various math methods. To proceed, we shall be looking at JavaScript functions. A function in JavaScript like in every other programming language could be defined as a block of code that is written to perform a particular task, and this function is usually invoked or called before it is being implemented. We have been talking about methods throughout the previous lessons right. Do you know that those methods are actually functions? Yes they are functions. You can now have an overview of the importance of functions in every programming language. How do we create a function in JS? To create a function, you follow the format function functionName(Argument) {//Block of code }. Some functions do have a return val...

JavaScript Math Methods

Hello everyone, and welcome to another exciting JavaScript lesson. In the last lessons you have been seeing other methods being used in JS (for example, the string methods). We shall go further into exploring other methods. This time, it’s going to be math methods. Do not move an inch because it’s going to be a very exciting. Before we look at what a math method is, let’s have an overview of math objects. A math object in JavaScript is a static built-in object that includes properties and methods used in performing mathematical tasks. Talking about math properties, they have the syntax Math.property . Some examples are Math.E that returns Euler’s number, Math.PI that returns PI, Math.LN2 that returns the natural logarithm of 2, and many others. The various JavaScript methods contained in the math object, thus, make mathematical operations easier and reduce effort as well as time in math-oriented programming. Some JS methods include abs( ), ceil( ), cos( ), sqrt( ), pow( ), log( ) ...

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

Work Diary

Search This Blog