스마트폰 시장의 성장은 멈추지 않습니다. Google조차도 검색 엔진 결과 내의 모든 "웹 친화적인" 페이지에 대해 보상을 제공합니다. 이러한 이유로 점점 더 많은 웹 사이트가 모든 유형의 모바일 장치에서 올바르게 열리도록 최적화되어 있으며, 데스크톱 버전은 제외하고 일부 기능 또는 일부 콘텐츠가 제한되어 있습니다. 다음과 같은 웹 브라우저 구글 크롬 , 웹 사이트를 로드하는 위치(PC, 모바일, 태블릿 등)를 감지하고 서버에서 해당 버전을 요청합니다. 그러나 운 좋게도 서버를 속이는 것은 매우 쉽습니다.
우리는 웹 브라우저를 사용할 때 일반적으로 URL을 입력하거나 검색 엔진에서 직접 쿼리를 수행하고 결과를 기다리는 데 익숙합니다. 그러나 우리가 이것을 할 때 아래에서 일어나는 모든 것을 정말로 알고 있습니까?
Chrome 개발자 콘솔
모든 웹 브라우저, 특히 Chrome에는 모든 사용자를 위한 모든 종류의 기능과 도구가 있습니다. 그 중 하나는 개발 콘솔 . 이름에서 알 수 있듯이, 이것은 웹 디자이너가 웹사이트가 어떻게 작동하는지 보고, 프런트엔드에서 발생하는 모든 것을 자세히 알고, "즉시" 페이지에서 다양한 변경 및 조정을 테스트할 수 있도록 설계된 콘솔입니다.
버튼을 눌러 언제든지 이 콘솔을 열 수 있습니다. F12 키 우리의 키보드에. 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 ”를 선택하여 이 콘솔을 열 수도 있습니다. 시찰하다 " 옵션 또는 키보드 단축키 Ctrl + Shift + I. 이것은 창의 오른쪽에서 (기본적으로 변경할 수 있지만) 열리며 거기에서 많은 옵션을 볼 수 있습니다.
우리는 전체 HTML을 볼 수 있습니다 우리가 연 페이지의 모든 요소, 그것을 구성하는 모든 요소, 서버와의 모든 연결, 페이지의 성능, 페이지가 소비하는 메모리 ... 절대적으로 웹과 관련된 모든 것.
찾으시는 제품/부품의 모델번호 또는 사진을 보내주세요. 코드에 요소 추가 , 페이지의 모든 지점을 수정하고, 관심이 없는 콘텐츠를 제거하고, 오류를 확인하고, 웹의 SEO에 부정적인 영향을 미칠 수 있는 가능한 병목 또는 문제를 감지합니다. 가능성은 무한합니다. 콘솔에서 페이지에 직접 코드를 삽입하여 응답하는 방식을 확인할 수도 있습니다.
물론 이 콘솔에서 변경한 사항은 로컬이라는 점을 명심해야 합니다. 우리는 문제의 웹사이트를 해킹하지 않으며 변경 사항을 저장하지도 않습니다. 페이지를 다시 로드하려면 F5 키를 눌러 업데이트하면 됩니다. 그러면 원래 상태로 돌아갑니다.
콘솔을 닫으려면 F12 키를 다시 사용하거나 이 개발 콘솔의 오른쪽 상단에 있는 닫기 버튼을 클릭하기만 하면 됩니다.
웹사이트의 표시 유형 변경
이 개발 콘솔에서 찾을 수 있는 가장 흥미로운 도구 중 하나는 페이지 로드를 시뮬레이션하는 장치 유형을 변경할 수 있다는 것입니다. 기본적으로 Chrome은 PC의 속성을 사용합니다(즉, 서버에 우리가 컴퓨터임을 알리고, 화면의 해상도와 비율에 따라 해당 페이지를 표시합니다) 페이지를 표시합니다. 그러나 웹이 반응형이라면 이것은 바뀔 수 있습니다.
이를 위해 이전 지점에서 본 개발 도구를 열고 해당 섹션의 왼쪽 상단에 나타나는 작은 아이콘을 살펴보겠습니다.
이 아이콘을 사용하면 웹 브라우저의 보기 유형을 빠르게 변경할 수 있습니다. 우리가 그것을 클릭하자마자 우리는 방법을 볼 수 있습니다 페이지 크기 변경 , 요소가 로드되는 방식. 그렇지 않은 경우 F5 키를 눌러 다시 로드해야 할 수 있습니다.
상단에서 이 모바일 보기의 다양한 측면을 변경할 수 있는 막대를 볼 수 있습니다. 예를 들어 시뮬레이션할 수 있습니다. 웹이 특정 기기에서 어떻게 보일지 , 또는 확대/축소 수준을 조정합니다. 기본적으로 제공되는 옵션 중 원하는 옵션이 없는 경우 화면 크기를 픽셀 단위로 수동으로 지정할 수도 있습니다.
우리가 찾을 수 있는 매우 흥미로운 버튼은 컴퓨터 화면을 회전할 수 있는 버튼입니다. 따라서 사용자가 가로 모드에서 웹을 재생할 때 웹이 어떻게 보이는지 알 수 있습니다.
원하는 테스트를 완료하면 개발자 콘솔을 닫아 이 모드를 종료할 수 있습니다. 다시 올바르게 표시하려면 페이지를 새로 고쳐야 할 수도 있습니다.
크롬 확장 프로그램
개발자 콘솔을 사용하는 것 외에도 Chrome 스토어에서 완전히 무료로 찾을 수 있는 몇 가지 확장 프로그램을 사용하여 이 작업을 수행할 수도 있습니다. 최고 중 일부는 다음과 같습니다.
모바일 보기 전환기
이 확장 프로그램을 사용하면 클릭 한 번으로 일반 보기와 모바일 보기 간에 전환할 수 있습니다. 설치 시 도구 모음에 아이콘이 생성되며, 이는 활성화 또는 비활성화 여부에 따라 스위치 역할을 합니다. 기본적으로 iOS 14 시스템이지만 원하는 대로 수정하고 확장자를 조정할 수 있습니다.
반응형 뷰어
개발자가 반응형 웹사이트가 얼마나 잘 작동하는지 확인할 수 있는 또 다른 매우 유용한 도구입니다. 이렇게 하면 크기가 다른 여러 화면을 동시에 볼 수 있습니다. 이런 식으로 여러 구성을 볼 수 있고 모든 것이 올바르게 보이고 어떤 유형의 장치에서도 문제가 발생하지 않는지 확인할 수 있습니다.
Chrome용 모바일 시뮬레이터
이 도구를 사용하면 많은 수의 실제 장치(5 Android 모델, 15 Apple, 태블릿 4개, 특수 장치 4개) 각각의 화면 크기에 따라 요청되는 CSS에 따라 페이지가 어떻게 나타나는지 확인할 수 있습니다.
반응 형 웹 디자인 테스터
마지막으로 이 확장 기능을 사용하면 덜 알려져 있지만 여러 매개변수를 기반으로 웹사이트의 반응형 보기가 작동하는 방식을 철저히 테스트할 수 있습니다. 기본적으로 가장 일반적인 해상도와 비율을 포함하여 다양한 모바일로 테스트할 수 있습니다. 또한 이 확장은 결과가 더 정확하도록 적절한 User-Agent를 서버로 보냅니다. 모든 확장 프로그램이 아닌 오프라인에서도 작동합니다.