개발

브라우저별 웹페이지 확인!

비손 2016. 10. 18. 14:39

웹개발을 하다보면 브라우저별로 어떻게 보이는지 확인해야 하는 순간이 있습니다.
(어려운 크로스 브라우징...)


Firefox, Chrome 등은 설치하면 되니까 문제되지 않지만

윈도우 환경에서는 Safari 는 확인이 불가하니까 문제...

그리고 Edge, IE 11 등은 뭐 최신 윈도우 버전을 쓰면 쉽게 확인이 가능하지만, 하위 IE 버전들에서는 또 문제가 됩니다. (이제 IE 욕하는건 좀 지친...)


IE 에서 개발자 도구(F12)를 열어서 렌더링 버전을 고를 수 있지만, 실제 설치된 브라우저 버전과 약간 차이를 보일 때가 있습니다!


IE9 형태로 렌더링을 골라서 보는것과 가상머신을 이용해 IE9가 실제 설치된 곳에서 확인하는게 차이가 있습니다.


그래서 쉽게 확인할 수 있는 페이지를 MS 에서 제공합니다.


https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/


여기 들어가면 바로 그냥 주소를 쳐 넣을 수 있게 되어 있습니다.

넣으면 브라우저별로 어떻게 보이는지 리스트가 뜨고, 클릭하면 좀 더 큰 이미지로 확인이 가능합니다. 스크린 샷 형태로 제공되죠



IE는 8 버전까지 지원이 되고, 넥서스나 아이패드, 아이폰 등도 표시되니까 간단하게 살펴보기에는 좋습니다.

물론, 더 자세히 내용을 확인하려면 Virtual machines 를 이용해야 하지만요..

이 페이지 하단에 보면 VM 도 내려 받을 수 있습니다!