브라우저 DevTools 비밀 : 시작, 네트워크 및 성능

지난 10 년 동안 브라우저 개발자 도구 (DevTools)는 기본 JavaScript 콘솔에서 완전히 통합 된 개발 및 디버깅 환경으로 발전했습니다. 이제 웹 응용 프로그램의 모든 측면을 수정하고 검사 할 수 있지만 고급 기능을 탐구하는 사람은 거의 없습니다. 이 기사는 귀하가 아직 고려하지 않은 다양한 기능을 탐색합니다. 대부분의 경우 Chrome의 DevTools를 다루지 만 해당되는 경우 Firefox의 대안도 표시됩니다.

키 포인트

브라우저 개발자 도구 (DevTools)는 사용자가 웹 애플리케이션의 모든 측면을 수정하고 검사 할 수있는 완전히 통합 된 개발 및 디버깅 환경으로 발전했습니다. 키보드 단축키, 도킹 옵션, 설정 및 자동 시작 기능은 개발자의 효율성을 향상시킬 수 있습니다. DevTools는 색상 대비 접근성 점검, 스크린 캡처, 사용하지 않는 CSS 및 JavaScript 찾기, 네트워크 캐싱 비활성화, 네트워크 속도 제한, 네트워크 응답, 블록 네트워크 요청, AJAX 요청 재현, 오프라인 파일 오버레이 활성화 등 여러 유용한 웹 개발 기능을 제공합니다. 스토리지 등을 점검하십시오. Chrome의 DevTools는 CPU 사용량, JavaScript 힙 크기, DOM 노드, 이벤트 리스너, 스타일 재 계산 등의 실시간 분석을위한 성능 모니터 및 감사 패널을 제공합니다. 감사 패널은 모바일 및 데스크탑보기에서 성능, 접근성, 모범 사례 및 SEO를 분석합니다.

• 키보드 바로 가기
• 메뉴를 사용하여 DevTools를 시작하면 귀중한 시간이 낭비됩니다! 다음 옵션 중 하나를 시도해보십시오.
• f12 ctrl shift i

cmd 옵션 J

또는 페이지의 요소를 마우스 오른쪽 버튼으로 클릭하고 확인 또는 확인 요소를 선택하십시오. Chrome은 유용한 키보드 바로 가기 도움말을 제공합니다. DevTools에서는 F1을 누르거나 오른쪽 상단 코너의 3 개의 도트 메뉴에서 설정을 선택하십시오. 그런 다음 메뉴에서 "바로 가기 키"를 선택하십시오

DOLOCATION

• DevTools 패널은 브라우저 창의 왼쪽, 오른쪽 또는 하단에 도킹 될 수 있습니다. 더 많은 공간이 필요한 경우 별도의 창으로 해제 할 수 있습니다. 도킹 옵션은 Chrome의 메인 Three Dot 메뉴에서 사용할 수 있습니다 :
Firefox의 도어 옵션 :
설정
DevTool 설정은 동일한 메뉴를 통해 또는 F1을 눌러 액세스 할 수 있습니다. 이를 통해 도구, 테마, 탭 크기, 색상 단위 등의 디스플레이 옵션을 설정할 수 있습니다.

자동으로 DevTools를 시작합니다

웹 응용 프로그램에서 작업 할 때 브라우저를 시작하고 URL을 열고 DevTools를 한 단계로 시작하는 전용 데스크탑 단축키를 만드는 것이 더 실용적 일 수 있습니다. Chrome의 경우 다음 Chrome 명령 줄 옵션을 사용하여 데스크탑 아이콘을 만듭니다.

여기서

https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5 chrome --auto-open-devtools-for-tabs https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5

(실행 파일 이름은 시스템마다 다를 수 있습니다.) 보이지 않는 모드는 개발 중에

가 사용됩니다 > Invisible/Private Mode는 브라우저를 닫은 후 쿠키 및 로컬 스터리지와 같은 데이터를 유지하지 않습니다. 이 모드는 PWAS (Progressive Web Applications) 및 로그인 시스템을 테스트하는 데 이상적입니다. 브라우저를 수동으로 시작하고 시크릿 모드를 입력하거나 Chrome의 명령 줄에 incnognito를 추가하거나 Firefox의 명령 줄에 프라이버시를 추가하여 수행 할 수 있습니다.

<code>firefox -devtools -url https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

명령 패널

Chrome DevTools는 편집기와 같은 명령 패널을 제공합니다. ctrl shift p : 를 누릅니다

대부분의 기능 및 소스 파일에 빠르게 액세스 할 수 있습니다 (Backspace를 눌러 삭제>). 콘솔로 이동

콘솔은 어떤 DevTool 패널을 사용하든 매우 유용합니다. ESC를 눌러 하단 패널에 콘솔 창을 표시하고 숨 깁니다.

페이지 색상을 찾으십시오 CSS 색상 속성을 클릭하면 대부분의 브라우저에는 색상 선택기가 표시됩니다. Chrome은 또한 패널 하단의 페이지에 사용 된 색상을 표시합니다.

이 패널을 클릭하여 더 많은 색상을 표시 할 수 있습니다.

색상 대비 보조 기능

색상 선택기는 또한 전경 텍스트와 배경색의 시각적 차이를 나타내는 대비 비율을 표시합니다. 비율을 클릭하여 AA 및 AAA 접근성 표준으로 평가되는 방법을 확인하여 대부분의 사람들이 텍스트를 읽을 수 있도록하는 방법을 확인하십시오.

이 라인 아래에있는 컬러 바의 모든 색상은 AA 대비로 권장됩니다. 캡처 스크린 샷

Chrome의 명령 패널 (Ctrl Shift P)에서 "스크린 샷"을 입력하고 현재 뷰포트, 전체 페이지 또는 현재 활성 요소를 캡처하는 옵션을 선택하십시오. 파일은 다운로드 폴더에 저장됩니다. (Chrome 74는 또한 영역 캡처를 허용합니다.) Firefox는 대부분의 메뉴에서 액세스 할 수있는 스크린 샷 시스템을 제공합니다. 또한 DOM보기에서 모든 요소를 ​​마우스 오른쪽 버튼으로 클릭하고 스크린 샷 노드를 선택할 수 있습니다.

사용하지 않은 CSS 및 JavaScript 를 찾으십시오Chrome의 새로운 커버리지 패널을 사용하면 사용하지 않은 코드를 신속하게 찾을 수 있습니다. DevTools More 도구 하위 메뉴에서 "커버리지"를 선택한 다음 레코드 버튼을 클릭하고 응용 프로그램을 찾아보십시오. 그런 다음 모든 파일을 클릭하여 소스 코드를여십시오.

사용하지 않은 코드는 줄 번호 슬롯으로 빨간색으로 강조 표시됩니다. Chrome은 새 페이지로 이동할 때 중고/미사용 코드를 기억하지 못하는 것 같지만 향후 릴리스에서 사용할 수있을 것으로 예상됩니다.

네트워크 캐시 비활성화

네트워크 패널에서 캐시 비활성화를 선택하여 네트워크에서 모든 파일을로드하십시오. 이것은 첫 번째 페이지로드에 대한 더 나은 평가를 제공합니다.

제한 네트워크 속도

마찬가지로, 대부분의 사용자가 3G 이상으로 액세스 할 때 1GBPS 연결 시스템을 테스트하는 것은 의미가 없습니다. 네트워크 패널은 Chrome의 온라인 드롭 다운 메뉴와 Firefox의 제한 드롭 다운 메뉴를 제공하여 특정 네트워크 속도를 시뮬레이션 할 수 있습니다.

Chrome은 또한 자체 제한 프로파일을 추가하는 기능도 제공합니다.

네트워크 응답 재정렬

기본적으로 네트워크 패널에는 다운로드 순서대로 요청 및 응답에 대한 테이블이 표시됩니다. 그러나 모든 테이블 제목을 클릭하여 이름, 상태, 유형, 크기, 응답 시간 등으로 재주문 할 수 있습니다. 필터 불완전한 요청

불완전하거나 반응이없는 HTTP 요청을 찾으려면 네트워크 패널을 방문하여 IS를 입력하십시오 : 필터 박스에서 실행하십시오.

응답 크기에 따른 필터 필터

네트워크 패널에서는 필터 상자에 S가 더 크게 입력하십시오. 선택한 크기보다 큰 응답이 표시됩니다. 더 작은 응답을 찾으려면 -larger -than을 사용하십시오. 필터 타사 내용

네트워크 패널에서 -도메인을 입력하십시오 :*. 필터 박스의 도메인은 sitepoint.com과 같은 기본 URL입니다. 나머지 응답은 CDN, 트래커, 소셜 미디어 버튼 등에 대한 타사 요청을 보여줍니다. 요청 수와 페이로드 크기는 테이블 아래 상태 표시 줄에 표시됩니다.

블록 네트워크 요청

테스트 중에 트래커, 분석, 소셜 미디어 위젯 또는 기타 요청을 차단할 수 있습니다. Chrome의 네트워크 패널에서 HTTP 요청을 마우스 오른쪽 버튼으로 클릭하고 URL을 차단하려는 블록 요청 URL을 선택하거나 요청 도메인 블록을 선택하여 도메인에 대한 요청을 차단하십시오. 요청 차단 패널은 추가 URL 또는 도메인을 추가하거나 삭제할 수있는 위치가 열립니다.

ajax 요청

재현 네트워크 테이블의 항목을 마우스 오른쪽 버튼으로 클릭하고 Curl, Fetch 또는 PowerShell과 같은 사본 옵션을 선택하면 Ajax XMLHTTPREQUEST 작업을 확인할 수 있습니다. 이는 편집기 또는 터미널에 붙여 넣을 수있는 동일한 헤더, 사용자 에이전트, 쿠키 및 참조 자 소스로 명령을 만듭니다. 오프라인 파일을 사용하여 를 사용합니다 Chrome을 사용하면 브라우저가 네트워크가 아닌 장치에서 파일을 가져올 수 있도록 모든 파일을 시스템에 저장할 수 있습니다. 예를 들어, CDN에서 일반적으로 액세스하는 자산을로드하거나 편집하려면 오프라인 개발이 가능합니다. 소스에서 오버레이 패널을 열고 오버레이 폴더를 선택하고 적합한 폴더를 선택하십시오.

이제 네트워크 패널의 리소스를 마우스 오른쪽 버튼으로 클릭하고 덮어 쓰기를 위해 저장을 선택하십시오. 후속 페이지 Reload는 웹 대신 로컬 시스템에서 파일에 액세스합니다. 저장된 파일도 수정할 수도 있습니다.

스토리지를 점검하십시오 Chrome의 애플리케이션 패널과 Firefox의 스토리지 패널을 사용하면 쿠키, 캐시 저장소, 로컬 스토리지, SessionStorage, IndexedDB 및 웹 SQL에 저장된 값을 확인, 수정 및 삭제할 수 있습니다 (지원되는 경우). Chrome의 Clear Storage 패널은 또한 도메인의 모든 값을 지우므로 진행성 웹 애플리케이션을 개발할 때 유용합니다.

성능 모니터

Chrome의 새로운 성능 모니터는 DevTools More 도구 메뉴에서 액세스 할 수 있으며 CPU 사용량, JavaScript 힙 크기, DOM 노드, 이벤트 리스너, 스타일 재 계산 등을 분석합니다. 기본 성능 패널과 달리 차트는 실시간으로 업데이트되므로 구성 파일을 먼저 기록 할 필요가 없습니다.

감사

Chrome의 감사 패널은 원래 프로그레시브 웹 애플리케이션의 기능을 평가하도록 설계되었지만이 도구는 모바일 및 데스크탑보기에서 성능, 접근성, 모범 사례 및 SEO를 분석하기위한 일반적인 도구로 발전했습니다.

모든 문제를 찾지 못하고 몇 가지 요점에 동의하지 않을 수도 있지만 잠재적 인 문제를 신속하게 평가하는 유용한 방법입니다. 바라건대 당신은 새로운 것을 발견했기를 바랍니다. 더 많은 DevTool Secrets가 곧 올 것입니다 ...

(원본 텍스트의 FAQ 부분은 여기에 포함되어야합니다. 기사의 길이로 인해 여기에서 생략됩니다. FAQ 부분은 필요에 따라 재생 될 수 있습니다)

.

위 내용은 브라우저 DevTools 비밀 : 시작, 네트워크 및 성능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!