2장. 실습 환경과 DevTools

책의 실습은 빌드 도구가 없는 HTML·CSS·작은 JavaScript로 구성했다. 먼저 CSS 자체를 배우기 위해서다. 저장소에서 다음을 실행한다.

cd /Users/honi/WithAI/books/modern-css-production
npm run lab
# http://127.0.0.1:4350

Chrome DevTools의 Elements, Styles, Computed, Layout, Rendering을 연다. Styles는 어떤 선언이 경쟁했는지, Computed는 최종 사용값과 box 크기를 보여 준다. 취소선만 보고 “안 먹는다”고 말하지 말고 출처, layer, specificity, source order를 기록한다.

실무 디버깅은 최소 재현으로 끝난다. 문제가 난 element, 관련 selector, viewport, 브라우저 버전, 기대값과 실제값을 남긴다. 확장 프로그램과 캐시를 끈 새 프로필에서도 재현한다.