Home-theater-designers
Chrome DevTools는 개발자에게 필수적인 자산입니다. 다른 브라우저는 매우 편리한 문제 해결 도구를 제공하지만 Chrome DevTools는 다기능 인터페이스와 인기로 인해 주목할만한 가치가 있습니다.
Chrome은 강력한 디버깅 도구 모음으로 인해 개발자에게 가장 인기 있는 브라우저입니다. Chrome DevTools를 사용하는 것은 쉽지만 최대한 활용하려면 어떻게 작동하는지 이해해야 합니다.
Chrome 개발자 도구의 작동 방식
Chrome DevTools를 사용하면 오류 콘솔과 기타 디버깅 및 모니터링 도구를 통해 웹사이트의 문제를 해결할 수 있습니다. DevTools를 사용하면 프론트엔드 허점이 노출되고 웹사이트가 모바일 및 태블릿 장치에서 어떻게 표시되는지 모니터링할 수 있습니다.
DevTools를 사용하면 JavaScript, HTML 및 CSS와 같은 웹 사이트 코드에서 실시간 편집을 수행하고 변경 사항에 대한 즉각적인 결과를 얻을 수 있습니다.
DevTools를 통해 변경한 사항은 웹사이트에 영구적으로 영향을 미치지 않습니다. 실제 소스 코드에 적용한 것처럼 예상 결과만 일시적으로 표시됩니다. 이를 통해 웹 사이트를 훨씬 빠르게 로드하고 버그를 쉽게 해결할 수 있는 방법을 찾을 수 있습니다.
Chrome DevTools에 액세스하는 방법
여러 가지 방법으로 Chrome DevTools에 액세스할 수 있습니다. Mac OS에서 바로 가기 방법으로 개발자 도구를 열려면 명령 + 선택 + 나 . Windows OS를 사용하는 경우 Ctrl + Shift + 나 키보드의 키.
또는 화면 오른쪽 상단 모서리에 있는 세 개의 점을 클릭하여 Chrome 개발자 도구에 액세스할 수 있습니다. 향하다 더 많은 도구 그리고 선택 개발자 도구 . 다른 옵션은 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사 옵션.
웹사이트 진단을 위한 Chrome 개발자 도구 사용
Chrome DevTools는 웹페이지를 조정하고 문제를 해결할 수 있는 여러 가지 방법을 제공합니다. DevTools가 도움이 될 수 있는 몇 가지 방법을 살펴보겠습니다.
스마트폰에서 웹사이트가 어떻게 보이는지 확인
Chrome 브라우저를 개발자 모드로 전환하면 웹페이지의 절반 크기 버전이 렌더링됩니다. 그러나 이것은 스마트폰이나 태블릿에서 어떻게 보이는지 실제 보기를 제공하지 않습니다.
고맙게도 웹 페이지의 화면 크기를 설정하는 것 외에도 Chrome DevTools를 사용하면 다양한 모바일 화면 유형과 버전 간에 전환할 수도 있습니다.
해당 옵션에 액세스하려면 검사 방법. 다음을 클릭하십시오. 반응형 DevTools의 왼쪽 상단 모서리에 있는 드롭다운을 클릭하고 원하는 모바일 장치를 선택합니다. 그런 다음 웹 페이지는 선택한 모바일 장치의 크기에 맞게 렌더링 및 조정됩니다.
당신의 CPU는 얼마나 뜨거울 수 있습니까?
웹 페이지의 소스 파일에 액세스
Chrome DevTools를 통해 웹페이지를 구성하는 파일에 액세스할 수 있습니다. 이 파일에 액세스하려면 출처 DevTools 메뉴의 상단에 있는 옵션입니다. 이렇게 하면 웹사이트의 파일 시스템이 노출되고 편집도 가능합니다.
소스 파일을 검색할 수도 있습니다. 이는 리소스가 많은 웹 페이지를 다룰 때 유용할 수 있습니다. DevTools를 통해 소스 파일을 검색하려면 찾다 콘솔 바로 위의 옵션입니다.
그러나 찾을 수 없는 경우 찾다 옵션에서 더 나은 대안은 바로 가기 키를 사용하는 것입니다. Mac OS에서는 명령 + 선택 + F 소스 파일을 검색하는 키. Windows OS를 사용하는 경우 Ctrl + Shift + F 소스 파일 검색 표시줄에 액세스하려면 키를 누릅니다.
웹 페이지에 대한 실시간 편집 수행
DevTools를 사용하는 주요 목적 중 하나는 다음을 수행하는 것입니다. 웹 페이지 요소의 즉각적인 가짜 편집 . 개발자 도구로 전환하면 집단 옵션. 그런 다음 코드 편집기 내에서 변경 사항을 적용하려는 지점을 마우스 오른쪽 버튼으로 클릭하고 HTML로 편집 .
인라인이 아닌 CSS 속성을 편집하려면 출처 . 그런 다음 편집할 CSS 파일을 선택합니다. 라이브 편집을 수행하려면 코드 콘솔 내에서 선택한 라인에 커서를 놓습니다. 이렇게 하면 웹 페이지에 적용한 스타일 변경 사항에 대한 즉각적인 피드백을 얻을 수 있습니다.
DevTools를 통해 페이지를 편집할 때 브라우저에서 페이지를 다시 로드하면 원래 형식으로 돌아가며 편집 내용은 나만 볼 수 있습니다. DevTools를 통한 편집은 원활한 실행이나 다른 사용자의 해당 웹사이트 사용에 영향을 미치지 않습니다.
DevTools 콘솔로 JavaScript 코드 디버그
JavaScript를 디버그하는 가장 좋은 방법 중 하나는 Chrome의 개발자 도구를 사용하는 것입니다. 잘못된 스크립트와 버그의 정확한 위치에 대한 직접 보고서를 제공합니다.
JavaScript로 웹 사이트를 디자인하는 동안 항상 DevTools를 열어 두는 것이 좋습니다. 예를 들어, console.log() 일련의 지침에 대한 JavaScript 명령은 프로그램이 성공적으로 실행되는 경우 DevTools 콘솔에 해당 로그의 결과를 표시합니다.
기본적으로 콘솔은 웹사이트의 모든 JavaScript 문제를 보고합니다. DevTools 하단에서 콘솔을 찾거나 다음을 클릭하여 액세스할 수 있습니다. 콘솔 Chrome DevTools 창 상단의 옵션.
데이터베이스에서 리소스 로드 모니터링
JavaScript 디버깅 외에도 콘솔은 웹 사이트 데이터베이스에서 올바르게 로드되지 않는 리소스에 대한 세부 정보를 제공할 수도 있습니다.
이것이 백엔드 문제를 디버깅하는 가장 좋은 방법은 아니지만 여전히 어떤 리소스가 반환되는지 알려줍니다. 404 해당 요소의 데이터베이스 쿼리를 실행한 후 오류가 발생했습니다.
관련: 일반적인 웹사이트 오류 및 그 의미
Chrome 개발자 도구의 방향 전환
Chrome 개발자 도구의 위치를 변경하려면 DevTools 내에서 세 개의 메뉴 점(브라우저의 기본 점 아님)을 클릭하십시오. 그런 다음에서 원하는 위치를 선택하십시오. 독 쪽 옵션.
Chrome DevTools 확장 프로그램 설치
Chrome DevTools와 함께 작동하는 언어 또는 프레임워크별 확장 프로그램을 설치할 수도 있습니다. 이러한 확장을 설치하면 웹 페이지를 보다 효율적으로 디버그할 수 있습니다.
Chrome 개발자 도구에서 사용 가능한 확장 프로그램 목록에 액세스할 수 있습니다. 주요 DevTools 확장 갤러리.
웹사이트의 보안 문제 확인
Chrome DevTools를 사용하면 가용성과 같은 매개변수를 기반으로 웹사이트가 얼마나 안전한지 평가할 수 있습니다. 웹 보안 인증서 연결이 얼마나 안전한지 등입니다. 웹사이트가 안전한지 확인하려면 보안 DevTools 상단의 옵션.
NS 보안 탭은 웹사이트의 보안 세부 사항에 대한 개요를 제공하고 잠재적인 위협을 알려줍니다.
웹사이트 감사
Chrome DevTools에는 특정 매개변수를 기반으로 웹사이트의 전체 성능을 확인할 수 있는 기능이 있습니다.
해당 기능에 액세스하려면 등대 DevTools 창 상단의 옵션. 그런 다음 확인하려는 매개변수를 선택한 다음 이동하는 또는 데스크탑 다양한 플랫폼에서 웹페이지의 성능을 확인하는 옵션.
다음을 클릭하십시오. 보고서 생성 이전에 선택한 매개변수를 기반으로 웹페이지 분석을 실행합니다.
또한 성능 옵션. 테스트를 실행하려면 옆에 있는 아이콘을 클릭하십시오. 녹음 버튼 클릭 런타임 분석을 수행하는 옵션입니다. 또는 그 아래에 있는 다시 로드 버튼을 클릭하여 로드 시간 성능을 평가하십시오. 클릭 중지 분석기를 중지하고 결과를 표시합니다.
Chrome DevTools 활용
필요한 것에 따라 Chrome DevTools를 사용하면 단순한 웹 사이트 디버깅 이상의 작업을 수행할 수 있습니다. 고맙게도 DevTools는 모든 기술 수준의 프로그래머가 사용하기 쉽습니다. 방문하는 웹사이트의 소스 코드를 검색하여 웹사이트 프론트엔드 개발의 몇 가지 기본 사항을 배울 수도 있습니다.
kmmode 예외가 Windows 10에서 처리되지 않음
이 기사에서 다루지 않은 다른 옵션을 발견할 수도 있습니다. 따라서 사용 가능한 기능을 자유롭게 사용하십시오. 게다가, 이러한 기능을 조정해도 웹사이트에 약간의 피해가 가지 않습니다.
공유하다 공유하다 트위터 이메일 Raspberry Pi에서 Chrome OS를 사용하는 방법크롬북을 살 여유가 없으신가요? Raspbian에 대한 대안을 찾고 계십니까? Raspberry Pi에 Chrome OS 버전을 설치하는 방법은 다음과 같습니다.
다음 읽기 관련 항목- 인터넷
- 프로그램 작성
- HTML
- 웹 개발
- 자바스크립트
- 구글 크롬
Idowu는 스마트 기술과 생산성에 대한 열정을 가지고 있습니다. 여가 시간에는 코딩을 하거나 지루할 때 체스판으로 전환하지만 가끔씩 일상에서 벗어나는 것도 좋아합니다. 사람들에게 현대 기술에 대한 방법을 보여주고자 하는 그의 열정은 그가 더 많은 글을 쓰도록 동기를 부여합니다.
Idowu Omisola가 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.