CSS 디버깅 사라지는 요소

내가 당신과 함께 트릭을 공유할 것입니다. 너무 멋져서 당신은 충격을 받을 것입니다 ⚡️

하지만 먼저 이 게시물의 주제가 무엇인지 모르는 사람들을 위해 약간의 소개가 있습니다.

일부 요소는 사용자가 다른 요소와 상호 작용할 때만 화면에 나타납니다.

예를 들어 사용자가 텍스트를 입력하면 제안 상자가 나타나거나 메뉴 항목을 가리키면 드롭다운이 렌더링됩니다.

(이MUI component의 드롭다운 항목처럼)

때로는 동적으로 나타나는 요소가 필요할 때까지 DOM에 존재하지 않는 경우가 있습니다. 예를 들어 다른 요소와 상호 작용할 때 나타납니다.

어떻게 검사할 수 있습니까? 검사 버튼을 클릭하면 동적으로 추가된 요소가 사라지기 때문입니다.

1. 타임아웃 트릭

대부분의 개발자는 이 트릭에 익숙하지만 그렇지 않은 개발자를 위해 DOM을 "고정"하려면 debugger 내부에서 (devtools 콘솔 내에서) setTimeout 명령을 실행할 수 있는 충분한 시간 동안 실행하고 무엇이든 할 수 있습니다. 검사하려는 회피적인 것을 표시하려면 다음을 수행해야 합니다.

setTimeout(() => { debugger; }, 3000)

이것은 편리하지만 임의의 이상한 CSS를 지속적으로 디버깅할 때 이 명령을 계속 실행하는 것은 성가실 수 있습니다.

2. Devtools 소스 패널에서 F8

Sources 패널이 열려 있는 동안 F8 키를 누르면 DOM도 정지되고 debugger 모드로 들어갑니다.

3. 단축키 자동 디버거:

위 트릭은 전용 키보드 단축키(Chrome 브라우저)를 사용하여 자동화할 수 있습니다.

shortkeys extension 설치

확장 프로그램 아이콘을 클릭하고 "옵션"을 선택합니다.

다음과 같이 구성합니다.

"바로가기 저장"버튼을 클릭합니다(오른쪽 하단)

이제 아무 페이지로 이동하여 devtools가 열려 있는지 확인하고 검사 대상 요소가 보이는 동안 CTRL+스페이스바 키를 누르십시오.

4. devtools로 포커스된 페이지를 에뮬레이션합니다.

Devtools 열기

Command + shift + P(OSX) 또는 CTRL + shift + P(Windows) 누르기

유형 focused

선택 Emulate a focused page

이제 devtools와 상호작용해도 초점이 맞춰진 요소에서 초점을 잃지 않습니다.