[CS study] 개발자도구

개발자 도구의 활용을 잘해야 더욱 좋은 개발자가 될 수 있겠다고 느끼게 된 계기로써는 클론코딩을 하면서 처음으로 느꼈던 것 같다 처음에는 그냥 단순히 Style에 관련 된 내용과 HTML이 어떻게 구성이 되어있는만 간단하게 확인을 하다가 점차 Network의 상태를 통해서 Preview로 SSR로 넘어오는데이터를 체크하고 Lighthouse로 성능을 측정하고 localstorage와 cookie에 값을 저장하는 것을 확인하면서 다양하게 여러방면으로 활용이 되고 활용을 해야 개발을 잘 할 수 있다고 느꼈기 때문에 조금이나마 몰랐던 사용방법이 있다면 도움이 되었으면 한다.

 

기본적인 Console, Element에 관한 얘기보다는 이런 기능도 있었네 라는 요소를 적을 생각임

 

1. 스크린샷 기능

현재 window를 사용하고 있는 나는 캡쳐를 통해서 화면에 띄어진 이미지를 가져오고 있는데 듀얼모니터를 하고나서 화면의 크기가 안맞아서 그런지 캡쳐가 이상하게 작동하기 시작했다. 그렇기에 더욱 유용한 기능이고 고화질의 선택 요소에 대한 스크린샷만 가져오는 것도 가능하기에 포트폴리오를 만들 때 사용하면 유용할 것 같다

화면을 닫는 close icon 옆에 있는 점3개를 누른다 > Run command를 누른다 > Screenshot을 검색한다 > 이후에는 감에 맡기면 된다.

 

2. Network 상태 확인

XHR이란 javascript API로써 API 요청이 있다면 생성이 되기때문에 데이터를 GET이나 POST했을 때 안된다면 여기를 보자

 요청한 XHR에 우클릭을 누르고 Replay XHR을 누른다면 요청을 다시 시도할 수 있다. form을 다시 작성해서 확인하는 바보같은 내 행동을 줄여줄 것이다..

 

3. 나머지는 너거들이 뜯어보셔요