생활코딩

Coding Everybody

코스 전체목록

닫기

크롬 개발자도구

| 공개

크롬 개발자 도구란?

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

크롬의 설치

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

www.google.com/chrome

HTML 개발 관련

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

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

참고

Code School

댓글

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