Firefox 개발자 도구를 사용하여 웹 응용 프로그램을 디버깅 하는 데 도움이 되는 일련의 생산성 팁과 요령을 정리했습니다.

이것이 왜 왔는지 궁금하다면 그 이유는 충분히 간단합니다.

• Firefox DevTools는 개발 된 이후 매일 사용하고 있습니다. 처음에는 많은 사용자를 위한 QA 소유자로서, 그 이후에는 매일 오픈 웹에서 JavaScript 개발자로 일하고 있습니다.
• Chrome DevTools는 인터넷에서 더 많은 사랑을 얻지만 Firefox DevTools에는 유용한 기능이 많은 놀라운 엔지니어링 팀이 있습니다. 일부는 Chrome과 동등하고 일부는 더 좋고 일부는 아직 Chrome에도 없습니다. 물론 일부는 Chrome에서 더 낫습니다 (디버거를 봅니다). 둘 사이에 차이가 있을 때 표시되는 트릭의 차이점을 지적하겠습니다.

페이지 검사기 

CSS 선택기 검색 

페이지 검사기 검색 상자에서 CSS 선택기를 사용할 수 있습니다. 정말 편리합니다.

• 마우스 오른쪽 버튼으로 클릭 할 수 없는 'z- 색인' 요소
• 선택기를 알고 있는 일반 텍스트 요소를 찾고
• 시각적으로 동일하지만 특정 클래스 / 선택기가 있는 요소 찾기

규칙보기의 필터 스타일 

선택기 또는 속성별로 Inspector의 스타일 보기에서 CSS 규칙을 필터링 할 수 있습니다. 

선택기의 경우 규칙 목록에서 선택기를 강조 표시합니다. 속성의 경우 내부에 필터가 포함 된 모든 속성이 확장되고 (예 : 테두리 속기에는 테두리 색이 있음) 필터가 포함 된 속성이 강조 표시되고 그렇지 않은 규칙은 숨겨집니다. 프레임 워크에서 경쟁하는 선택기를 사용할 때 매우 유용하며 관련된 것만 집중합니다. 또는 테두리 또는 배경과 같은 속성을 구성한 경우 필터링 된 속성이 포함 된 작성 속성으로 확장되기 때문입니다.

규칙보기의 색상 선택기 및 스포이드 도구 

색상 속성 옆에 있는 색상 점을 클릭하면 편리한 스포이드 도구로 색상 선택기를 엽니다. 페이지를 가리킬 때 스포이드가 확대되어 특정 픽셀에서 색상을 쉽게 선택할 수 있습니다. 

시각적인 사람이고 적절한 색상으로 바이올린을 사용하거나 규칙을 바꾸지 않고 페이지의 다른 부분에서 색상을 사용하려는 경우 매우 유용합니다.

규칙보기의 색상 표현 

규칙보기의 색상 표현

Shift + 색상 속성 옆에 있는 색상 점을 클릭하면 3 또는 4 사이에서 변경됩니다 (모든 색상에 이름이 있는 것은 아니므로 해당 색상에 대해 3 개의 표현 만 나타남) 색상에 사용할 수 있는 색상 표현 : name, hex , hsl 및 rgb. 회전 각도 단위 옆의 점을 SHIFT + 클릭하면 각도, rad, grad 및 turn 사이의 표현이 이동합니다. 스타일 가이드가 HEX 색상을 요구할 때 매우 유용하지만 hsl 또는 rgba에 더 익숙합니다.

규칙보기의 타이밍 기능 베 지어 편집기 

규칙보기의 타이밍 기능 베 지어 편집기

타이밍 기능 (예 : 전환, 애니메이션)이 있는 속성 옆의 곡선 점을 클릭하면 사전 정의 된 전환 세트와 베 지어 곡선 편집기가 열립니다. 트랜지션을 테스트하는 데 매우 편리하며 타이밍을 보여주는 애니메이션 슬라이더가 있으며 특히 사용자 정의 함수를 원할 경우 큐빅 베 지어 곡선을 계산합니다.

웹 콘솔 

출력에서 CSS 스타일링 

console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”) 

웹 콘솔 출력의 CSS 스타일링

CSS를 사용하여 Firefox 개발자 도구 웹 콘솔 출력의 스타일을 지정할 수 있습니다. 모든 속성이 지원되는 것은 아니지만 몇 가지가 지원됩니다. %c 지시문은 그 뒤에 오는 것이 스타일 지정되고 % s는 문자열 대체임을 나타냅니다. 정말 편리합니다.

• 로그의 중요한 부분을 강조합니다.
• console.info, console.warn 및 console.log가 충분하지 않은 경우 여러 색상 코딩 레벨의 로깅.

웹 콘솔 기록 검색 

웹 콘솔 기록 검색

Mac에서 Ctrl + R을 눌러 웹 콘솔 기록을 검색 할 수 있습니다 (Windows 및 Linux의 경우 F9). 그런 다음 CTRL + R / CTRL + S (F9 / SHIFT + F9)를 사용하여 검색 결과를 앞뒤로 이동할 수 있습니다. 특히 화살표 키는 현재 세션에서만 작동하므로 화살표 키 대신 사용하는 것이 정말 편리합니다.

페이지 또는 페이지의 요소 스크린 샷 

:screenshot — fullpage
:screenshot — selector .css-selector 

페이지 요소의 스크린 샷

웹 콘솔, 표시 섹션, 전체 페이지 또는 CSS 선택기로 식별 된 페이지의 요소에서 스크린 샷을 작성할 수 있습니다. 페이지 스크린 샷에서 요소를 자르려고 할 때 상자 모델을 추측 할 필요 없이 요소 만 정확하게 스크린 샷 하려고 할 때 매우 유용합니다.

웹 콘솔 JavaScript 컨텍스트 전환 

cd(iframe) 

웹 콘솔 JavaScript 컨텍스트 전환

cd()를 사용하여 웹 콘솔의 JavaScript 평가 컨텍스트를 iframe으로 전환 할 수 있습니다. CSS 선택기를 사용하여 iframe을 타겟팅 할 수 있습니다. 특히 Codepen과 같은 자체 창에서 iframe을 열 수 없는 장소에서 상황에 따라 iframe을 변경하는 것이 매우 유용합니다.

콘솔 API의 레이블이 있는 타이머 

console.time(“#devtricks”)
console.timeEnd(“#devtricks”) 

콘솔 API의 레이블이 있는 타이머

console.time(“label”)을 사용하여 Console API에서 레이블이 지정된 타이머를 시작하고 console.timeEnd(label)을 사용하여 중지 할 수 있습니다. 함수 실행 시간을 웹 콘솔에 기록하고 추적하고 그에 따라 레이블을 지정할 때 정말 유용합니다.

자바 스크립트 디버거 

조건부 중단점 설정 

조건부 중단점 설정

행 번호를 마우스 오른쪽 단추로 클릭하여 Firefox 개발자 도구 JavaScript 디버거에서 조건부 중단 점을 설정할 수 있습니다. 중단 점이 활성화되고 조건이 충족되는 경우에만 실행을 일시 중지합니다. 간헐적 인 버그를 디버깅하고 특정 값과 범위에서 실행을 일시 중지하는 데 정말 편리합니다.

기능 명 또는 라인 번호로 검색 

기능명 또는 라인 번호로 검색

Mac에서는 CMD + P (Windows 및 Linux에서는 CTRL + P)를 눌러 JavaScript 디버거를 통해 파일 이름을 검색 할 수 있습니다. 해당 파일 내에서 함수를 검색하거나 줄 번호로 직접 이동하려면 다른 바로 가기가 있지만 항상 잊어 버립니다. 대신 동일한 검색 상자에 @를 입력하면 함수 정의를 찾습니다. :로 검색을 시작하면 특정 행으로 이동합니다.

예쁜 인쇄 축소 코드 

예쁜 인쇄 축소 코드

URL 중단점 설정 

URL 중단점 설정

Firefox 개발자 도구 JavaScript 디버거에서 URL 중단 점을 설정할 수 있습니다. 페이지가 설정 한 규칙과 일치하는 URL에 액세스하려고 하면 중단 점이 활성화되고 실행이 일시 중지됩니다. 네트워크 요청이 발생했을 때 응용 프로그램의 상태를 평가하고 네트워크 요청을 트리거 한 정확한 코드 줄을 정확하게 찾아내는 것이 정말 편리합니다.

중단점 비활성화 

중단점 비활성화

Firefox 개발자 도구 JavaScript 디버거에서 중단 점을 비활성화하고 다시 활성화 할 수 있습니다. 설정은 유지되지만 비활성 상태가 되어 코드 실행을 일시 중지하지 않습니다. if / else 절을 ​​디버깅 할 때 마지막으로 디버깅 지점을 어디에 두 었는지 기억할 필요가 없으므로 매우 유용합니다.

네트워크 모니터 

웹 사이트에서 성능 디버깅 및 최적화를 수행 할 때 네트워크 모니터 도구를 사용하므로 이 섹션의 대부분의 트릭은 그에 중점을 둡니다. 성능 디버깅시 가장 먼저 사용하는 도구입니다. JavaScript 실행 속도에 관계없이 20MB의 로드를 기다려야 하는 경우 여전히 성능이 떨어집니다.

HTTP 요청 편집 및 재전송 

HTTP 요청 편집 및 재전송

네트워크 모니터에서 HTTP 요청을 편집하고 재전송 할 수 있습니다. 때로는 웹 사이트에 대한 데이터를 가져 오는 서버 또는 GET 요청으로 가는 POST 요청을 디버깅 하는 데 사용합니다 .HTML, CSS 및 JavaScript 파일 또는 이미지를 가져 오는 HTTP 요청을 다시 보내는 데 거의 이 트릭을 사용하지 않습니다. 복잡한 흐름이 끝날 때 서버에 데이터를 보낼 때 특히 사용하기 편리하고 요청에 버그가 생겼습니다. 모든 작업을 수행하고 플로우를 다시 테스트하지 않고도 가능한 수정 사항을 신속하게 테스트 할 수 있습니다.

검색어 문자열이 포함되지 않은 요청 필터링 

검색어 문자열이 포함되지 않은 요청 필터링

Mac에서는 CMD + F (Windows 및 Linux에서는 CTRL + F)를 눌러 네트워크 모니터에서 도메인별로 HTTP 요청을 필터링 할 수 있습니다. 도메인 URL에 문자열이 포함되지 않은 모든 요청을 검색하려면 대시 (-)로 쿼리를 시작하고 쿼리 문자열과 일치하지 않는 도메인 만 필터링 하면 됩니다. 성능 감사 중에 모든 외부 요청을 찾는 것이 매우 유용하므로 나중에 해당 리소스를 동일한 도메인으로 옮길 수 있습니다.

속도 조절 

속도 조절

네트워크 요청 속도를 조절하고 웹 사이트가 다른 연결에서 어떻게 로드 되는지 확인할 수 있습니다. Firefox에는 모바일 장치에 유용한 많은 사전 설정이 있으며, 잘못된 3G 연결 속도를 추측 할 필요 없이 직관적 인 이름이 있습니다.

핫 / 콜드 프로파일링 

핫 / 콜드 프로파일링

웹 사이트에서 수행하는 HTTP 요청에 대해 시각적 성능 분석을 실행할 수 있습니다. 네트워크 모니터를 방금 연 경우 주 패널에 스톱워치 아이콘이 있으며 그렇지 않은 경우 네트워크 모니터의 왼쪽 하단에서 찾을 수 있습니다. 아이콘을 클릭하면 네트워크 모니터가 웹 사이트를 두 번로드 합니다. 한 번은 빈 브라우저 캐시 또는 "콜드"로 한 번, 프라이밍 된 브라우저 캐시 또는 "핫"으로 한 번입니다. 사용자가 사이트를 처음 로드 할 때와 다음 방문을 시뮬레이트 하는 것이 정말 유용합니다.

HAR 저장 / 가져 오기 

네트워크 모니터에 네트워크 요청의 스냅 샷을 저장할 수 있습니다. HAR 또는 HTTP 아카이브 형식으로 저장합니다. 또한 HAR 파일을 가져 와서 네트워크 모니터에 표시하여 디버그 할 수 있습니다. 이것은 분산 된 팀과 함께 작업 할 때 특히 유용하며, 세계의 다른 지역에서는 다른 타임 라인을 제공합니다. 이 방법으로 모두 동일한 기준을 적용하거나 백업 CDN을 사용하여 모호한 방화벽 뒤에서 만 발생하는 이미지에서 성가신 10 초 지연을 디버깅 할 수 있습니다. 당신은 요점을 얻습니다.

반응형 디자인 모드 

반응 형 디자인 모드를 배포하지 않고도 로컬에서 모바일에서 테스트 할 수 있는 빠른 방법으로 사용합니다. 조절 기능, 터치 이벤트 및 사용자 정의 크기는 내 요구에 완벽하게 맞습니다. 필자는 전화 브라우저에 연결하지 않고 디버그를 위해 별도의 두 곳을 살펴볼 필요 없이 나머지 개발자 도구가 나란히 활성화되어 있다는 사실이 마음에 듭니다. 이동 및 확대 / 축소와 같은 복잡한 작업에서는 작동하지 않지만 한 손가락 터치 이벤트로는 충분합니다. 때로는 사용자 지정 사용자 에이전트를 사용하여 일반적으로 어떤 종류의 UA 추적 웹 사이트를 수행하는지 확인합니다. Firefox 60부터 사용자 에이전트 전환이나 터치 이벤트를 활성화 할 때 자동 재로드가 발생하지 않는다는 사실을 좋아하지는 않지만 기능의 이유를 이해합니다.

맞춤 기기 추가 

맞춤 기기 추가

Firefox 개발자 도구의 반응 모드에서 디스플레이 크기를 편집 할 수 있지만 사전 설정을 하려면 사용자 정의 장치를 추가해야 합니다. 장치 드롭 다운을 열고 목록 편집을 선택할 수 있습니다. 가장 일반적인 사전 설정 목록이 표시되며 필요한 사전 설정을 활성화 / 비활성화 할 수 있습니다. 충분하지 않은 경우 고유 한 사용자 정의 장치를 추가 할 수 있습니다. 기본 목록이 달라야 한다고 생각하면 Mozilla는 GitHub 리포지토리를 유지 관리하고 있으므로 PR을 제출하십시오.

Throttling 

속도 조절

네트워크 요청 속도를 조절하고 웹 사이트가 다른 연결에서 어떻게 로드 되는지 확인할 수 있습니다. Firefox에는 모바일 장치에 유용한 많은 사전 설정이 있으며, 잘못된 3G 연결 속도를 추측 할 필요 없이 직관적 인 이름이 있습니다.

터치 이벤트 시뮬레이션 

작은 손 모양 아이콘을 클릭하여 반응 형 디자인 모드에서 터치 이벤트를 시뮬레이션 할 수 있습니다. 끌어서 놓기 선택을 비활성화하고 탭 및 롱탭 이벤트를 포함한 터치 이벤트를 활성화합니다. 클릭 이벤트는 탭 이벤트로 바뀌고 긴 클릭 이벤트는 상황에 맞는 메뉴를 열어 긴 탭 이벤트로 시뮬레이션 됩니다.

사용자 에이전트 변경 

사용자 에이전트 변경

Firefox DevTools의 반응 형 디자인 모드에서 사용자 에이전트 문자열을 변경할 수 있습니다. 오른쪽 상단의 설정 아이콘으로 이동하여 "사용자 에이전트 표시"를 활성화 한 다음 입력 필드에서 변경할 수 있습니다. 대부분의 웹 사이트는 로드시 사용자 에이전트 감지를 수행하기 때문에 개인적으로 "사용자 에이전트가 변경 될 때 다시 로드"를 설정하고 싶습니다. 내가 더 이상 iPhone이 아니라고 생각하고 DuckDuckGo 크롤링 봇이라고 생각할 때 Google 홈페이지가 어떻게 바뀌는 지 볼 수 있습니다.?

뷰포트를 왼쪽 정렬 

뷰포트를 왼쪽 정렬

반응형 디자인 모드는 기본적으로 중앙에 있으며 테스트 만 할 때 유용합니다. 하지만 디버깅 할 때 DevTools 패널의 나머지 화면을 최대한 많이 활용하고 싶습니다. 설정 메뉴에서 옵션을 활성화하여 반응 형 디자인 뷰포트를 왼쪽에 맞출 수 있습니다.

스토리지 인스펙터 

웹 애플리케이션이 브라우저에서 사용할 수 있는 모든 유형의 스토리지를 디버깅 하는 빠른 방법으로 Storage Inspector를 사용합니다. 그리고 때로는 거기에 저장된 추적 데이터를 엉망으로 만드는 데 사용합니다?.

가장 많이 사용하는 도구는 쿠키 및 IndexedDB 도구라고 생각하지만 최근에는 캐시 저장소를 살펴 보는 데 점점 더 많은 시간을 소비하고 있으며 캐시 API는 ServiceWorker 수명 주기의 일부로 인기를 얻고 있습니다.

쿠키 편집 

쿠키 편집

브라우저에 저장된 모든 쿠키를 최소한 부분적으로 편집 할 수 있습니다. 회색으로 표시된 열, 생성 및 마지막 액세스 날짜와 같이 계산 된 항목 또는`hostOnly` 및`sameSite`와 같은 보안 플래그는 현재 편집 할 수 없습니다. 쿠키의 다른 필드를 편집하려면 편집하려는 셀을 두 번 클릭하고 새 값을 입력하십시오.

쿠키 삭제 

쿠키 삭제

Storage Inspector에서 쿠키를 삭제하는 방법에는 여러 가지가 있습니다. 가장 쉬운 방법은 행을 선택한 상태에서 백 스페이스 키를 누르고 쿠키를 삭제하는 것입니다. Firefox 68부터 Backspace를 누르면 로컬 저장소 및 세션 저장소도 항목을 삭제할 수 있습니다. 나에게 가장 유용한 것 중 하나는 도메인에서 모두 삭제 기능입니다. 하지만 도메인이 정확히 일치해야 하므로 .medium.com에서 쿠키를 삭제해도 medium.com에서 쿠키는 삭제되지 않으며 그 반대도 마찬가지입니다.

쿠키 실시간 업데이트 

실시간 쿠키 업데이트

Storage Inspector가 열려있는 동안 쿠키가 실시간으로 업데이트 되는 것을 볼 수 있으며 변경 중인 쿠키 행이 주황색으로 깜박입니다.

IndexedDB의 정적 스냅 샷 

IndexedDB의 정적 스냅 샷

Storage Inspector가 열려있는 동안 IndexedDB 항목이 실시간으로 업데이트 되는 것을 볼 수 없으며 Storage Inspector를 열었을 때의 스냅 샷일 뿐입니다. 최신 스냅 샷을 얻으려면 패널 왼쪽 상단에 있는 새로 고침 버튼을 사용해야 합니다.

테이블 헤더 변경 

Storage Inspector에서 테이블의 테이블 헤더를 변경할 수 있습니다. 대부분의 테이블은 키 / 값 쌍이며 아무것도 숨기는 것이 별로 의미가 없지만 쿠키에 대해서는 그렇게 하는 것이 실제로 유용합니다. 표 머리글을 마우스 오른쪽 버튼으로 클릭하면 활성화 / 비활성화 된 열 머리글이 표시되며 이를 전환 할 수 있습니다.