Chrome DevTools를 사용하면 코드 수정의 영향을 즉시 확인할 수 있습니다.
Chrome DevTools는 Google 크롬에 내장 된 웹 사이트 생성 및 디버깅 도구 세트입니다. 물론 우리는 그것들을 사용할 수도 있습니다 오픈 소스 버전에서; 크롬.
Ctrl + Shift + I 키 조합을 누르고 요소 위로 마우스를 가져간 다음 Inspect를 마우스 오른쪽 버튼으로 클릭하여 개발자 용 Chrome 도구에 액세스 할 수 있습니다.
구성 요소들
Chrome DevTools를 열면 u가 나타납니다.n 우리가 탐색하고있는 페이지의 오른쪽 패널. 그 부분을 위해,이 패널 e각 도구에 해당하는 탭으로 나뉩니다.. 차례로 도구는 섹션으로 나뉩니다.
섹션은 다음과 같습니다.
- 요소 : 페이지의 다양한 구성 요소를 표시합니다.
- 콘솔 : Linux 터미널 에서처럼 개발 중에 진단을 실행하거나 Javascript 코드와 상호 작용할 수 있습니다.
- 소스 : 자바 스크립트 코드를 쉽게 디버깅하고 로컬 파일로 작업 할 수 있습니다.
- 네트워크 : 페이지 성능을 모니터링하고 개선하는 데 도움이됩니다.
- 타임 라인 : 사이트를 방문하는 동안 발생하는 다양한 이벤트를 기록하고 탐색 할 수 있습니다.
- 응용 프로그램 :로드 된 모든 리소스를 조사합니다. 특히 IndexedDB 또는 Web SQL 데이터베이스, 로컬 및 세션 저장소, 쿠키, 앱 캐시, 이미지, 글꼴 및 스타일 시트가 있습니다.
- 보안 : 코드에서 보안 문제를 감지합니다.
Chrome DevTools를 어떤 용도로 사용할 수 있는지 살펴 보겠습니다.
작동하지 않는 문제 수정
모든 개발자에게 일어났습니다. 코드를 작성하고 오류가 없는지 확인하십시오.하지만 사실 페이지가 제대로 작동하지 않습니다. 콘솔 도구 실행 시간에 발생하는 오류를 보여줍니다.
로딩 시간 단축
페이지를로드하는 데 시간이 오래 걸리면 사용자는 지쳐서 다른 사이트로 이동합니다. 다행히 Flash 웹 사이트와 애니메이션 인트로의 시대는 끝났습니다. 어쨌든 Chrome DevTools의 네트워크 탭 로드를 지연시키는 요소를 쉽게 찾을 수 있습니다. 다른 연결 속도에 대해 테스트를 반복 할 수 있습니다.
코드 수정
요소 탭에서 페이지의 요소, 관련 html 코드 및 css 속성을 참조하십시오. 우리는 그것들을 변경할 수도 있습니다.
다음 명령을 사용하여 페이지의 텍스트를 편집 할 수 있습니다.
document.designMode = 'on';
다른 화면 크기 시도
태블릿, 스마트 폰, 스마트 TV, 데스크톱 컴퓨터. 인터넷 서핑에 사용되는 장치 목록이 증가하고 있습니다. Chrome DevTools를 사용하면 페이지가 다양한 크기에서 잘 보이는지 테스트합니다.
Benchmarking
경영에서 벤치마킹이라는 용어는 우리와 같은 일을하는 사람들의 모범 사례로부터 배우는 것을 의미합니다. Chrome DevTolls를 사용하면 웹 사이트 디자인이 마음에 들면 HTML 코드와 CSS 스타일 시트를보고 저희 사이트에 복사하십시오.
Chrome DevTools 받기
Chrome DevTools는 Google Chrome 및 Chromium 브라우저에서 사용할 수 있습니다. Chromium은 주요 배포판의 저장소에 있습니다. 또한 매장에서 설치할 수 있습니다. 스냅. Google 크롬의 경우 여기로 오세요. DEB 및 RPM 형식