생활코딩

Coding Everybody

코스 전체목록

닫기

크롬 개발자도구

| 공개

크롬 개발자 도구란?

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

크롬의 설치

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

www.google.com/chrome

HTML 개발 관련

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

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

참고

Code School

댓글

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

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