브라우저 개발자 도구 사용법 + 팁

브라우저에는 개발 편의성을 돕기 위한 개발자 도구라는 것이 있습니다.
개발자 도구는 현재 페이지의 HTML, CSS, JS 등을 확인할 수 있는 코드 뷰어라고 이해하시면 편합니다.

가장 기본적인 것부터 시작해서 간단한 팁 몇 개를 같이 소개해 드리겠습니다.

---

개발자 도구 여는 법:

• F12키 클릭
  종종 F12키를 막는 웹 사이트가 있습니다. 그럴 땐 아래 방법을 사용해 보세요.
• Ctrl + Shift + C키
  위 단축키 사용 시 바로 HTML 요소를 클릭할 수 있습니다.
  (프론트 개발자 분들은 이 단축키에 익숙해지시면 무척 편합니다!)
  마우스 호버 시 나오는 파랑 박스를 클릭해 개발자 도구에서 바로 관련 HTML과 CSS 등을 확인할 수 있습니다.
  
  

• 설정에서 직접 열기
  (크롬 기준) 우측 상단 점 3개 클릭 > 도구 더 보기 > 개발자 도구 클릭.

각 브라우저마다 디자인이나 기능 등 소소한 차이가 있으나 대부분의 브라우저가 크롬 엔진을 사용하기에 대동소이하다고 보셔도 무방합니다.

---

개발자 도구를 새 창으로 보는 법:

처음 개발자 도구를 여시면 위 사진처럼 브라우저 우측에 개발자 도구가 나타나는 것을 보실 수 있을 겁니다.

이렇게 되면 반응형 작업을 하거나 넓은 화면을 봐야할 때 불편할 수 있으니 개발자 도구만 별도의 창으로 뛰우는 방법을 설명해 드리겠습니다.

개발자 도구 > 우측 상단 점 3개 클릭 > Dock side에서 좌측의 "새 창" 아이콘 클릭.
위처럼 설정하시면 개발자 도구를 새 창으로 띄울 수 있습니다.

---

개발자 도구로 이미지나 글 퍼오는 법:

개발자 도구를 통해 HTML 요소를 확인할 수 있다고 말씀드렸었지요. 
이는 이미지와 글을 다소 쉽게 퍼올 수 있다는 것을 의미합니다.
혹은 복사하지 못하게 막은 텍스트나 퍼가지 못하게 막은 이미지 또한 퍼갈 수 있음을 의미합니다.

구매해야 하는 이미지나 저작권이 걸려 있는 글은 당연히 개발자 도구로 쉽게 가져가지 못하게 조치를 취하였습니다.
저작권은 존중받고 지키는 것이 마땅하니 혹여 악용을 방지하기 위해 이점 꼭 참고 부탁드립니다.

개발자 도구를 통해 글이나 이미지, 동영상 등의 원본을 보는 방법은 아래와 같습니다.

개발자 도구에서 Ctrl + Shift + C키를 누른 후 자세히 보고 싶은 이미지나 글을 클릭합니다.
단축키가 너무 어려우면 개발자 도구를 여셔서 좌측 상단의 화살표를 클릭하고 HTML(글, 이미지, 동영상 등)을 클릭하시면 됩니다.

글은 대부분의 상황에서 통짜로 복사가 됩니다.
그러나 두 번째 이미지처럼 HTML 태그가 같이 붙어 있는 경우가 있습니다.
이럴 때는 GPT를 통해 텍스트만 추출해달라고 하면 순수 텍스트만 가져올 수 있습니다.

이미지는 2가지 형태로 사이트에 보이게 할 수 있습니다.
하나는 HTML에 직접 이미지를 삽입하는 방식이고, 다른 하나는 CSS의 background 속성을 사용하여 이미지를 삽입하는 방식입니다.
이미지를 찾은 후 이미지의 URL을 클릭하여 주시면 이미지 원본을 새 탭에서 볼 수 있습니다.
동영상이나 기타 대부분의 파일들도 HTML에서 URL 클릭 시 원본을 확인하실 수 있으니 참고 부탁드립니다.

---

개발자 도구의 선택 아이콘 옆에 있는 노트북과 핸드폰 아이콘은 반응형(태블릿, 모바일 화면)을 컴퓨터에서 시도해 볼 수 있도록 도와주는 기능입니다.
클릭 시 브라우저 안에 크기를 조정할 수 있는 창이 나오며 해당 창으로 태블릿 화면이나 모바일 화면을 경험해 보실 수 있습니다.

또한, 두 번째 이미지의 상단 중간에 "크기 반응형" 을 클릭하시면 다양한 디바이스가 나오며 선택하실 수 있습니다.
"수정..."에서 더 많은 디바이스를 클릭해서 체험해 보실 수 있습니다.
가장 작은 폰을 체험해 보고 싶다면 width: 344px인 Galaxy Z Fold 5를 사용해 보시기를 바랍니다.

브라우저에서 보는 화면은 실제 태블릿이나 모바일 화면과는 다릅니다.
태블릿과 모바일은 작은 화면 특성상 픽셀이 오밀조밀하게 밀집되어 있습니다.
브라우저의 반응형 기능은 해당 디바이스를 픽셀 크기로만 재현했다고 보신 후 실제로 다른 디바이스에서도 이상 없이 돌아가는지 꼭 확인이 필요합니다!

반응형 기능을 켜면 브라우저가 체감될 정도로 느려지며(살짝 버벅거리는 정도) 화면은 클수록 좋기 때문에 개발 용도가 아니라면 켜지 않는 것이 좋습니다.

---

개발자 도구를 코드 에디터처럼 사용하는 법:

개발자 도구는 그 자체로 코드 에디터의 기능도 수행할 수 있습니다.
(0.1 + 0.2가 0.3이 아닌 이유는 이 링크를 참고 부탁드립니다.)

이렇게 JS코드 뿐만 아니라 HTML, CSS도 변경이 가능합니다.

---

쿠키 확인하는 법:

개발자 도구 > 상단 탭 > 애플리케이션 > 쿠키 > 사이트 URL 클릭 > 쿠키 확인

---

자잘한 팁:

• 개발자 도구에서 HTML을 클릭 후 Del키를 누르면 해당 HTML을 삭제할 수 있습니다.
• 개발자 도구에서 H키를 누르면 해당 HTML을 안 보이게(hide) 할 수 있습니다.

• 개발자 도구에서 Ctrl + Shift + F키를 누르면 HTML, CSS, JS를 전체 검색할 수 있습니다.
  이렇게 전체 검색 기능을 켜면 개발자 도구를 3 분할할 수 있습니다.
  저는 위처럼 개발자 도구를 사용하고 있습니다.
  이렇게 설정하면 웹 프론트에서 설정할 수 있는 대부분의 내용들을 한 번에 볼 수 있어 무척 편합니다.

---

다른 고인물 설정이 있다면 댓글로 남겨 후학들에게 공유해 주시면 좋을 것 같습니다.

그럼 다들 좋은 하루 보내세요!