[TIL] Developer tools

🎉 Developer tools

별도의 editor tool을 사용하지 않고 web page 상에서 HTML/css/Javascript 등의 코드를 확인하고 test를 할 수 있는 도구로 개발자의 생산성 향상에 도움을 준다.

.Element: HTML 코드 정보가 보이고 각 태그별 내용을 확인할 수 있는 탭이다. 해당 탭에서는 HTML/css 코드 수정 및 디버깅을 할 수 있다. element 탭에서 style 요소는 html 코드에 적용된 css 코드를 display하는데 style의 순서는 css 적용 순서(상위 › 하위)에 따라 정렬되어 있다.

위의 이미지를 보면 user agent stylesheet라는게 있고 해당 코드는 선택이 되지 않는 것을 확인할 수 있다. 그것은 사용자가 별도로 지정하지 않았지만 브라우저에서 임의로 지정된 코드이다. 이것은 개발자가 임의 지정 코드를 실제 코드에 원하는 값을 입력해주는 것으로 간단히 해결할 수 있다. 출처 : )

.Console: JavaScript 개발을 위한 탭으로 js 코드를 브라우저를 통해 즉시 실행해 볼 수 있다. 단축기 esc를 사용하면 모든 탭에서 쉽게 console 창을 불러올 수 있다. console에 입력된 코드는 enter key를 누르면 바로 실행이 되므로 shift+enter를 통해 줄바꿈을 하여 코드를 작성해야하며 기존에 작성된 코드는 이후의 코드에 영향을 미치므로 새로운 창이 필요할 경우에는 refresh를 눌러야 한다.

만약, 작성한 코드를 기억한 상태로 이 후의 작업을 하고 싶다면 setting 창의 옵션(Preserve log upon navigation) 선택으로 손쉽게 적용 할 수 있다. setting 창은 개발자 도구 화면에서 톱니바퀴 아이콘을 누르거나 F1을 누르면 접근 가능하다.

🎁 tip 단순히 화면의 코드를 지우고 싶다면 clear();를 입력하거나 ctrl+l을 누르면된다. 단, preserve log 상태에서는 clear();는 적용되지 않고 단축기는 ctrl+l만 적용된다.

.Network: http 통신과정을 들여다 볼 수 있는 탭으로 서버로부터 자원들이 어느정도의 크기로 얼마의 시간을 가지고 내려받아지는지 자세히 확인할 수 있다. 브라우저와 서버의 통신과정 중에 어떤 문제가 있는지 확인하고 클라이언트의 성능 개선 지점을 찾고 분석하는데 다양하게 활용할 수 있다.

.application: 현재 로딩된 웹 페이지에서 사용된 리소스(이미지, 스크립트, 데이터 등)를 열람할 수 있는 탭이다. 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사한다.