태그:                                 

웹페이지 개발자를 위한 툴이 아주 가까이 있었는데 지금까지 모르고 있었다니…

IE9(다른 버전도 되나)와 크롬에서는 웹페이지를 열고, <F12> 키를 누르면 현재 페이지의 구조와 CSS 상속 및 적용된 항목이 쭉 표시된다.

사용자 삽입 이미지

파이어폭스에서는 웹페이지를 열고, 메뉴에서 개발자도구 -> 문서검사를 선택하면 구조를 확인할 수 있다.
오른쪽 아래에 있는 <HTML> 버튼을 누르면 화면 아래에 html 소스가 나오고, <스타일> 버튼을 누르면 오른쪽에 CSS가 나온다.

사용자 삽입 이미지

이런게 있는걸 알았으면 블로그 수정할 때마다 하나하나 수정하면서 리로딩하지 않아도 되는건데…어렵게도 작업을 했었다.
물론 더 좋은 툴도 많이 있겠지만 브라우저에 내장된 기능이라 별도의 비용이 들지 않으면서도 간단하게 확인할 수 있으니 좋아보인다.
다음에 작업할 때는 꼭 이걸로 확인하면서 해야지.

관련글

불여우를 빠르게 사용하는 몇가지 팁... 원문 링크 : 불여우를 빠르게 사용하는 몇가지 팁 불여우를 빠르게 사용하는 몇가지 팁 xp에서 시동 시간 빠르게 하기 불여우 바로가기에서 "C:Program FilesMozi...
갑자기 불여우 부가기능이 먹통인…... 잘 쓰고 있는 불여우의 부가기능들이 오늘 갑자기 비활성화됐다. 부가기능 페이지로 가보니 아래와같은 상태로 나온다. 비활성화 된 부가기능들 잘 쓰고 있던 것들이라 동작을 하지 않으니 너무 불편하...
불여우 사용 중 어떤 프로그램을 설치했더니…... 그 프로그램이 지 맘대로 홈과 새탭을 눌렀을 때 나오는 페이지를 바꿔버렸다. 맘에 안들어서 삭제했는데...그래도 원래대로 복귀가 안되는... 새 탭을 열면 chrome://quick_start/c...
Chrome의 임시파일을 램디스크로 지정하는 방법... 전에 불여우 및 크롬의 임시 디렉토리(캐시 디렉토리)를 변경하는 방법을 썼었는데, 윈도우 8로 바꾸면서 이전 방법으로 크롬의 임시 디렉토리를 바꾸는게 좀 어려워졌다(내가 잘 모르는 것이겠지만...)...
Firefox(불여우)에서 사용할 부가 기능... Firefox는 부가기능이 무진장 많이 있는 것 같다. 유용한 것도 많고, 꼭 필요한 것도 많지만...뭐가 있는지 찾기도 어렵다. 일단 그 중 다음의 몇 가지를 사용한다. ScreenGrab -...
구글 크롬 사용자 데이터 및 캐시 폴더 변경... 구글 크롬의 캐시를 램디스크로 변경하려면 바탕화면과 시작 메뉴의 아이콘을 오른쪽 클릭하고, 속성을 선택한 다음 대상의 뒤에 다음과 같이 추가한다.사용자 데이터 폴더 : --user-data-dir=...
각 브라우저의 웹 개발자를 위한 툴

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다