TIL no.16 - Dev Tools 개발자 도구

 

 

우리가 개발을 하는데 있어서 개발자 도구에 대해서 아는 것은 당연히 중요하기 때문에

꼭 필요한 도구 몇가지에 대한 정보를 공부해봤습니다 !

 

 

 

---

 

 

 

일단, 개발툴을 사용하기 위해서는 맥북은  Command + option + i   를 누르면 개발 도구를 꺼낼 수 있습니다.

 F12  로도 개발도구를 열 수 있습니다.

 

첫번째로,  Elements !  

Elements 는 개발자로서 당연히 알아야 할 부분 중 하나인데요 ! 브라우저의 html 구조를 확인하거나 사용된 태그나 css 속성들을 확인하기 위해 사용할 수 있습니다. 프론트앤드 개발자로서 css 파일로 스타일링한 브라우저 화면을 보면서 Elements 페이지에서 css를 수정하여 적용해보면서 한눈에 보기 쉽게 확인할 수 있습니다.

- 빨간 동그라미를 친 버튼을 클릭하면 해당 html 페이지 안의 block들을 눌러보면서 어떤 구조로 잡혀 있는지를 알 수 있습니다.

알고 싶은 부분을 클릭해서 확인하면 됩니다 .

 

- 위 노란 동그라미를 친 버튼은 반응형 웹을 만들 때 유용하게 사용할 수 있는데요 ! 저 버튼을 클릭해보시면  화면의 크기가 변경됩니다. 원하는 크기를 가진 디바이스를 선택해가며 그에 맞는 디자인적인 html 요소를  변경할 수 있습니다.

 

 

-오른쪽 부분에서 Syles 로 css 속성들을 확인하며 Event Listener로는 JavaScript 적용된 event들을 확인할 수 있습니다.

Styles 부분에서 css 정렬 순서는 우선순위 순서로 정렬되어 있으며 적용되지 않은 속성은 더 우선순위 속성을 적용하지 위해 적용되지 않았다고 표시됩니다.

 

두번째로,  Console !  

Console 또한 당연히 중요한 부분이죠 ! 코드를 치면서 작동하는지를 확인하기 위해 console.log() 를 작성하면 이 화면에서 값을 볼 수 있습니다. 에러가 날 때도 이 도구에서 확인할 수 있으며 console과 코드를 번갈아 확인하면서 오류를 해결하면 됩니다.

너무 많은 에러나 경고로 console창을 확인하기 어려울 때는 아래 사진의 연두색 네모 부분을 클릭해 에러 부분 체크를 제외시키면 됩니다.

 

 

세번째로,  Network !  

업로드 된 모든 파일에 대한 네트워크 현황에 대해서 볼 수 있는 창으로 성공적으로 파일이 로드된 지 확인할 수 있습니다.

network 버튼을 누르고 새로고침하면 파일들이 업로드됩니다. status는 HTTP respose code이고 부분을 보며 파일의 성공적 업로드를 파악합니다. Type은 resource typeTime 요청이 얼마나 걸리는지 리소스의 디테일을 검사할 수 있습니다.

 

Filter 부분에서 XHR 은 api를 호출했을 때 나오는 url을 알 수 있습니다. 이 부분으로 프론트엔드가 백엔드로부터 api를 호출합니다.

백엔드와 프론트엔드 간의 소통에서 중요한 부분으로 작용하며 어느 부분에서 오류가 발생한 것인지 확인 가능합니다 !

호출이 되지 않은 것인지 응답이 되지 않은 것인지. 누구로부터 에러가 난 것인지 확인 가능합니다.

Filter에서 img나 Media 에서 사진이나 동영상을 가져와 클론코딩하는데 사용할 수 있습니다.  

 

 

 

 

마지막으로,  Application!  

제가 개발도구를 사용하는 법을 잘 몰랐을 때 , application이 과연 무슨 기능을 할지 생각해본 적이 있었는데요 ! 

저는 별 필요없는 부분이라고 생각했었는데 알고보니 굉장히 중요한 기능을 하고 있는 친구였어요... 🤨

 

Application 에서 사용되는 저장소로 

 

- Local Storage

- Session Storage

- Cookies 

 

가 있습니다 !

 

Local Storage 는 브라우저 화면을 끄거나 컴퓨터 전원을 껐다 켜도 내용이 항상 저장되어 있습니다.

사용자가 직접 삭제하지 않는 이상 사라지지 않기 때문에 사라지지 않게 저장해두어야 할 사용자의 정보에 대해 저장합니다.

*저는 todo list를 만들 때 이걸 사용했는데 제가 계획한 메모들이 브라우저 화면을 껐다가 켜도 저장되게 만들 때 사용했습니다 !

 

Session Storage 는 새로고침을 했을 때나 화면이 넘어갔을 때는 정보가 남아있지만 그 창을 꺼버렸을 때나 컴퓨터를 껐다 켰을 때는 정보가 저장되어 있지 않습니다. 그렇기 때문에 사용자의 쇼핑정보나 사용순간에 저장해야 할 정보들에 대해 저장하고 있다가 컴퓨터가 꺼졌을 때 사라집니다.

 

Cookies 는 Local Storage와 Session Storage가 생기기 전에 있던 저장소로 현재는 많이 사용되지 않습니다.

 

 

 

 

개발도구에서 자주 사용되는 것들에 대해서 정리해보았습니다 !

다른 것들도 눌러보면서 어떤 기능이 있는지 확인해보면 좋을 것 같습니다 🤩