웹 페이지 요소를 검사하는 방법

모든 웹 페이지의 HTML 및 CSS보기

웹 사이트는 일련의 코드로 구성 되어 있지만 그 결과 이미지, 비디오, 글꼴 등이 포함 된 특정 페이지가 만들어집니다. 이러한 요소 중 하나를 변경하거나 구성 요소가 무엇인지 보려면 해당 요소를 제어하는 ​​특정 코드 행을 찾아야합니다. 요소 검사 도구로이 작업을 수행 할 수 있습니다.

대부분의 웹 브라우저는 검사 도구를 다운로드하거나 애드온을 설치하지 않습니다. 대신 페이지 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 검사 또는 검사를 선택합니다. 그러나 브라우저에서 프로세스가 약간 다를 수 있습니다.

Chrome에서 요소 검사

가장 최신 버전의 Chrome을 사용하면 몇 가지 방법으로 페이지를 검사 할 수 있습니다. 모두 Chrome DevTools가 내장되어 있습니다.

Chrome DevTools를 사용하면 HTML 행을 쉽게 복사 또는 편집하거나 요소를 숨기거나 삭제할 수 있습니다 (페이지가 다시로드 될 때까지).

DevTools가 페이지의 측면에서 열리면 위치를 바꿀 수 있고, 페이지 밖으로 팝 아웃하고, 모든 페이지의 파일을 검색하고, 특정 검사를 위해 페이지에서 요소를 선택하고, 파일 및 URL을 복사하고, 무리를 사용자 정의 할 수 있습니다 설정 중.

Firefox에서 요소 검사

Chrome과 마찬가지로 Firefox에는 Inspector라는 도구를 여는 몇 가지 방법이 있습니다.

Firefox에서 다양한 요소 위로 마우스를 이동하면 Inspector 도구는 요소의 소스 코드 정보를 자동으로 찾습니다. 요소를 클릭하면 "실시간 검색"이 중지되고 속성 창에서 요소를 검사 할 수 있습니다.

요소를 마우스 오른쪽 단추로 클릭하여 지원되는 모든 컨트롤을 찾습니다. HTML로 페이지를 편집하고, 내부 또는 외부 HTML 코드를 복사 또는 붙여 넣기, DOM 속성 표시, 노드 캡쳐, 노드 삭제, 새로운 속성의 적용, 페이지의 CSS보기 등을 할 수 있습니다.

오페라에서 요소 검사하기

Opera는 요소와 마찬가지로 DOM Inspector 도구 (Chrome과 동일)를 검사 할 수 있습니다. 여기에 도달하는 방법은 다음과 같습니다.

Internet Explorer에서 요소 검사

개발자 도구라고하는 유사한 검사 요소 도구는 Internet Explorer에서 사용할 수 있습니다.

IE에는 HTML 및 CSS 세부 정보를 볼 수있는 페이지 요소를 클릭 할 수있는이 새로운 메뉴에서 Select 요소 도구가 있습니다. 또한 DOM 탐색기 탭을 탐색하는 동안 요소 강조 표시를 쉽게 사용 / 사용하지 않도록 설정할 수 있습니다.

위 브라우저의 다른 요소 검사기 도구와 마찬가지로 Internet Explorer를 사용하면 HTML을 편집하고, 특성을 추가하고, 스타일이 첨부 된 요소를 복사하는 등의 작업을 수행하고 요소를 잘라내거나 복사하고 붙여 넣을 수 있습니다.