[엣지] 개발자 도구 실행 방법 및 활용팁

오랜만에 IT 블로거로 다운 글을 쓰려고 한다. 윈도우 10을 쓰면서 IE(Internet Explorer)의 비중이 줄고 많은 분들이 크롬이나 엣지로 갈아타셨다. 간단한 패킷 분석용으로 피들러나 와이어 샤크를 사용하시다 개발자 도구를 많이들 사용하시는데 이 엣지의 개발자 도구 실행방법과 활용팁에 대해 정리해봤다.

1. 실행방법 : F12를 누르면 우측에 창이 생긴다.

우측 상단에 개발자 도구 사용여부를 묻는 팝업이 실행된다.

2. 열기를 누르면 분리된 프레임으로 개발자 도구가 실행된다.

우측상단에 실행됨

 

실행방법은 알았는데 개발자 도구로 확인할 수 있는 것들은 뭐가 있을까?

1. html등 요소별 임시로 변경 테스트 가능: 여기서는 body(본문)의 색을 변경해봤다..(영구히 적용되는 것이 아니라 개발자 도구답게 임시로 요소를 변경해 볼 수 있음)

요소탭 body의 색깔을 선택

원하는 색으로 색깔을 변경했다.

주의사항으로는 영구히 색이 변경된 것이 아니니 마음에 드는 색을 적용(테스트) 해보고 관리자 메뉴 스킨의 html 편집 기능을 사용해서 적용해야 영구히 적용된다.

2. 느린 구간을 찾아낼 수 있다: 약간 블로그 사용자 보다는 전문성이 있는 기능인데 어떤 문서가 느린지(로딩하는데 시간이 걸리는) 확인할 수 있다.

네트워크 탭을 선택후 필터를 문서로 걸어서 호출해 본다.

지금 같은 경우

ads?블라블라(아마도 애드센스(광고) 건 페이지가 1.03초 걸린 듯

페이지 별로 걸린 시간을 알 수 있다. 블로거들은 사실 광고 정도 스크립트를 활용해서 걸어 놓으시는 걸로 아는데 별도 한번씩 점검해서 로딩이 느린 녀석을 찾아내 걷어 낼 수도 있다.

 

이상 실행방법(F12) 누르기와 간단한 운영법에 대해 알아봤다. 실질적으로 개발자나 디자이너가 활용할 것으로 예상되는데 블로거 하시는 분들은 로딩 시간이 갑자기 길어졌을 때 활용해 봐도 좋을 듯하다. 문의사항은 댓글로 주시면 아는 범위 내에서 답변드리겠다.