유용한 브라우저 디버깅 도구

최근(21년) 모던 브라우저들에 추가된 아래와 같이 CSS(스타일) 관련 디버깅 기능들이 있습니다.
​

Firefox Flexbox 도구

1. Flex 디버깅 도구(Crome,Firefox)​
​​2. Grid 디버깅 도구 (Chrome, Firefox)​​
​3. 폰트 도구 (Firefox)
​4. CSS Overview (Chrome)
5. 코드 커버리지 살펴보기 (Chrome)​
6. 쌓임 맥락 디버깅하기 (Edge, Safari)​
7. CSS 속성 그룹 모아 보기 (Chrome)​
8. 프린트시 CSS 미리보기 (Chrome, Firefox, Safari)

위 내용은 아래 링크를 통해 확인할 수 있습니다.

 

https://ui.toast.com/weekly-pick/ko_20211027

2021년에 살펴볼 법한 브라우저 개발자 도구의 유용한 스타일 관련 기능

 

아래 링크에는 자바스크립트 디버깅 방법에 대한 자세한 설명이 있습니다.

 

chrome 개발자도구 Sources 탭

1. 크롬 개발자 도구

2. 모바일 디버깅

3. 프락시를 통한 디버깅

 

https://ui.toast.com/fe-guide/ko_DEBUG

디버깅