크롬 개발자도구로 웹 개발 테스트 하는 방법 1

크롬 개발자도구로 속도조정하는거 알려 달라는 요청이 있어서 작성함

지극히 개인적인 방식이므로 따라서 할 필요는 없음

크롬 개발자도구 F12 실행

Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구

Resources :  현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구

Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다. 

Audits : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구

Network 탭으로가서 Disable cache 체크해서 캐쉬 기능을 지우고

No throttling 셀렉트 박스 선택후 Regular 3G 등을 선택하면 네트워크 속도를 제어 하면서 테스트가 가능하다.

참조주소 : https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading

하단에 콘솔에서는 localStorage.clear()라고 입력한 뒤 엔터. 리턴값이 없으므로 undefined가 찍힐 것이다.

localStorage 는 HTML5 에서 추가된 저장기술로 Resources 란에 보면Local Storage 항목을 확인 할 수 있음

Chrome Developer Tools

https://developers.google.com/web/tools/chrome-devtools/