WEBBOOK CHAPTER

웹서비스 개발 도구 상자: 6장. DevTools Elements로 DOM과 CSS를 분리한다

6장. DevTools Elements로 DOM과 CSS를 분리한다

버튼이 보이지 않을 때 DOM에 없는지, CSS로 숨겨졌는지, 다른 element가 덮는지 본다. Computed style과 box model, accessibility tree를 확인한다. 임시 style 수정은 가설 검증이지 source fix가 아니다.


DOM 없음      -> rendering condition/data
DOM 있음 0x0  -> layout/style
DOM 있음 덮임 -> stacking/pointer event
disabled      -> state/business rule

민감 화면을 screenshot으로 공유할 때 이름·주소·token을 제거한다. 실제 고객 화면 대신 fixture로 재현한다. Elements에서 고친 값을 source에 반영하고 visual/interaction test를 추가한다.