Firefox Dev Tools는 요소를 클릭 할 때 DOM 노드를 강조 표시합니다.

Question

DOM Inspector에서 페이지로 요소를 찾거나 그 반대로 요소를 찾는 것이 강조되지 않습니다. 이전에 보지 못한 행동이지만, 일반적으로 Chrome을 사용합니다.

클릭을 허용하지 않거나 선택을 허용하지 않거나 기본적으로 포커스를 얻는 텍스트 영역을 디버깅합니다. 페이지의 텍스트 영역을 클릭하면 Inspector의 여러 DOM 노드가 강조 표시되고 잠시 후에 사라지는 것을 보았습니다. 강조 표시된 노드는 텍스트 영역이 아닙니다. 그들은 본문을 포함하여 텍스트 영역의 부모 였지만 반드시 텍스트 영역과 본문 사이의 모든 부모는 아닙니다. 또한 한 부모의 형제 자매가 강조 표시되었습니다.

Firefox가 내게 어떤 것을 말하려고 시도하지만, 무엇을 모르겠습니다. 나는 원래의 문제에 대한 해답이이 하이라이트에 포함되어있는 것처럼 느껴진다.

첨부 된 스크린 샷에서 선택한 요소 인 파란색으로 강조 표시된 텍스트 영역과 몇 가지 다른 요소의 다소 뚜렷한 색 강조 표시를 볼 수 있습니다. 이것은 텍스타리아를 클릭 한 직후입니다 (검사관이 아닌 텍스트를 입력하려고했던 것처럼).

이것은 무엇을 의미합니까?

Answer 1

마크 업보기의 노드 (스크린 샷의 내용)가 강조 표시되면이 노드가 변형을 겪었 음을 의미합니다. 여기에는 다음과 같은 방법이 될 수 있습니다 : 당신이 실제로 텍스트 상자를 마우스를 얻을 수있는 방법을 찾고있는

이제 자식 노드의 노드에서

• 속성 값 변경
• 추가/제거, 텍스트 상자를 선택하는 마크 업보기, 맞습니까?

  두 가지 방법으로 그렇게 할 수 있습니다

  • 가 Ctrl 키 + Shift 키 바로 가기를 쳐 C. 당신은 당신의 마우스를 다음 페이지에 오버레이를 볼 수 있습니다. 텍스트 상자로 가서 클릭하십시오.
  • 개발자 도구의 왼쪽 상단 모서리에있는 "페이지에서 요소 선택"버튼을 클릭하면 동일한 노드 선택기가 나타납니다.

  더 깊은 정보의 경우 : MDN 페이지를 방문하십시오 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector