Chrome과 Firefox에 Web Developer 설치하기

웹 페이지를 보면서 어떻게 만들었을 지 궁금해 했었다면 개발자 도구를 이용해서 HTML과 CSS 소스를 간편하게 확인할 수 있습니다.
Chrome 브라우저와 Firefox 브라우저에서 개발자 도구를 설치하는 방법은 조금 다릅니다.

Chrome에 Web Developer 설치하기

1. Chrome Webstore(http://chrome.google.com/webstore/category/apps)에 접속합니다.

2. "Web Developer"를 검색해서 Web Developer 도구를 찾았으면 오른쪽의 [+ FREE] 버튼을 클릭

3. 팝업창이 나타나면 [추가] 버튼을 클릭해서 설치

Web Developer가 설치되면 Chrome 주소 표시줄 오른쪽에 톱니바퀴 모양 아이콘 이 추가됩니다. 이 아이콘을 누르면 Web Developer의 기능들을 사용할 수 있습니다.

FireFox에 Web Developer 설치하기

1. Firefox -> Add-ons(부가 기능) 클릭

2. Web Developer를 검색해서 [Install(설치하기)] 클릭

3. 설치 후 [Restart now(다시 시작)]을 클릭해서 Firefox를 다시 시작

4. 브라우저 상단에 툴바가 생김

이렇게 Chrome 또는 Firefox에 Web Developer 툴을 설치하면 여러가지 기능들을 사용할 수 있습니다. 예를 들어 Chrome에서는 CSS -> Disable All Styles, Firefox에서는 CSS -> Disable Styles -> Disable All Styles 기능을 사용하면 웹페이지에서 CSS를 제거해서 볼 수 있습니다.