개발자모드는 웹브라우저에 내장된 도구로, 웹페이지를 구성하고 있는 코드를 검사하고 수정할 수 있는 공간입니다. 이 도구를 사용하면 웹페이지의 구조를 코드로 확인할 수 있고, 실시간으로 변화를 확인할 수도 있습니다.

Windows 사용자라면 :  Ctrl+Shift+I 

Mac 사용자라면  : Cmd+Option+I 키를 눌러 개발자모드를 열 수 있어요.

(리스틀리를 초창기부터 사용해보신 분들이라면 CSS셀렉터를 복사하기위해 이 개발자모드를 열어보신 분들도 계실거에요 🙂)

콘솔은 개발자모드의 한 부분으로 ‘자바스크립트’ 코드를 직접 입력하고 실행할 수 있는 공간입니다. 웹페이지에서 일어나는 다양한 오류와 로그를 확인할 수 있으며, 자바스크립트 코드를 통해 웹페이지를 조작할 수도 있습니다.

이번 예제는 N포털 사이트의 모바일페이지로 준비해 보았습니다.

위 GIF영상은 수동으로 스크롤하는 화면을 녹화한 것인데요.

모바일페이지는 PC버전과 다르게 게시글이 무한스크롤 방식으로 정보를 불러오는 구조로, 스크롤을 내렸을 때, 정보 하단에 숫자로 나뉘어진 페이지링크가 나타나는 대신 계속 계속 새로운 데이터가 불러와집니다.

그럼, 이 페이지에서  “리스틀리"로 검색한 블로그 검색 결과를 스크랩 해보겠습니다.

우선 검색 이후 아무런 스크롤 액션을 취하지 않은 채 바로 추출을 진행해봤어요.

위의 코드를 입력하고 엔터를 누르니, 한순간에 스크롤이 아래로 툭 떨어지는 모습이 보이시나요?

위 코드는 세로로 9999 좌표 지점까지 스크롤을 내리라는 명령인 것인데요.

이런식으로 콘솔에 몇가지 과정을 더한 명령어(코드)를 입력해서 브라우저를 조작해 보겠습니다.

2. 아래의 자바스크립트 코드를 복사하여 콘솔에 붙여넣어보세요. 

해당 코드는 현재 스크롤의 위치를 저장하고, 화면의 가장 밑으로 스크롤을 내린 후 1초 기다렸다가 이 행위를 반복한다! 는 내용을 담고 있습니다.

function scrollToBottom() {

  let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

  window.scrollTo(0, document.body.scrollHeight);

  setTimeout(function() {

    let newScroll = document.documentElement.scrollTop || document.body.scrollTop;

    if (newScroll === currentScroll) {

      console.log("페이지의 끝까지 스크롤했습니다.");

    } else {

      scrollToBottom();

    }

  }, 1000); 

}

scrollToBottom();

만약 중간에 스크롤 동작이 멈춘다면 동일한 코드를 한번 더 실행하거나, 1000이라고 쓰여진 부분의 숫자를 높여주세요. (ex. 1000=1초, 3000=3초, 5000=5초 입니다. )

참고로 위의 코드는 다음과 같은 로직을 컴퓨터 언어로 작성해 둔 것입니다.

1. 현재 페이지 위치를 저장한다.
2. 페이지의 맨 아래로 스크롤한다.
3. 1초 대기 후(새로운 데이터를 불러오는 시간) 1,2번의 액션을 반복한다.

짜잔! 스크롤을 통해 데이터가 불러와진만큼 데이터가 추출되었습니다!