개발자 도구 효율적으로 잘 사용해보자! 🔧

오늘은 개발을 할 때 사용하는 개발자 도구를 효율적으로 잘 사용하기 위해
개발자 도구의 여러 기능들과 꿀팁들에 대해서 알아봅시다

저는 크롬을 자주 사용하여서 크롬 개발자 도구를 기준으로 설명했습니다

꿀팁~🍯

---

❓ 개발자 도구 여러 기능들과 꿀팁들은?

먼저 F12를 눌러서 개발자 도구를 열어봅시다!

그리고 말해드릴 순서를 말씀드리겠습니다

1. 개발자 도구 설정
2. 요소 (Element)
3. 소스 (Source)
4. 네트워크 (Network)
5. 애플리케이션 (Application)
6. Lighthouse

개발자 도구 설정

개발자 도구 오른쪽 상단에 있는 톱니바퀴를 누르면 

setting

이렇게 여러 설정들을 할 수 있습니다

 

제가 추천하는 몇 가지 설정들을 말하자면 

 

1. 언어 ( setting(톱니바퀴) > 환경 설정 > 디자인 )

저기 위에 보이는 언어를 자신에게 맞게 변경하고 개발자 도구를 껐다 다시 켜주면 적용이 되어 있는 것을 볼 수 있습니다

 

2. 테마 ( setting(톱니바퀴) > 환경 설정 > 디자인 )

다크모드나 라이트모트로 설정을 해줄 수 있습니다

 

3. 캐시 사용 중지 ( setting(톱니바퀴) > 환경 설정 > 네트워크 )

DevTools가 열려 있는 동안 캐시 사용 중지에 체크하면 개발 중 캐시로 인해 최신 변경 사항이 반영되지 않는 문제를 방지할 수 있습니다

 

4. 디버깅 중 로그 보존 ( setting(톱니바퀴) > 환경 설정 > 네트워크 )

로그 보존 옵션을 활성화하면 페이지를 새로고침해도 콘솔 로그가 사라지지 않습니다

---

요소 (Element)

여기서는 자신이 한 스타일링이 제대로 변경되었는지 확인할 때 사용하면 유용합니다

Element

원하는 요소에 hover을 하면 해당 부분이 어떤 부분인지 시각적으로 보여줍니다

그리고 자신이 선택한 요소를 Drag & Drop을 이용하여 다른 위치로 옮길 수도 있고 삭제도 가능합니다

밑에 스타일을 보면 어떤 스타일이 적용되었는지 선택자와 코드를 볼 수 있고
저기에서 코드를 추가해 요소들이 어떻게 바뀌는지까지 볼 수 있습니다 

 

자신이 원하는 요소에 우클릭을 하고 중단 지점(Break on)을 누르면 

특정 이벤트가 발생하거나 속성값이 변경되는 시점에서 중단점을 설정할 수 있습니다

DOM 요소의 상태를 쉽게 파악하고 문제가 있는 코드를 발견하고 수정하는데 도움이 됩니다

• Subtree modifications: 자식 요소가 추가되거나 제거되는 경우 중단점을 설정
• Attribute modifications: 요소의 속성이 변경되는 경우 중단점을 설정
• Node removal: 요소가 삭제되는 경우 중단점을 설정

---

소스 (Source)

소스에서는 해당 페이지의 소스를 볼 수 있습니다
그리고 오류가 콘솔에 찍힐 때 몇몇 오류들은 누르면 소스로 이동하게 되는데 어디 부분에 에러가 있는지 보여줍니다

Source

코드 라인에 브레이크 포인트를 걸어 해당하는 부분만 디버깅을 해볼 수 있습니다

에러가 발생한 코드를 파악하고 디버깅으로 원인을 분석하여 해결하기 매우 좋은 기능입니다

---

네트워크 (Network)

요청과 응답에 대한 정보를 얻을 수 있습니다

상태코드, 응답 메시지, 요청 메시지 등등을 확인 가능합니다

위에 필터를 이용하여서 내가 원하는 요청들만 볼 수 있습니다

---

애플리케이션 (Application)

애플리케이션은 여러 저장소(로컬, 세션, 쿠키 등)를 이용할 수 있습니다

저장되어 있는 값을 볼 수 있습니다

Application

저장소에 대해서 더 궁금하다면?

https://baeougi.tistory.com/7

---

Lighthouse

개발자 도구에서는 웹을 평가해주는 기능입니다

여러 측면에서 점수를 매겨줍니다

Lighthouse

---

✨ 글을 마치며

오늘은 개발자 도구를 효율적으로 잘 사용하기 위해 꿀팁들을 알아보았는데
실제로 개발을 할 때 한 번씩 사용해 볼 생각을 하니 매우 기대가 됩니다!!

다른 많은 좋은 기능들도 존재할 것이니 잘 알아보고 사용하셨으면 좋겠습니다

글을 읽어주셔서 감사합니다