모든 브라우저에서 웹사이트의 HTML 코드를 보는 방법

웹 페이지는 사용자의 관심을 끌기 위해 사용하는 웹 개발자 및 디자이너의 제품에 불과하지만 올바르게 정렬된 HTML 요소 집합으로 정의할 수도 있습니다. 방문하는 웹 페이지가 내부에서 작동하는 것을 보고 싶다면 호기심 때문이든 아니면 단순히 자기 학습 요구 사항을 충족시키기 위해든, 다음을 수행할 수 있습니다. HTML 코드에 액세스 모든 브라우저에서 모든 웹 페이지를 매우 쉽게 만들 수 있습니다.

2022년 XNUMX월 Satcounter의 데이터에 따르면, 가장 많이 사용하는 브라우저 컴퓨터의 전 세계는 Google입니다. 크롬, 66%의 점유율로. 두 번째 위치에 있으며 지속적으로 성장하고 있습니다. Microsoft Edge 시장 점유율이 10%를 조금 넘는 크롬. 세 번째와 네 번째 위치에는 Safari가 있습니다(이 기사에서는 사용할 수 없으므로 Windows) and 파이어 폭스 시장 점유율은 각각 9.1%와 7.6%입니다.

모든 브라우저에서 모든 웹사이트의 HTML 코드 보기

데스크톱 플랫폼에서 세계에서 가장 많이 사용되는 5가지 브라우저의 분류는 다음과 같이 닫힙니다(모바일 장치에서는 크게 변경되지 않음). Opera, 현재 2.6%의 점유율로 중국 대기업의 뒤를 잇는 회사입니다. 가장 많이 사용되는 브라우저를 고려하여 아래에서 다양한 브라우저를 사용하여 웹사이트의 HTML 코드에 액세스하는 방법을 보여줍니다.

웹사이트의 HTML 코드는 무엇이며 무엇을 위한 것입니까?

모든 브라우저에는 개발자용 도구, 웹 검사기, 요소 검사기 등의 기능이 포함되어 있습니다. 웹의 HTML 코드에 액세스하려면 , 웹을 구성하는 다양한 요소의 작동을 분석하고 오류를 감지하며 솔루션 작업을 위해 방문하는 웹의 소스 코드입니다. 또한 웹 디자인의 첫 걸음을 내딛는 사용자에게 특히 유용합니다.

각 브라우저는 기본 브라우저에 구현된 다른 검사기를 사용합니다. Chromium을 기반으로 하는 Chrome, Edge, Opera의 경우 사용하는 인스펙터가 완전히 동일합니다. 약간 변경되는 유일한 것은 레이아웃 및 탐색 옵션입니다.

HTML 코드에 액세스할 때 모든 정보는 다음으로 분류됩니다. 다른 탭 이를 구성하는 모든 섹션에 훨씬 쉽게 액세스할 수 있습니다. 우리의 지식이 매우 높으면 요소 탭에 액세스하면 충분합니다.

요소 탭에서 웹의 모든 HTML 코드에 액세스할 수 있습니다. Inspector에서 다른 코드 줄 위로 마우스를 이동하면 웹에서 참조하는 콘텐츠가 웹의 어느 섹션을 참조하는지 나타내기 위해 어떻게 강조 표시되는지 확인할 수 있습니다.

구글 크롬으로

Google 크롬에서 사용할 수 있는 개발자 도구는 방문하는 모든 웹사이트의 HTML 코드에 액세스할 수 있는 기능입니다. Google 브라우저는 이 도구에 액세스할 수 있는 세 가지 방법을 제공합니다. 바로 가기 키에서 Chrome 구성 메뉴를 통한 기능 키에 이르는 방법입니다.

코디고 HTML 크롬

  • F12 키. 축소된 키보드가 없고 기능 키(Fn)를 사용해야 하는 한 Google Chrome 개발자 도구에 액세스하는 가장 빠른 방법입니다. 이 버튼을 처음 사용하면 브라우저에서 이 키의 작업을 이 기능과 연결할 수 있습니다.
  • 컨트롤 + 쉬프트 + 나 . 생산성을 높이고 마우스 의존도를 줄이기 위해 일상 생활에서 키보드 단축키를 채택했다면 이 키보드 단축키를 사용하여 Chrome 코드에 액세스할 수 있습니다.
  • 메뉴를 통해 . Google Chrome 구성 메뉴에서 도구 메뉴에 액세스하여 오른쪽 상단 모서리에 있는 세 개의 수직 지점을 클릭하여 코드를 검사할 수도 있습니다. 다음으로 추가 도구로 이동하여 마지막 옵션인 개발자 도구를 클릭합니다.
  • 와 더불어 마우스 오른쪽 버튼 , 웹의 소스 코드와 개발자용 도구에 모두 액세스할 수 있습니다.

마이크로소프트 엣지를 통해

Microsoft Edge를 사용하는 페이지의 HTML 코드에 액세스하려는 경우 Microsoft 브라우저는 세 가지 방법을 제공합니다. 두 가지 모두 Chromium을 기반으로 하고 동일한 브라우저 기반을 공유하기 때문에 세 가지 방법이 모두 Google Chrome과 동일하다는 것은 놀라운 일이 아닙니다.

코드 HTML Edge

Google과 달리 Microsoft는 이 도구를 개발 도구라고 부릅니다. 이 도구는 아래에 나와 있는 다양한 방법 중 하나를 사용하여 액세스할 수 있는 도구입니다.

  • 기능 키 F12. Chrome과 마찬가지로 이것이 가장 빠르고 쉬운 방법입니다. 이 버튼을 처음 사용하면 브라우저에서 이 키의 작업을 이 기능과 연결할 수 있습니다.
  • 단축키로 컨트롤 + 쉬프트 + 나 . 이미 익숙해졌다면 인생에 지름길을 하나 더 넣어도 문제가 되지 않을 것이다.
  • 메뉴에서 . 오른쪽 상단 모서리에 있는 세 개의 수평 점을 클릭합니다. 그런 다음 추가 도구를 클릭하고 마지막으로 마지막 옵션인 개발 도구를 클릭합니다.
  • 우리가 있는 웹사이트의 소스 코드에 액세스하려면 마우스 오른쪽 버튼 페이지 소스 코드 보기 옵션을 선택합니다. 검사 옵션을 선택하면 Edge 개발자 도구가 표시됩니다.

개발자 도구에 처음 액세스하는 경우 브라우저에서 Microsoft Edge 개발자 도구를 열 것인지 묻습니다.

Firefox에서

Mozilla Foundation의 Firefox는 이 목록에서 Chromium을 기반으로 하지 않는 유일한 브라우저이므로 위의 방법은 이론적으로 작동하지 않아야 하지만 정확히 동일하기 때문에 작동하지 않습니다.

코드 HTML 파이어폭스

그러나 Firefox가 나머지 브라우저와 비교하여 우리에게 제공하는 주요 차이점은 우리가 표시되는 웹의 코드 관리자가 표시되는 위치에 있습니다. 모든 Chromium 기반 브라우저는 브라우저 오른쪽에 웹 코드를 표시하지만 Firefox는 이 정보를 맨 아래에 표시하도록 선택하여 표시된 정보에 더 쉽게 액세스할 수 있습니다.

Firefox를 통해 개발자 도구 패널에 액세스하려는 경우 Chrome 및 Edge Chromium에 대해 동일한 3가지 옵션이 있습니다.

  • F12 키. 이 기능 키를 누르면 Firefox가 브라우저 하단에 개발자 도구를 표시합니다.
  • 키보드 단축키 사용 컨트롤 + 쉬프트 + 나 우리가 있는 웹의 HTML 코드를 엽니다.
  • 마우스를 놓기 힘든 사용자라면 웹사이트의 HTML 코드에 액세스할 수 있습니다. Firefox 옵션 메뉴 , 브라우저의 오른쪽 상단에 있는 세 개의 가로선을 클릭하고 추가 도구 > 개발자 도구를 클릭합니다.
  • 에서 마우스 오른쪽 버튼 , 페이지 소스 코드 보기 옵션을 선택하여 웹의 HTML 코드에 액세스할 수 있습니다. 그러나 개발자 도구 패널에 액세스하려면 검사 옵션을 선택해야 합니다.

Opera

Opera는 Google Chrome 및 Microsoft Edge와 마찬가지로 Chromium 프로젝트를 기반으로 하지만 이 브라우저에서 제공하는 방법은 동일하지 않습니다. 동일한 프로젝트를 기반으로 하는 다른 브라우저와 일치하는 위치는 브라우저의 오른쪽 외에는 표시되지 않는 위치입니다.

코드 HTML 오페라

Opera 브라우저가 사용자에게 페이지의 HTML 코드에 액세스할 수 있도록 제공하는 다양한 방법은 다음과 같습니다.

  • 키보드 단축키로 컨트롤 + 쉬프트 + 나 , 기반으로 하는 프로젝트에 관계없이 모든 브라우저가 범용으로 채택한 것과 동일한 키보드 단축키입니다. 바로가기 컨트롤 + 쉬프트 + c 또한 이용 가능하다.
  • 마우스 오른쪽 버튼을 누르고 옵션을 선택하십시오 요소를 점검하다 웹 어디에서나.
  • Opera에서 연 웹의 HTML 코드는 페이지 소스 옵션을 통해 오른쪽 버튼에서 사용할 수 있습니다. HTML 코드를 검사하려면 오른쪽 버튼을 눌렀을 때 표시되는 동일한 메뉴에서 검사 옵션을 선택해야 합니다.