HTML 문서는 여러 태그들로 구성되어 있는데 소스 보기를 통해서 사용된 태그를 볼 수도 있지만 

Mozillar의 Goggle 서비스를 이용하면 어떤 사이트든 간단하게 태그를 확인할 수 있습니다. 

또한 일시적으로 웹 소스를 바꿔볼 수도 있습니다. (IE에서는 동작하지 않습니다) 


1) 북마크 바를 표시해 놓습니다.


브라우저 화면에 북마크바가 표시되어 있지 않으면 다음과 같은 방법으로 표시합니다

크롬 : 연장 도구 - 북마크 - 북마크바 표시

파이어폭스 : 북마크 아이콘 - 도구모음에 표시



2) http://hackasaurus.org/en-US/goggles/install/ 페이지로 이동한 후 "X-Ray Goggle"을 북마크바(즐겨찾기 모음)로 드래그해서 추가합니다.


goggle4.png


3) http://hackasaurus.org/en-US/goggles/ 페이지로 가서 북마크바에 있는 "X-Ray Goggle"을 클릭하여 활성화시킵니다. (본문 내용 중의 X-Ray Goggle"을 클릭해도 됨)


4) 화면 요소 위로 마우스 포인터를 옮길 때마다 적용된 태그가 표시됩니다. 



일시적으로 화면 내용 수정하기


X-Ray Goggle을 사용해 문서의 태그를 확인하는 것 외에도 문서의 소스를 수정하여 웹 문서의 모습을 일시적으로 수정할 수도 있습니다. 단, 제가 테스트해 본 바로는 아직까지 한글은 제대로 지원되지 않더군요.


1) http://hackasaurus.org/en-US/goggles/ 페이지로 접속합니다. 1번에 있는 주소를 복사해 두세요. 
원래 있던 그림을 대신할 새로운 그림의 주소입니다.


2) 북마크바에 있는 "X-Ray Goggle"나 본문 내용 중의 X-Ray Goggle"을 클릭해서 활성화시킵니다.


3) 오른쪽 이미지 위로 마우스 포인터를 가져가면 <img> 태그가 표시될 것입니다. 그 상태에서 키보드의 <R> 키를 누르세요.


goggle5.png


4) 해당 요소의 소스를 수정할 수 있는 창이 나타납니다. 기본으로 "Basic" 창이 나타나는데 여기에서 src 다음의 " " 안에 있는 내용을 지우고 1)에서 복사한 주소로 입력해 보세요.

또는 "Advance"를 클릭하면 메모장 같은 화면에 소스가 표시되므로 그 상태에서 소스를 수정해도 됩니다.


goggle2.png



goggle3.png


5) 서버에 있는 웹 문서 내용까지 수정되는 것은 아니지만, 클라이언트 상에서 일시적으로 웹 문서의 내용을 수정해서 볼 수 있습니다.