익스플로러 개발자도구 사용법

HTML 편집기로 사용하여 코드를 작성하여 확인할 수 있지만, 매번 수정사항을 따로 저장하고 확인해야 하는 불편함을 없애기 위해서 우리는 각 브라우저의 개발자 도구를 사용하여 HTML 코드를 만들고 수정하여 그 즉시 수정사항의 결과를 확인하는 방법을 선택할 수 있습니다. 며칠 전 크롬 개발자도구 사용법에 대해서 알아봤는데요, 오늘은 익스플로러 개발자도구 사용법에 대하여 알아보도록 하겠습니다.

크롬 개발자도구 사용법 -> http://amusinglife.tistory.com/69

개발자 도구에서 특정 부분에 사용된 HTML 소스를 확인할 수 있으며 내용을 수정하여 그 즉시 확인 할 수 있습니다. 또한 CSS 내용, 자바스크립트 디버깅이나 리소스 사용 현황에 대하여도 확인이 가능합니다.

익스플로러 개발자도구 사용법

익스플로러7 버전에서도 개발자 도구를 사용할 수 있었지만, 기능이 제한적이었기 때문에 개발자들의 많은 사용을 끌어내진 못했는데요. 익스플로러 11버전으로 업그레이드하면서 F12 개발자 도구라는 이름으로 더 향상된 기능을 제공하게 되었습니다.

▲인터넷 익스플로러 창에서 톱니바퀴 모양의 버튼을 클릭 -> F12 개발자 도구 버튼을 클릭하여 실행할 수 있습니다. (단축키 F12 버튼)

▲하단부에 개발자 도구 창이 뜰 텐데요, 고정해제(Crtl+p) 버튼을 클릭하여 별도의 창으로 분리할 수 있습니다. 분리 후에 같은 버튼을 누르면 다시 원래대로 돌아갑니다.

수정하고자 하는 특정 소스를 클릭하면 오른쪽 스타일 시트에서 CSS 소스값을 확인할 수 있습니다. 여기서 수정하여 그 즉시 결괏값을 브라우저에서 확인할 수 있습니다. 수정할 경우 원본에서 바로 저장되는 것은 아니므로 안심하시고 수정하셔도 됩니다.

▲개발자도구에서 요소선택(CTRL+B) 버튼을 누른 후 확인하고자 하는 영역을 브라우저에서 클릭하면 특정 부분의 HTML, CSS 코드를 확인할 수 있습니다. 웹 개발을 할 때 참고하고자 하는 사이트가 있다면 이 기능이 굉장히 유용합니다. 또는 수정하고자 하는 코드 값을 찾을 때도 많이 사용합니다.

이상, 익스플로러 개발자도구 사용법에 대해서 알아보았습니다. ^ ^