2024.09.02(월) TIL

크롬 개발자 창 사용하기

단축명령어

• cmd + option + I: 최근 사용한 탭을 열어준다.
• cmd + shift + P: 명령어 창을 열어준다.
• cmd + option + J: 바로 콘솔창이 열린다.

HTML요소 수정하기

태그 이름이나 태그 내부에 있는 content 등을 개발자도구에서 편집할 수 있다. 위치 이동 및 속성 수정도 가능하다.

CSS 수정하기

CSS 스타일에 있는 네모난 색상 칸을 클릭하면 스포이드로 색 추출이 가능하다.

텍스트 명도대비

content 요소를 선택해서 마우스를 가져다대면 contrast로 확인이 가능하다.

가상 클래스 확인

요소 상태 전환 버튼을 통해 hover, active 등 여러 상태의 CSS를 확인하거나 특정 클래스를 추가할 수 있다.

Javascript 비활성화

• 환경설정 > 디버거 > JS 사용중지를 클릭해서 자바스크립트를 사용 중지시킬 수 있다.

듀얼 스크린 모드

• 환경설정 -> 실험 -> dual 키워드로 필터링 검색 후 체크한다.
• 이후 surface Duo를 선택하고 옆에 듀얼모드 아이콘을 클릭하면 듀얼모드 버전의 창이 열린다.

메세지 종류

• console.log: 일반 메세지
• console.info: 정보 메세지
• console.debug: 디버깅 메세지 (기본수준버튼을 클릭해서 상세 버튼을 체크해야 한다.)
• console.warn: 경고 메세지
• console.error: 에러 메세지
• console.table: 배열, 객체등의 데이터를 테이블 형태로 콘솔에 표시해준다.
• console.time, console.timeEnd: 실행하고자 하는 코드의 시작과 끝에 넣어 코드 실행시간을 측정할 수 있다.

콘솔 주의사항

• let, const 의 재선언이 가능하다.
• 하지만 let 에서 const 로 가거나 그 반대는 안되고, 같은 키워드로 선언해야 재선언이 가능하다.

영상속도 조절하기

아래 코드가 포함된 함수를 실행시켜서 영상 속도를 조절할 수 있다.

document.querySelector('video').playbackRate = 1.0;

네트워크 탭

리소스 통신을 확인할 수 있는 탭이다.

• 캐시 사용중지: 캐시 사용중지 버튼을 클릭하면 재방문시 브라우저에 캐싱되지 않도록 하기 때문에 첫 방문자의 사용자 경험을 더 확실하게 알 수 있다.
• 쓰로틀링 등을 사용해서 로딩시간이 길지 않은지 등의 사용자 경험을 향상시켜야 한다.
• 쓰로틀링 시 추가 버튼을 사용해서 지연시간을 커스텀할 수 있다.

LightHouse

• 웹의 성능을 개선하기 위한 자동화 도구이며 사이트 품질을 개선하도록 도와준다. 개선 가이드는 따로 꼭 확인해보자!

1. 모드
   • 탐색: 초기 페이지 로딩시 발생하는 성능 문제를 분석한다.
   • 기간: 사용자가 정의한 시간 사이의 성능 문제를 분석한다.
   • 스냅샷: 특정 상태의 성능 문제를 분석한다.
2. 기기
   • 모바일: 모바일 에이전트 변경으로 모바일 뷰포트로 시뮬레이션 한다.
   • pc: 모바일 변경사항을 비활성화 한 후 검사한다.
3. 카테고리
   • 성능: 전반적인 웹 문제를 보여준다.
   • 접근성: 사용자의 접근성에 대한 지수를 보여준다.
   • 권장사항: 보안 측면에서 우수한지, 개발 최신 표준등을 준수하는지등을 보여준다.
   • 검색엔진 최적화: SEO 크롤링이 잘 되는지를 보여준다.
   • 프로그레시브 웹 앱: 웹 앱과 네이티브 앱의 장점을 모두 사용하고 있는지를 보여준다.

디버깅

스크립트, 코드의 실행과정과 에러 등을 확인할 수 있다. 소스 코드를 클릭해서 수정도 가능하다.
종단점을 선택하고, 이벤트에 따라 스크립트를 일시 중지할 수 있도록 설정이 가능하다. 코드를 실행하며 변수에 들어가는 값도 확인할 수 있으므로 콘솔보다 디버깅을 사용할 경우 더 빨리 에러를 찾을 수 있다.

기타 기록

성능 최적화

성능 최적화는 크게 1.) 로딩 최적화 2.) 렌더링 최적화 로 나눌 수 있다.

영어

1. 드디어 우리가 합의에 도달한 것 같군요.
   I think we've finally reached an agreement
2. 영향을 끼치다.
   have a ~ impact on
3. 그쪽은 제가 기대했던 것과 다르네요.
   You look different with I expected.
4. 저의 일상 업무는 주로 보고서 작성과 편집으로 이루어져 있어요.
   My day-to-day work mainly consists of writing and editing reports
5. 출장 기간의 비용을 다 기록해두었다.
   I kept a record of my expenses during the business trip.
6. 정부 안에는 우리를 신경쓰지 않는 사람들이 많습니다.
   There are a lot of people within the goverment who don't care about us.