[윈도우10 Windows10]크롬(Chrome)에서 개발자 도구 실행하기

[윈도우10 Windows10]크롬(Chrome)에서 개발자 도구 실행하기

[윈도우10 Windows10]크롬(Chrome)에서 개발자 도구 실행하기

이전에 포스팅에서는 크롬(Chrome)에서 웹사이트 HTML을 확인하는 방법에 대해서 살펴봤습니다. 하지만, 이와 달리 웹개발자들이 실제로 각 항목들이 어떻게 HTML에 맵핑되었는지 검토하기에는 부족함이 있었습니다. 그래서 이번 포스팅에서는 이러한 부족한 부분들을 해소할 수 있는 개발자 도구를 실행하는 방법에 대해서 이야기를 해보고자 합니다. 

 

이번 포스팅은 기본적으로 크롬(Chrome)을 바탕으로 진행합니다. 만약 크롬(Chrome)이 설치되지 않으신 분들은 다음 링크를 참조하여 크롬(Chrome)브라우저를 설치하시길 바랍니다. 

[윈도우10 Windows10] 브라우저 크롬(Chrome) (온라인)설치하기&다운로드 받기(오프라인 다운로드 설치)

[윈도우10 Windows10] 브라우저 크롬(Chrome) (온라인)설치하기&다운로드 받기(오프라인 다운로드 설치

먼저 크롬(Chrome)브라우저를 실행하여 주시길 바랍니다. 그럼 다음과 같은 화면이 나타날 것입이다.여기에서, 상단 우측에 있는 더보기 아이콘을 클릭하여 주시길 바랍니다. 

크롬(Chrome) 실행화면 

위에서 더보기 아이콘을 클릭할 경우 다음과 같은 메뉴가 나타나는 것을 알 수 있습니다. 여기에서, [도구 더보기]부분을 클릭하여 주시길 바랍니다. 

크롬(Chrome) 더보기 클릭화면 

그러면 다음과 같은 추가 화면이 나타납니다. 여기에서 [개발자 도구]부분을 클릭하여 주시길 바랍니다. 

크롬(Chrome) - 개발자 도구 실행화면 

그럼 다음과 같은 화면에서 다음과 같은 화면이 나타나는 것을 알 수 있습니다. 물론 이외에도 [Ctrl + Shift + I]키 또는 [F12]키를 누르셔서 개발자모드를 실행할 수 있습니다. 

크롬(Chrome) - 개발자 도구 실행화면 

이와 같은 화면에서 우측에 있는 HTML에 부분을 마우스를 옮겨서 태그 부분을 클릭하신다면 다음과 같이 해당하는 웹페이지 화면이 나타납니다. 

크롬(Chrome) 개발자도구에서 HTML 선택화면 

이와 같은 방법으로 개발자 도구를 실행하고 활용할 수 있습니다. 

[윈도우10 Windows10]크롬(Chrome) 웹사이트 HTML 코드 확인하기

[윈도우10 Windows10]크롬(Chrome) 웹사이트 HTML 코드 확인하기

이번 포스팅에서는 [윈도우10 Windows10]크롬(Chrome)에서 개발자 도구 실행하기라는 주제로 개발자 도구를 실행하는 방법에 대해서 포스팅을 해봤습니다. 혹 궁금하신 점이나 문의 사항이 있으시면 언제든지 댓글 및 방명록에 글 남겨주시길 바랍니다. 감사합니다.