저는 DevTools에서 많은 시간을 보내고 여러분도 그렇게 할 것이라고 확신합니다. 특히 브라우저 간 문제를 디버깅할 때 때때로 나는 그들 사이를 튕기기도 합니다. DevTools는 브라우저 자체와 매우 유사합니다. 한 브라우저의 DevTools에 있는 모든 기능이 다른 브라우저의 DevTools에서 동일하거나 지원되지는 않습니다.

그러나 상호 운용이 가능한 DevTools 기능이 상당히 많이 있으며, 덜 알려진 기능도 있습니다.

간결함을 위해 기사에서 "Chromium"은 Chrome, Edge 및 Opera와 같은 모든 Chromium 기반 브라우저를 지칭합니다. 그 안에 있는 많은 DevTools는 서로 정확히 동일한 기능을 제공하므로 한 번에 모든 것을 참조하기 위한 약어입니다.

DOM 트리에서 검색 노드

때때로 DOM 트리는 다른 노드에 중첩된 노드에 중첩된 노드로 가득 차 있습니다. 따라서 찾고 있는 정확한 항목을 찾기가 매우 어렵지만 다음을 사용하여 DOM 트리를 빠르게 검색할 수 있습니다. Cmd + F (macOS) 또는 Ctrl + F (윈도우).

또한 다음과 같은 유효한 CSS 선택기를 사용하여 검색할 수도 있습니다. .red, 또는 다음과 같은 XPath 사용 //div/h1.

Chromium 브라우저에서는 입력할 때 검색 기준과 일치하는 노드로 포커스가 자동으로 이동하므로 더 긴 검색 쿼리나 큰 DOM 트리로 작업하는 경우 성가실 수 있습니다. 다행히 다음으로 이동하여 이 동작을 비활성화할 수 있습니다. 설정 (F1) → 환경 설정 → 글로벌 → 입력 할 때 검색 → 사용 안 함.

DOM 트리에서 노드를 찾은 후 노드를 마우스 오른쪽 버튼으로 클릭하고 "Scroll into view"를 선택하여 페이지를 스크롤하여 뷰포트 내에서 노드를 가져올 수 있습니다.

콘솔에서 액세스 노드

DevTools는 콘솔에서 직접 DOM 노드에 액세스할 수 있는 다양한 방법을 제공합니다.

예를 들어 다음을 사용할 수 있습니다. $0 DOM 트리에서 현재 선택된 노드에 액세스합니다. Chromium 브라우저는 다음을 사용하여 역사적 선택의 역순으로 선택된 노드에 액세스할 수 있도록 함으로써 한 단계 더 나아갑니다. $1, $2, $3등

Chromium 브라우저에서 할 수 있는 또 다른 작업은 다음 형식의 JavaScript 표현식으로 노드 경로를 복사하는 것입니다. document.querySelector 노드를 마우스 오른쪽 버튼으로 클릭하고 부 → JS 경로 복사, 그런 다음 콘솔에서 노드에 액세스하는 데 사용할 수 있습니다.

콘솔에서 직접 DOM 노드에 액세스하는 또 다른 방법은 임시 변수입니다. 이 옵션은 노드를 마우스 오른쪽 버튼으로 클릭하고 옵션을 선택하여 사용할 수 있습니다. 이 옵션은 각 브라우저의 DevTools에서 다르게 레이블이 지정됩니다.

• Chromium: 우클릭 → “글로벌 변수로 저장”
• 파이어 폭스: 우클릭 → “콘솔에서 사용”
• Safari: 우클릭 → “로그 요소”

배지로 요소 시각화

DevTools는 노드 옆에 배지를 표시하여 특정 속성과 일치하는 요소를 시각화하는 데 도움을 줄 수 있습니다. 배지는 클릭할 수 있으며 다양한 브라우저에서 다양한 배지를 제공합니다.

In Safari, 요소 패널 도구 모음에는 특정 배지의 가시성을 전환하는 데 사용할 수 있는 배지 버튼이 있습니다. 예를 들어 노드에 display: grid or display: inline-grid 그것에 적용된 CSS 선언, grid 배지가 옆에 표시됩니다. 배지를 클릭하면 페이지에서 그리드 영역, 트랙 크기, 줄 번호 등이 강조 표시됩니다.

현재 지원되는 배지 파이어 폭스님의 DevTools는 Firefox에 나열되어 있습니다. 소스 문서. 예를 들어, a scroll 배지는 스크롤 가능한 요소를 나타냅니다. 배지를 클릭하면 오버플로를 유발하는 요소가 overflow 옆에 뱃지.

In Chromium 브라우저에서 아무 노드나 마우스 오른쪽 버튼으로 클릭하고 "배지 설정..." 사용 가능한 모든 배지를 나열하는 컨테이너를 엽니다. 예를 들어, scroll-snap-type ~을 가질 것이다. scroll-snap 옆에 있는 배지를 클릭하면 scroll-snap 해당 요소에 오버레이합니다.

스크린 샷 찍기

한동안 일부 DevTools에서 스크린샷을 찍을 수 있었지만 이제는 모든 DevTools에서 사용할 수 있으며 전체 페이지를 찍는 새로운 방법을 포함합니다.

캡처하려는 DOM 노드를 마우스 오른쪽 버튼으로 클릭하면 프로세스가 시작됩니다. 그런 다음 사용 중인 DevTools에 따라 다르게 레이블이 지정되는 노드를 캡처하는 옵션을 선택합니다.

에서 동일한 단계를 반복합니다. html 전체 페이지 스크린샷을 찍는 노드. 그러나 이렇게 하면 Safari가 요소 배경색의 투명도를 유지한다는 점에 주목할 가치가 있습니다. Chromium 및 Firefox는 요소를 흰색 배경으로 캡처합니다.

다른 옵션이 있습니다! 특정 뷰포트 너비에서 페이지를 캡처할 수 있는 페이지의 "반응형" 스크린샷을 찍을 수 있습니다. 예상할 수 있듯이 브라우저마다 도달하는 방법이 다릅니다.

• Chromium: Cmd + Shift + M (macOS) 또는 Ctrl + Shift + M (윈도우즈). 또는 "검사" 아이콘 옆에 있는 "장치" 아이콘을 클릭합니다.
• 파이어 폭스: 도구 → 브라우저 도구 → “반응형 디자인 모드”
• Safari: 개발 → “반응형 디자인 모드로 진입”

Chrome 팁: 최상위 레이어 검사

Chrome을 사용하면 대화상자, 경고 또는 모달과 같은 최상위 레이어 요소를 시각화하고 검사할 수 있습니다. 에 요소가 추가되면 #top-layer, 그것은 top-layer 옆에 있는 배지를 클릭하면 바로 뒤에 있는 최상위 레이어 컨테이너로 이동합니다. </html> 꼬리표.

에 있는 요소의 순서 top-layer 컨테이너는 스택 순서를 따르며, 이는 마지막 컨테이너가 맨 위에 있음을 의미합니다. 클릭 reveal 배지를 사용하여 노드로 다시 이동합니다.

Firefox 도움말: ID로 이동

Firefox는 ID 속성을 참조하는 요소를 동일한 DOM의 대상 요소에 연결하고 밑줄로 강조 표시합니다. 사용 CMD + Click (macOS) 또는 CTRL + Click (Windows) ) 식별자가 있는 대상 요소로 이동합니다.

최대 포장

꽤 많죠? Chromium, Firefox 및 Safari에서 모두 지원되는 매우 유용한 DevTools 기능이 있다는 것은 놀라운 일입니다. 당신이 좋아하는 세 가지 모두에서 지원하는 덜 알려진 다른 기능이 있습니까?

새로운 소식을 파악하기 위해 가까이에 두는 몇 가지 리소스가 있습니다. 나는 그것들을 여기에서 공유할 것이라고 생각했습니다.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/