[Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절

■ 퍼펫티어 창 크기 조절하기

퍼펫티어를 이용한 작업을 진행하다 보면

화면에 표시되는 영역의 크기가 작아서 답답한 경우가 발생한다.

브라우저의 크기를 아무리 늘려도 출력되는 페이지의 크기는 변화가 없다.

실제 서비스하는경우는 headless : true로 설정하여 보이지 않게 하고 작업을 진행하겠지만.

서비스 개발중에는 종종 답답한 경우가 발생한다. 

setViewport( ) 설정을 통해 이런 답답한 점을 해결해보자.

# 소스코드

puppeteer.viewport.js

const puppeteer = require("puppeteer"); puppeteer.launch({       headless : false // 헤드리스모드의 사용여부를 묻는다.     , devtools : false // 개발자 모드의 사용여부를 묻는다.     , slowMo : 0            // 지정된 시간(ms)까지 Puppeteer 작업속도를 느리게 한다. }).then(async browser => {     const page = await browser.newPage();     await page.setViewport({           width : 1280               // 페이지 너비         , height : 720                // 페이지 높이         , deviceScaleFactor : 1     // 기기 배율 요소를 지정 DPR( Device Pixel Resolution )         , isMobile : false            // 모바일         , hasTouch : false           // 터치 이벤트 발생여부         , isLandscape : false        //     });     await page.goto( "https://github.com/puppeteer/puppeteer/blob/master/docs/api.md", { waitUntil : "networkidle2" } ); });

# 출력 결과

$ node puppeteer.viewport.js

위와같이 출력화면이 브라우저 가득 커져서 나오는 것을 확인 할 수 있다.