일부 크로스 브라우저 DevTools에는 모르는 기능이 있습니다

개발자 도구는 프론트 엔드 개발자를위한 일일 무기입니다.

단순화를 위해 "Chromium"은 기사에서 사용하여 Chrome, Edge 및 Opera와 같은 모든 크롬 기반 브라우저를 참조합니다. 개발자 도구는 기능이 매우 일관성이 있습니다.

dom 트리 노드 검색 레이어에서 중첩 된 DOM 노드를 향하여 대상 노드를 찾는 것은 시간이 많이 걸리고 힘들 수 있습니다. CMD F (MACOS) 또는 CTRL F (Windows)를 사용하여 DOM 트리를 빠르게 검색하십시오.

는 CSS Selector (예 : ) 및 XPath 표현식 (예 : ) 검색을 지원합니다.

Chromium 브라우저에서 검색은 자동으로 일치하는 노드로 이동하여 긴 쿼리 또는 큰 DOM 트리를 처리 할 때 문제가 될 수 있습니다. 검색하는 동안

를 입력하는 동안 (f1) →

.red를 입력하여 //div/h1를 입력하여 를 입력하여 를 입력 하여이 기능을 해제 할 수 있습니다. 노드를 찾은 후 노드를 마우스 오른쪽 버튼으로 클릭하고 "스크롤"을 선택하여보기 영역으로 스크롤하십시오. 콘솔에서 노드에 액세스 > 개발자 도구는 콘솔에서 직접 DOM 노드에 직접 액세스하는 여러 가지 방법을 제공합니다. 예를 들어, 는 현재 선택된 DOM 노드에 액세스 할 수 있습니다. Chromium 브라우저는 한 단계 더 나아가 , , 등을 사용하여 히스토리 선택의 노드에 액세스 할 수 있습니다. 노드를 마우스 오른쪽 버튼으로 클릭하고 복사 복사 js 경로를 복사하면 코 복사에서 액세스하기에 편리한 JavaScript 표현식 ( 양식)으로 노드 경로를 복사 할 수 있습니다. 또 다른 방법은 노드를 임시 변수로 저장하는 것입니다. 노드를 마우스 오른쪽 버튼으로 클릭하고 해당 옵션을 선택하십시오. Chromium : 마우스 오른쪽 버튼을 클릭 → "전역 변수로 저장" firefox : 마우스 오른쪽 버튼을 클릭 →“콘솔에서 사용”

사파리 : 마우스 오른쪽 버튼을 클릭 →“레코드 요소”

태그로 요소를 시각화하십시오 개발자 도구는 노드 옆에 태그를 표시하여 특정 속성으로 요소를 시각화하는 데 도움이 될 수 있습니다. 태그는 클릭 가능하며 다른 브라우저에서 제공하는 태그 유형도 다릅니다.

in safari

에, 요소 패널 도구 모음에는 특정 마커의 가시성을 전환하기위한 마커 버튼이 있습니다. 예를 들어, 노드에 A

또는 CSS 선언이 적용되면 그리드 마크가 옆에 표시됩니다. 마크를 클릭하면 페이지의 그리드 영역, 트랙 크기, 줄 번호 등이 강조 표시됩니다. <code><code> firefox 현재 개발자 도구에서 지원하는 태그는 Firefox 소스 문서에 나열되어 있습니다. 예를 들어, 스크롤 마크는 스크롤 가능한 요소를 나타냅니다. 마크를 클릭하면 오버플로를 유발하고 옆에 오버플로 마크가 표시되는 요소가 강조 표시됩니다. <code>

크롬 브라우저에서 모든 노드를 마우스 오른쪽 버튼으로 클릭하고 "태그 설정 ..."를 선택하여 사용 가능한 모든 태그가있는 컨테이너를 열 수 있습니다. 예를 들어, 가있는 요소는 그 옆에 스크롤 스냅 태그가 있으며 해당 태그를 클릭하면 해당 요소의 스크롤 스냅 오버레이가 전환됩니다. 스크린 샷 모든 주류 브라우저는 이제 개발자 도구의 스크린 샷을 지원하고 새로운 전체 페이지 스크린 샷을 제공합니다. <code>scroll-snap-type 캡처 할 DOM 노드를 마우스 오른쪽 버튼으로 클릭하고 노드를 캡처하는 옵션을 선택하십시오 (다른 브라우저 태그는 다릅니다).

HTML 노드 에서이 작업을 반복하여 전체 페이지 스크린 샷을 가져옵니다. Safari는 요소의 배경색의 투명성을 유지하는 반면 Chromium 및 Firefox는 흰색 배경으로 포착합니다.

특정 뷰포트 너비로 페이지를 캡처하기 위해 "반응 형"스크린 샷을 찍을 수도 있습니다. 다른 브라우저의 작동 방법은 다음과 같습니다.

크롬 : cmd shift m (macOS) 또는 ctrl shift m (Windows). 또는 확인 아이콘 옆의 장치 아이콘을 클릭하십시오.

firefox : 도구 → 브라우저 도구 →“반응 형 디자인 패턴” Safari : 개발 →“응답 디자인 모드를 입력”

<: :> 크롬 팁 : 최상위 레벨 를 확인하십시오 Chrome을 사용하면 대화 상자, 알림 또는 모달 상자와 같은 최상위 요소를 시각화하고 검사 할 수 있습니다. 요소가

에 추가되면, 마크를 클릭하면 최상위 마크가 표시됩니다.

상단 컨테이너의 요소 순서는 스태킹 순서를 따릅니다. 이는 마지막 요소가 상단에 있음을 의미합니다. 디스플레이 마크를 클릭하여 노드로 돌아갑니다.

Firefox 팁 : ID 로 점프하십시오 Firefox는 동일한 DOM에서 대상 요소와 ID 속성을 참조하는 요소를 연결하고 밑줄로 강조 표시합니다. CMD 클릭 (MACOS) 또는 CTRL CLICK (Windows)를 사용하여 식별자를 사용하여 대상 요소로 점프하십시오.

• 요약 이 기사는 Chromium, Firefox 및 Safari에서 지원되는 실제 개발자 도구 기능을 소개합니다. 좋아하는 크로스 브라우저 개발자 도구 기능이 있습니까? 다음은 내가 자주 사용하는 몇 가지 리소스입니다. DevTools Tips (Patrick Brosset) : 크로스 브라우저 개발자 도구 팁 및 요령 모음.
dev 팁 (Umar Hansa) : 개발자 도구 팁 이메일 구독.
• DevTools를 할 수 있습니까? : 개발자 도구 용 Caniuse 웹 사이트.

위 내용은 일부 크로스 브라우저 DevTools에는 모르는 기능이 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!