크롬 개발자도구 사용법

크롬 개발자도구 사용법

크롬 개발자도구 사용법

1 개요

웹사이트를 개발하다보면 간단한 수정도 웹페이지 수정후 재업로드 브라우저 확인작업을 하여야 제대로 수정이 되어졌는지 확인이 가능하지만 좀

더 간편하게 수정될 페이지에서 개발자 도구를 이용하여 미리 간편하게 수정하고 웹페이지상의 수정된 내용을 직관적으로 확인할 수 있는 방법을 

이용한다면 더 편하게 개발을 할 수 있을것이다. 개발자는 물론 웹디자이너나 코더라면 더욱더 활용도가 높은 방법이 되겠다.

2 실행법

우선 수정이나 확인을 원하는 페이지를 크롬으로 접속후 단축키 F12 를 누르게 되면 위와 같은 화면이 나타나게 된다. 

1번 선택버튼을 클릭후 수정이나 확인을 원하는 위치에 2번처럼 올려놓게되면 3번 위치에 해당  HTML 코드가 노출이 되고 해당 HTML 코드를

수정하게 되면 바로 화면에서 수정된 내용을 확인 할 수 있다

3 세부수정

좀더 디자인적인 요소 CSS STYLE 의 수정이나 확인을 원할시엔 1번 위치에서 해당되는 CSS 코드에 마우스를 가져가면 오른쪽 부분에 2에서 처럼

영향을 주고 있는 CSS STYLE 내용이 출력이 되고 이곳에서 역시 수정을 하게되면 직관적으로 왼쪽페이지 웹페이지의 수정된 내용이 변경되어

화면에 노출이 된다.    

이와 같은 방법을 이용하게 되면 간단한 페이지 수정및 복잡한 페이지 수정을 HTML 코드 및 CSS 코드를 직접 수정해보고 변경된 화면의 만족

도에 따라 실제 웹페이지를 수정하게 되면 좀더 편안하고 쉽게 웹 개발을 할 수 있게 된다.

이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^