Mac의 Chrome, Safari 및 Firefox에서 요소를 검사하는 방법

웹사이트는 현 시대의 필수품입니다. 비즈니스 정보를 찾는 데 사용합니다. 우리는 심지어 우리의 직장이나 학교 활동을 위해 그것을 연구하는 데 사용합니다. 따라서 웹 사이트는 훈련되지 않은 눈으로 이해하기 어려울 수 있는 웹 프로그래밍 언어로 구성됩니다.

웹사이트의 일부에 대해 자세히 알아보려면 Mac에서 요소를 검사하는 방법을 알아야 합니다. . 이 "요소 검사" 기능을 사용하면 웹사이트의 프런트 엔드를 보거나 수정할 수 있습니다. 자신의 웹사이트를 만들고 싶을 때(또는 이러한 사이트가 작동하는 방식을 배우고 싶을 때) Mac에서 요소를 검사하는 방법을 아는 것이 좋습니다.

웹사이트를 확인하는 것 외에도 쿠키를 정리하는 것도 많은 사람들이 하게 될 작업입니다. 자세한 내용을 보려면 링크를 클릭하세요.

이 게시물에서는 Mac에서 요소를 검사하는 방법에 대해 자세히 설명합니다. 특정 경우에 웹사이트의 요소를 보거나 "검사"할 수 없는 이유에 대해 설명합니다. 그런 다음 다양한 브라우저를 사용하여 웹사이트 요소를 검사하는 방법을 알려 드리겠습니다.

1부. Mac에서 검사할 수 없는 이유는 무엇입니까?

Mac에서 요소를 검사하는 방법을 알고 싶다면 애초에 구현하지 못하는 이유를 알아야 합니다. 웹사이트 검사는 Safari 브라우저에서 개발 메뉴를 활성화한 경우에만 가능합니다. 따라서 개발 메뉴 활성화가 완료되어야 합니다. 그러면 Apple의 Web Inspector를 사용할 수 있습니다.

다음은 Mac에서 요소를 검사하는 방법을 구현할 수 있는 메뉴 개발을 활성화하는 단계입니다.

1. 사파리를 엽니다.
2. 인터페이스에서 브라우저의 기본 설정 섹션을 찾습니다.
3. 고급 레이블을 클릭하여 선택합니다.
4. 창의 아래쪽 섹션으로 이동합니다. 그런 다음 "메뉴 막대에 개발 메뉴 표시"라는 상자를 선택하십시오.
5. 개발 옵션을 선택합니다.
6. Web Inspector 표시 옵션을 클릭합니다.

2부. Mac 브라우저에서 요소를 검사하는 방법

브라우저마다 Mac에서 요소를 검사하는 방법에는 여러 가지가 있습니다. 아래에서 Chrome, Safari, Firefox를 사용하여 Mac에서 요소를 검사하는 방법을 확인해 보겠습니다.

Chrome 브라우저를 사용하여 Mac에서 요소를 검사하는 방법

다음은 Mac의 Chrome에서 요소를 검사하는 방법을 구현할 수 있는 몇 가지 방법입니다.

1. 오른쪽 클릭 방법

• Mac에서 Chrome을 엽니다.
• 요소를 검사하려는 페이지로 이동합니다.
• 이제 페이지를 마우스 오른쪽 버튼으로 클릭한 다음 검사 옵션을 클릭합니다. 페이지의 특정 요소를 마우스 오른쪽 버튼으로 클릭하면 이 요소가 속성 보기 내에서 열립니다.

• 보기 메뉴의 상단 메뉴 표시줄을 클릭합니다.
• 그런 다음 개발자 옵션을 선택한 다음 개발자 도구로 이동합니다.
• 사용자 정의 및 제어 옵션을 실행합니다.

• 점 3개처럼 보이는 아이콘을 클릭하여 추가 도구로 이동합니다. 이것은 브라우저의 오른쪽 상단에서 찾을 수 있습니다.
• 개발자 도구를 클릭합니다.

• CMD + OPTION + C 입력 macOS에서.
• 세 개의 점처럼 보이는 아이콘을 클릭하여 패널 위치(선택 사항)를 변경합니다. 원하는 도크 위치를 선택합니다. 예를 들어 오른쪽에 고정을 선택할 수 있습니다.

이제 Mac에서 요소를 검사하는 방법에 대해 이 네 가지 방법 중 하나를 수행하면 다양한 탭이 표시됩니다. 이러한 탭에는 요소, 소스, 콘솔 등이 포함됩니다. 일반적으로 필요한 모든 것은 요소 탭에 있습니다.

소스 코드를 보기 위해 요소를 선택할 수 있습니다. 코드를 보는 것 외에도 텍스트를 편집하고, 요소를 삭제하고, 요소를 숨기고, HTML로 편집할 수도 있습니다.

스타일 탭을 사용하면 요소, 특히 텍스트 요소의 서식을 확인할 수 있습니다. 또한 모바일 보기에서 페이지를 확인할 수 있습니다. 이것은 모바일 친화적인 사이트를 원하는 웹 개발자와 비즈니스 소유자에게 훌륭한 정보 소스가 될 수 있습니다.

Safari 브라우저를 사용하여 Mac에서 요소를 검사하는 방법

브라우저를 사용하여 Mac에서 Safari를 검사하는 방법을 구현하기 전에 먼저 Safari용 개발자 도구를 활성화해야 합니다. 수행 방법에 대한 단계는 다음과 같습니다.

1. Safari 브라우저를 열고 기본 설정 옵션을 선택합니다.
2. 고급을 방문하십시오.
3. "메뉴 모음에 개발 메뉴 표시" 확인란을 선택합니다.
4. 메뉴에 개발이라는 새로운 옵션이 있는지 다시 확인하십시오.

따라서 Safari를 사용하여 Mac에서 요소를 검사하는 방법. 다음은 구현할 수 있는 몇 가지 방법입니다.

1. 오른쪽 클릭 방법

• 요소를 확인하려는 페이지로 이동합니다.
• 페이지의 아무 부분이나 마우스 오른쪽 버튼으로 클릭합니다.
• 검사를 선택합니다.

• Safari를 사용하여 Mac에서 요소를 검사하는 방법에 대한 첫 번째 작업은 개발 메뉴를 방문하는 것입니다.
• 웹 검사기 표시 옵션을 클릭합니다.

• 올바른 단축키를 사용하십시오. 이제 이를 수행하려면 CMD + OPTION + I 옵션을 클릭하기만 하면 됩니다. .

이제 Safari를 사용하여 Mac에서 요소를 검사하는 방법을 구현할 수 있습니다. 그건 그렇고, Safari를 열 때 너무 느리게로드되면 링크 기사에서 해결책을 볼 수 있습니다.

Firefox 브라우저를 사용하여 Mac에서 요소를 검사하는 방법

Mac에서 Firefox 브라우저를 사용하여 검사하는 방법에는 여러 가지가 있습니다. 다음은 이를 수행하는 데 사용할 수 있는 몇 가지 방법입니다.

1. 오른쪽 클릭 방법

• 먼저 할 일은 페이지를 방문하여 마우스 오른쪽 버튼을 클릭하는 것입니다.
• 그런 다음 요소 검사 옵션을 클릭합니다.
• 선택 사항은 페이지 내의 특정 요소를 마우스 오른쪽 버튼으로 클릭한 다음 검사하는 것입니다.

• Firefox 브라우저에서 도구 메뉴를 열 수도 있습니다.
• 그런 다음 웹 개발자 옵션을 클릭합니다. 그런 다음 검사 옵션을 클릭합니다.

• 바로 가기를 사용합니다. 예를 들어 CTRL + Shift + C를 클릭할 수 있습니다. (Windows의 경우) COMMAND + OPTION + C을 클릭할 수도 있습니다. (Mac 컴퓨터에서).

오른쪽 클릭 없이 Mac에서 요소를 검사하는 방법

페이지를 마우스 오른쪽 버튼으로 클릭하지 않고 Mac에서 요소를 검사하는 방법이 있습니다. 바로 가기 키를 사용하여 수행할 수 있습니다. 다음은 Mac 컴퓨터의 여러 브라우저에서 요소를 검사하는 바로 가기 키입니다.

• 사파리 – COMMAND + OPTION + I
• 크롬 – COMMAND + OPTION + C
• 파이어폭스 – COMMAND + OPTION + C

또한 이 세 브라우저의 환경 설정이나 도구 또는 메뉴를 사용하여 페이지를 마우스 오른쪽 버튼으로 클릭하지 않고도 Mac 컴퓨터의 요소를 검사할 수도 있습니다. Safari, Chrome 및 Firefox에서 위의 방법을 볼 수 있습니다.