생활코딩

Coding Everybody

코스 전체목록

닫기

크롬 개발자도구

| 공개

크롬 개발자 도구란?

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

크롬의 설치

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

www.google.com/chrome

HTML 개발 관련

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

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

참고

Code School

댓글

댓글 본문
  1. 파시
    230918
  2. coconut#
    시작!
  3. kelly
    2022.05.23 시작~!
  4. 드림보이
    2020.09.08. 시작
  5. 이마누
    완료
  6. labis98
    20210814 시작합니다~~~~^^
  7. 이기성
    안녕하세요.
    틈틈히 CSS를 배우고 있는데 크롬개발자 도구로 경로 파일을 찾았는데 minified 파일이었습니다. 그러나 css 변경을 하려고 차일드 테마에서 style-main.mini.css파일을 가져와 수정하니 적용이 안되어 고민하다 문제가 무언지 부탁드리게 되었습니다.
    고견 좀 부탁드립니다.
  8. wecae
    이고잉님 감사합니다.
    저는 닉네임이 C고잉입니다~
  9. 낙산
    정말 대단하신 분이네요~
    존경스럽읍니다!!
  10. edward
    thank you!!
  11. 파이
    좋네요
  12. JAMES
    My first class^^
  13. Howard L Miner
    hgfhfg
  14. B급 감성 개발자
    바로 소스수정 가능합니다. 확실하게는 기억이 안나는데 2년쯤? 전에 업데이트 해서 가능합니다.

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