반응 형 웹 디자인을 테스트하기위한 7 가지 훌륭한 도구

모든 최신 웹 디자이너는 반응 형 웹 디자인의 원칙을 알고 있어야합니다. 사이트가 표시되는 모든 장치 또는 화면 크기에서 완벽하게 렌더링되도록하는 방법입니다. (복습이 필요하면 반응 형 웹 디자인에 대한 전문가 가이드 ).

그러나 이론은 하나이고 실천은 다른 것입니다. 사이트가 완전히 반응하는지 확인하려면 실제로 다른 장치에서 테스트해야합니다.

하지만 우리 대부분은 실제 테스트를 수행하는 데 필요한 수백 개의 물리적 장치를 확보 할 예산이 없습니다. 그러나 두려워하지 마십시오! 이러한 도구는 가상 환경 내에서 반응 형 디자인을 테스트 할 수 있도록하여 중간 수준의 집을 제공합니다.



새로운 macbook pro 슬리브 13 인치

01. 응답자

Responsinator를 사용하여 다른 뷰포트에서 사이트가 어떻게 보이는지 확인하십시오.

Responsinator를 사용하여 다른 뷰포트에서 사이트가 어떻게 보이는지 확인하십시오.

Responsinator의 장점은 단순성에 있습니다. 웹 페이지의 URL을 입력하기 만하면이 무료 브라우저 기반 도구가 가장 인기있는 화면 모양과 크기로 웹 페이지가 어떻게 렌더링되는지 보여줍니다.

놀랍게도 페이지와 상호 작용하고 링크를 클릭하고 검색 필드에 입력하는 등의 작업을 수행 할 수 있습니다. 그러나 이러한 장치는 특정 장치가 아니라 일반 장치입니다.

02. Screenfly

Screenfly를 사용하여 TV를 비롯한 다양한 기기에서 웹 사이트가 어떻게 표시되는지 확인하세요.

Screenfly를 사용하여 TV를 비롯한 다양한 기기에서 웹 사이트가 어떻게 표시되는지 확인하세요.

Screenfly는 다양한 화면 크기와 다양한 기기에서 웹 사이트를 테스트하기위한 무료 도구입니다. 지금까지 몇 년 동안 사용되었지만 여전히 인기가 있으며 작업을 매우 잘 수행합니다.

URL을 입력하고 메뉴에서 기기와 화면 크기를 선택하기 만하면 웹 사이트가 제대로 작동하는지 확인할 수 있습니다. 주요 장치로는 데스크톱 컴퓨터, 태블릿, TV 및 스마트 폰이 있습니다.

애플 맥북 프로 15 인치 커버

03. Google DevTools 기기 모드

DevTools Device Mode는 Chrome 내에서 다양한 기기를 에뮬레이트합니다.

DevTools Device Mode는 Chrome 내에서 다양한 기기를 에뮬레이트합니다.

DevTools의 장치 모드는 개발자가 Chrome 브라우저 내에서 모바일 장치를 쉽게 시뮬레이션 할 수있는 방법을 제공합니다. Retina 화면을 포함하여 다양한 화면 크기와 해상도에서 사이트가 어떻게 표시되는지 알아 보려면이를 사용하십시오.

에뮬레이터 내에서 터치, 위치 정보 및 장치 방향에 대한 장치 입력을 시뮬레이션 할 수도 있습니다.

04. Google Resizer

Resizer는 반응 형 사이트의 머티리얼 디자인 중단 점을 설정하는 데 도움이됩니다.

Resizer는 반응 형 사이트의 머티리얼 디자인 중단 점을 설정하는 데 도움이됩니다.

Google의 머티리얼 디자인 가이드 라인에는 중단 점, 반응 형 그리드, 표면 동작 및 사용자 인터페이스 패턴 사용에 대한 조언이 포함되어 있습니다. 그리고 작년에 무료 도구를 출시하여 해당 지침을 따르는 것이 실제 기기에서 어떻게 보이는지 확인할 수 있습니다.

Google Resizer를 사용하면 맞춤 URL을 입력하고 데스크톱 및 모바일 용 머티리얼 디자인 중단 점에서 사이트를 볼 수 있습니다. 데모를 먼저 보려면 주소 표시 줄을 클릭하고‘ 페스토 ’또는‘ 신사 ’를 선택합니다.

05. 고 스트랩

Ghostlab은 여러 장치 및 브라우저에서 동시 테스트에 중점을 둡니다.

Ghostlab은 여러 장치 및 브라우저에서 동시 테스트에 중점을 둡니다.

유료 웹 사이트 테스트 앱인 Ghostlab을 사용하면 여러 브라우저와 모바일 장치에서 동시에 웹 사이트를 테스트 할 수 있습니다. 하나의 브라우저 또는 기기에서 테스트를 시작하면 링크를 클릭하거나, 버튼을 선택하거나, 양식을 작성하거나, 페이지를 새로 고침하는 등 다른 모든 작업이 작업을 미러링합니다.

편리하게도 모든 장치에서 화면 캡처를 가져 와서 주석을 달고 버그 추적기로 끌어다 놓을 수도 있습니다. 실제로 확인하세요 이 비디오 .

06. 브라우저 스택

브라우저 스택은 기업을 겨냥한 유료 테스트 도구입니다.

브라우저 스택은 기업을 겨냥한 유료 테스트 도구입니다.

브라우저 스택은 가장 진보 된 모든 기능을 갖춘 테스트 도구 중 하나입니다. 유료 앱은 테스트 목적으로 1,000 개 이상의 모바일 및 데스크톱 브라우저에 대한 액세스를 제공하며,이 목록은 Browser Stack의 36,000 고객을 기반으로 한 시장 동향 및 사용 통계를 기반으로 지속적으로 업데이트됩니다.

Twitter, Microsoft, AirBnB 및 Mastercard를 포함한 사용자와 함께라면 분명히 옳은 일을하고 있습니다.

포스터는 어떤 종류의 종이에 인쇄되어 있습니까?

07. CrossBrowserTesting

CrossBrowserTesting은 다양한 실제 장치 및 테스트 기능을 제공합니다.

CrossBrowserTesting은 다양한 실제 장치 및 테스트 기능을 제공합니다.

테스트 공간에서 Browser Stack의 가장 큰 경쟁자는 CrossBrowserTesting으로, 반응 형 웹 사이트를 테스트 할 수있는 1,500 개 이상의 브라우저와 기기를 제공합니다.

올인원 플랫폼을 사용하면 병렬 자동화 테스트를 실행하고, 스크린 샷을 시각적으로 비교하고, 실제 기기에서 웹 사이트를 스 와이프하고 상호 작용하고, 이동 중에 코드를 원격으로 디버그 할 수 있습니다.