이 글은 아래 링크의 글을 바탕으로 작성되었습니다. 당연하지만, 이 글이 웹 프론트엔드 성능 분석의 모든 것을 담고 있는 것은 아닙니다. 하지만 가장 기본이 되는 방법론을 다루고 있습니다. 시작해요, 런타임 성능 분석 | Chrome DevTools | Google Developers 시작해요, 런타임 성능 분석 | Chrome DevTools | Google Developers Chrome 개발자 도구에서 런타임 성능을 평가하는 방법 developers.google.com Network 패널 or Performance 패널 네트워크 패널은 자원들이 제대로 다운로드 되었는지의 여부, 캐시여부, 그리고 다운로드된 자원들의 다운로드에 걸린 시간, 세부 정보들을 보고 싶을 때 유용하게 사용할 수 있는 패널입니..

이 글은 아래 링크의 내용을 기반으로 작성되었습니다. 흔히 경험적으로 알수 있을 만한 내용은 다루지 않았습니다. Get Started With Viewing And Changing CSS | Chrome DevTools Get Started With Viewing And Changing CSS | Chrome DevTools Learn how to use Chrome DevTools to view and change a page's CSS. developers.google.com 임시로 적용해볼 css class 생성 Element 패널 안의 Styles 탭에서 .cls 를 클릭하면 됩니다. 특정 요소에 임시로 적용해볼 pseudo 상태를 적용 요소를 선택한 후, Element 패널 안의 Styles 탭..