안녕하세요. 조경문 입니다.
블로그에 업로드 되는 첫 글이 되었네요.
현재 구글은 Chrome 118의 릴리스를 통해 탭 그룹의 혁신적인 변화를 소개하였으며,
이어서 Chrome 119가 초기 안정 버전으로 출시되었습니다.
크롬 디벨로퍼를 읽던 도중, 다가오는 120 버전 업데이트에서 흥미있는 내용들이 있어
소개해드리고자 공유드리게 되었습니다.
우선, 전체적인 카테고리를 한 문장으로 축약하자면 다음과 같습니다.
1. 전체적인 Chrome 120 예정 업데이트 항목
- Third-party cookie phaseout: 제3자 쿠키 단계적 폐지에 관한 내용입니다.
- Privacy Sandbox Analysis Tool: 웹사이트의 쿠키 분석을 위한 도구 소개입니다.
- Enhanced ignore listing: 더 향상된 무시 목록 기능에 대한 설명입니다.
- New input mode toggle during remote debugging: 원격 디버깅 시 새로운 입력 모드 전환 기능입니다.
- Elements panel updates: 'Elements' 패널에서 '#document' 노드의 URL 표시와 같은 업데이트 사항입니다.
- Effective Content Security Policy in the Application panel: 'Application' 패널에서 효과적인 콘텐츠 보안 정책을 볼 수 있는 기능입니다.
- Improved animation debugging: 애니메이션 디버깅 기능 개선에 관한 설명입니다.
- 'Do you trust this code?' dialog in Sources and self-XSS warning in Console: 소스 패널에서 나타나는 '이 코드를 신뢰하십니까?' 대화 상자 및 콘솔에서의 자가 XSS 경고에 대한 내용입니다.
- Event listener breakpoints in web workers and worklets: 웹 워커와 워클릿에서의 이벤트 리스너 중단점에 대한 설명입니다.
- New media badge for and : 'Elements' 패널에서 및 태그에 대한 새로운 미디어 배지 기능입니다.
- Preloading renamed to Speculative loading: 'Preloading'이 'Speculative loading'으로 이름이 변경되었습니다.
- Lighthouse 11.2.0: Lighthouse 패널이 Lighthouse 11.2.0으로 업데이트되었습니다.
Accessibility improvements: 접근성 개선 사항에 대한 설명입니다.
이어서 소개드릴 항목들은 제가 조금 더 관심있는 항목들을 추려서 조금 더 심도있게 알아보았습니다.
2. 효율적인 디버깅과 개선된 사용자 경험(for UX Group)
1. node_modules에 대한 기본 제외 패턴:
DevTools에는 이제 디버거 설정에서 사용자 정의 제외 규칙으로 기본 정규 표현식(!!!)이 포함됩니다. 이는 node_modules 및 bower_components의 스크립트를 기본적으로 건너뛰어 코드에만 집중할 수 있게 도와줍니다. 이 기능은 설정에서 언제든지 비활성화하거나 사용자 정의할 수 있습니다.(on off 가능!)
2.Elements 패널에서 #document 노드의 URL 표시:
iframe 디버깅을 용이하게 하기 위해, Elements 패널은 이제 #document 노드 옆에 documentURL을 표시합니다. 이 업데이트는 디버깅 목적으로 iframe 소스에 더 쉽게 접근할 수 있겠네요.
3.개선된 애니메이션 디버깅:
이제 타임라인 헤더 어디에서나 클릭하여 재생 헤드를 설정할 수 있으며, 애니메이션은 이전 상태에 따라 계속 재생되거나 멈출 수 있습니다. 이미지를 보니까 트랜지션이 진행되는 동안 스냅샷으로 프레임 단위로 쪼개볼 수 있네요. 디테일 & 프로트타입 작업에 도움될듯 합니다. 그리고 애니메이션 이름 열을 조정하여 전체 애니메이션 이름을 한 눈에 볼 수 있게 되네요 :)
4.웹 워커 및 워클릿에서의 이벤트 리스너 중단점:
Sources 패널에서 이벤트 중단점을 설정할 때, 디버가가 이제는 해당 이벤트가 웹 워커나 워클릿에서 발생할 때도 일시 중지합니다. 이 기능은 웹 워커(web worker) 및 워클릿(worklet)을 사용하는 복잡한 디버깅 능력을 확장하여 더 철저한 분석을 할 수 있을거 같습니다.
TMI
웹 워커(Web Worker): 웹 워커는 메인 스레드와 별도로 백그라운드에서 실행되는 스크립트로, 메인 페이지의 성능에 영향을 미치지 않으면서 복잡한 계산이나 데이터 처리를 수행할 수 있게 해줍니다. 이를 통해 웹 애플리케이션의 반응성과 성능을 향상시킬 수 있습니다.
워클릿(Worklet): 워클릿은 CSS, 오디오 처리, 레이아웃 등과 같은 특정 작업에 맞춰 최적화된 경량 스크립트 실행 환경입니다. 이는 브라우저의 렌더링 파이프라인에 더 가까운 수준에서 작동하며, 특정 작업을 더 효율적으로 처리할 수 있도록 도와줍니다.
요약하자면?
/node_modules/ 및 /bower_components/ 스크립트의 자동 건너뛰기, #document 노드의 URL 표시(iframe 디버깅!), 애니메이션 탭의 개선, 그리고 웹 워커와 워클릿에서 이벤트 리스너 중단점을 통해 개발자들의 디버깅 작업을 더 효율적이게 만들어주는 업데이트가 되겠네요.
구체적인 설명과 더 자세한 정보들은 아래 링크에서 추가적으로 확인하실 수 있습니다.
이 글 외에도 흥미있고 재미있는 포스트들이 많으니, 시간 되실 때 한번씩 보시는걸 추천드려요 :)
글 읽어주셔서 감사하며, 편안한 밤 되시길 바라겠습니다.
감사합니다.
참고 자료)
What's new in DevTools (Chrome 120) - Chrome for Developers
Third-party cookie phaseout issues reported in the Issues panel, Privacy Sandbox Analysis Tool for cookies, effective Content Security Policy in the Applications panel, improved animations debugging, enhanced ignore listing, and more.
https://developer.chrome.com/blog/new-in-devtools-120/
기술에 매몰되면 안되지만, 우리는 기술에 민감해야져야만 한다.
