생활코딩

Coding Everybody

코스 전체목록

닫기

크롬 개발자도구

| 공개

크롬 개발자 도구란?

구글에서 만든 웹브라우저인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공됩니다. 이를 개발자 도구라고 합니다. 개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화 할 수 있습니다. 

크롬의 설치

아래 링크를 통해서 다운로드 받을 수 있습니다. 

www.google.com/chrome

HTML 개발 관련

HTML 개발과 관련해서는 아래의 토픽들이 특히 도움이 될 것입니다. 

  • Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구
  • Resources :  현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구
  • Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다. 
  • Audits : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구

참고

Code School

댓글

댓글 본문
작성자
비밀번호
  1. 양심이 존재하지않습니다
    그럼 니가 만드세요..
    대화보기
    • 지구촌
      엘리먼트에서 수정하고 저장하는법.
      css 수정하고 선택자 찾아서 올바로 css 파일에 등록하는법
      또는 원래 파일을 찾아가는법.
      그래야 제대로 수정이 될텐데 말이죠. 어디서 어디까지가 아이디나 클래스 선택자인지
      알수가 없네요.
    • 지구촌
      진짜 알맹이는 빠지고 ...
      제일 중요한것이 없어요.
    • 크롬 개발자도구에서 바로 소스를 수정할 순 없나요??
    • Seo Yun Seok Tudoistube
      크롬 개발자 도구 디버깅에 대해서 많이 배우고 싶습니다. 좋은 강좌 만들어 주셔서 감사합니다^_____^!!!
    • Rhys Jung
      기대됩니다.
    • 알보칠
      안됩니다.
      직접 열어서 수정해야합니다.
      대화보기
      • egoing
        아래 링크 참고해주세요.
        http://www.screencast.com......bNc
        대화보기
        • 이연수
          크롬개발자도구에서 HTML,css 실시간 수정할 때 라인을 선택 후 에디팅 메뉴 클릭해서 수정을 할수밖에 없나요?
          그냥 수정하려니 키 입력자체가 안먹네요
          그리고 HTML 태그별로 닫힘되어 있어서 하나하나 클릭해서 펼쳐야 하는데, 그냥 전체 소스 모두 열려진 상태로
          수정할수는 없을까요.
        graphittie 자세히 보기