[ 크롬 개발자도구 ] 페이지 소스 및 스타일 편집하기

안녕하세요. 제임스 입니다. 

크롬 개발자 도구를 사용하면서 자주 사용하는 것중 몇 가지를 언급하려고 합니다. 

바로 로드된 페이지 소스 수정 및 스타일 편집으로 현 페이지의 변경 사항을 미리 확인 하는 방법입니다. 

아래 이미지와 같이 Elements 패널을 이용하게 됩니다. 

물론 크롬 개발자도구에서 수정했다고 수정 내용이 지속적으로 반영되는 것은 아닙니다. 

화면이 리로드 되는 경우 개발자도구에서 수정한 내용은 사라지게 됩니다. 

화면을 리로드 하지 않는다면 원하는 소스 코드 추가 및 스타일 적용등을 통해 미리 적용될 화면을 확인 할 수 있는 아주 좋은 방법입니다. (페이지를 리로드 해도 변경 내용이 지속되도록 할 수 있는 방법이 있으나 이는 추후 언급 하도록 하겠습니다 - 일반적인 경우 화면 리로드 시 기 반영코드는 사라집니다)

DOM node 또는 텍스트등의 실시간 편집 하려면 수정하고자 하는 요소 또는 텍스트를 더블 클릭하여 수정하고자 하는 영역을 선택 후 원하는 값으로 변경 하면 됩니다. 

네이버 뉴스 목록 중 하나른 선택 하여 우측 Elements 패널에서 텍스트를 선택 하였습니다. 

그리고 위와 같이 "크롬 개발자 도구 페이지 편집" 이라는 문구로 변경후 엔터키를 치면 네이버 홈페이지 뉴스 홈의 세번째 기사 제목이 바뀐 것을 확인 할 수 있습니다 (다시 언급하지만 이는 로컬에서만 변경 된것으로 리로드 시 해당 페이지에서 제공하고 있는 원 소스가 로드 되므로 수정한 내용은 사라지게 됩니다)

스타일 실시간 편집은 Style 창에서 스타일 속성 이름과 값을 변경 하면 됩니다. 

위와 같이 컬러 값이 지정된 스타일을 아래와 같이 변경 했습니다.

실제 네이버 홈페이지에서 방문한 목록을 회색처리 하는 스타일인데요. 

제가 방문했던 목록의 색을 변경하여 아래과 같이 변경 해봤습니다. 

위와 같은 방법으로 스타일을 얼마든지 변경해 볼 수 있습니다. 화면 리로드 시 당연히 적용한 내용은 삭제 됩니다 :)

박스 모델 매개변수 검사 및 편집은 Computed 창을 통해서 진행 할 수 있습니다. 선택한 영역을 박스 형으로 표현하여 주며 각 영역의 margin 또는 padding 값등등 해당 영역를 표현하기 위해 적용된 값들을 박스 모양으로 표현해 줍니다. 

박스 내의 숫자 영역을 클릭 하여 값을 변경 할 수 있습니다. 

위 이미지는 아래 이미지의 붉은색 박스가 처져있는 부분을 나타내고 있습니다. 

박스 모델 매개변수를 변경해 보겠습니다. 

padding 부분의 top 및 bottom 영역을 각각 10 > 50, 11 > 50 으로 변경 했습니다. 

결과는 보시는 바와 같이 padding top 및 padding bottom 값이 늘어나 보입니다. 

많이 사용하게 되는 기능들이므로 잘 봐두셨다가 유용하게 사용 하시길 바라며...

재차 강조 하지만 Elements 패널에서 수정한 내용들은 화면이 리로드 되는 순간 원 소스로 복구 됩니다. 즉, 개발자 도구상에서 적용하는 스크립트, 코드, 스타일 등은 실제 소스에 아무런 영향을 미치지 못합니다. 

화면이 리로드 되어도 개발자 도구 상에서 지속적으로 적용된 모습을 확인하는 방법이 있지만, 이는 다음 기회에 포스팅 하도록 하겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D