제목이 복잡하네요.


1. 웹 개발하는 과정에서 크롬 브라우저의 개발자 도구가 많이 사용되는 것으로 알고 있어요.

2. 개발자 도구에서 모바일 기기에서 어떻게 보여지는지 확인할 수 있구요. 

3. 여러 모바일 기기를 추가할 수 있어요!! 


이번 포스팅에서는 3번 어떻게 추가하는지에 대해서 그림으로 정리해두려고 합니다.


1. 윈도우에서는 크롬 브라우저에서 F12를 누르면 개발자 도구가 보이고요.

    리눅스에서는 Ctrl + Shift + i 를 누르면 보이고요.

    맥에서는 Alt + Command + i 를 누르면 되요.


    아래 그림과 같이 나오면 성공!! 



2. 위 그림에서 오른쪽 상단에 쩜쩜쩜 세로로 찍힌거 누르면 아래 그림을 볼 수 있어요.

    여기서 Settings를 선택 !!


3. Settings에 들어와서 Devices 탭을 선택하면 아래 그림을 볼 수 있어요.

    꽤 많은 기기가 저장되어 있는데, 왼쪽에 Checkbox를 선택해두면 

    개발자 도구에서 쉽게 테스트 할 수 있어요 :)



4. 모바일 기기에서 어떻게 보이는지 확인하려면 개발자 도구를 열고

    왼쪽에 모바일 기기 아이콘을 선택!!!

    아래 그림에서는 현재 페이지를 찍어봤어요!!  

    Nexus 5에서는 일케 보인데요!! 물론 모바일 전용 페이지가 아니라서 이렇게 보이는 거죠. 

 

    위 그림에서 상단에 Nexus5 를 선택하면 다른 기기로 변경할 수 있어요 :)



    꼭 이렇게 하지 않아도 다음 주소에서 여러 기기에서 어떻게 보이는지 한 방에 확인할 수 있어요

    http://troy.labs.daum.net/ 

    http://www.responsinator.com/


    구글에서는 모바일 친화성 테스트 기능도 제공하네요 :)

    https://www.google.com/webmasters/tools/mobile-friendly/

+ Recent posts