ETC - 2021. 12. 23.
크롬 개발자도구 TIP
- -
크롬 개발자도구 TIP
안녕하세요 오늘은 크롬 개발자도구 TIP에 관해서 살펴보도록 하겠습니다.
👉 Devtools Screenshot(개발자 도구 스크린샷)
크롬에서 개발자 도구를 여시고
command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생겨요.
거기서 screenshot이라고 검색하면 4가지 종류의 스크린샷이 있습니다.
상황에 맞에 본인에게 필요한거 선택해서 쓰시면 됩니다.
👉 Coverage(적용 범위)
이것도 마찬가지로 크롬에서 개발자 도구를 여시고
command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생기면 coverage라고 검색하고 앤터키를 누르면
아래와 같이 창이 생깁니다. 그럼 여기서 새로고침 버튼을 클릭하면
아래와 같이 css와, js파일들을 한눈에 볼수 있습니다.
여기서 중요한것은 CSS JS 파일중 현재 페이지에 필요없는 코드를 %로 알려줍니다.
그래서 이것 보면서 유지보수할때 매인페이지 로딩시간 최적화도 할수 있습니다.
아무거나 클릭해서 보시면 빨간색 파란색으로 나옵니다.
이 페이지에서 파란색은 지금 쓰고 있는 스타일이고, 빨간색은 쓰지 않는 스타일이라고 보면 됩니다.
👉 Snippets(Console 탭에서 코드 여러줄 짤 때)
이것도 마찬가지로 크롬에서 개발자 도구를 여시고
command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생기면 snippets라고 검색하고 앤터키를 누르면
아래 이미지처럼 New snippet를 클릭하여 새로운 Snippets 생성합니다.
새로 생성한 Snippets에 코드를 작성하고 command + Enter를 치면
하단에 콘솔창에 결과를 확인 할수 있습니다.
그리고 마우스 우클릭해서
다음과 같이 이름 변경 및 파일로 저장(다운로드)을 할수도 있습니다.
👉 Shadow Editor(그림자 편집기)
개발자도구CSS에서 shadow를 컨트롤할때 조금만한 아이콘을 클릭하면
원하는 요소에서 shadow를 자유롭게 조절이 가능합니다.
👉 New Font Editor(새로운 폰트 편집기)
이제 New Font Editor에 관해서 이야기를 해보겠습니다. 먼저 New Font Editor를 사용하기 위해서는
설정이 필요합니다. Experiments > Enable new Font Editor....저것을 활성화 시켜주시고, 브라우저를 새로고침 해주시면 됩니다.
다시 개발자 도구를 열고, 스타일탭에서 스크롤을 하다보면 font를 사용한곳에 A라는 되어 있는 아이콘을 확인할수 있습니다.
그걸 클릭하면 다음과 같이 Font Family, CSS Properties를 컨트롤할수 있는 창을 확인 할수 있습니다.
👉 Flexbox Editor(Flexbox 편집기)
다음과 같이 Flexbox를 사용하는 요소에서 styles 탭을 보면 조금만한 아이콘을 클릭하면
다양한 속성들을 쉽게 컨트롤할수 있는 창을 확인할수 있습니다
하나씩 클릭해 보면서 자신에게 맞는 레이어아웃을 찾으시면 될것 같습니다.
제가 준비한 크롬 개발자도구 TIP은 여기까지 입니다.
이밖에 더 유용한 TIP을 발견하면 추가하도록 하겠습니다.👍👏🔥
감사합니다. 🙏🙏
Contents
소중한 공감 감사합니다