모든 브라우저에서 웹 페이지의 소스 코드보기

읽고있는 웹 페이지는 소스 코드로 구성되어 있습니다. 그것은 귀하의 웹 브라우저가 다운로드하고 현재 읽고있는 정보로 번역되는 정보입니다.

대부분의 웹 브라우저는 현재 사용중인 장치 유형에 상관없이 추가 소프트웨어가 필요없이 웹 페이지의 소스 코드를 볼 수있는 기능을 제공합니다.

일부는 고급 기능 및 구조를 제공하기 때문에 페이지에서 HTML 및 기타 프로그래밍 코드를 더 쉽게 볼 수 있습니다.

왜 소스 코드를보고 싶습니까?

페이지의 소스 코드를 보려는 데에는 몇 가지 이유가 있습니다. 웹 개발자라면 다른 프로그래머의 특정 스타일이나 구현을 살펴볼 수 있습니다. 어쩌면 당신은 품질 보증을하고 있으며 웹 페이지의 특정 부분이 렌더링 또는 작동하는 이유를 확인하려고 시도하고있을 수도 있습니다.

또한 자신의 페이지를 코딩하는 법을 배우고 실전 예제를 찾고있는 초보자 일 수도 있습니다. 물론이 카테고리에 속하지 않고 단순히 호기심에서 벗어난 소스를보고 싶을 수도 있습니다.

아래 목록은 선택한 브라우저에서 소스 코드를 보는 방법에 대한 지침입니다.

구글 크롬

실행 장소 : Chrome OS, Linux, macOS, Windows

Chrome의 데스크톱 버전은 다음의 키보드 단축키를 사용하여 가장 간단하고 간단한 페이지의 소스 코드를 보는 세 가지 방법을 제공합니다. CTRL + U (COMMAND + OPTION + U macOS에서).

이 단축키를 누르면 활성 페이지에 대한 HTML 및 기타 코드를 표시하는 새 브라우저 탭이 열립니다. 이 소스는 색으로 구분되고 구조화되어 찾고있는 것을 쉽게 찾을 수 있도록 구조화되어 있습니다. 또한 웹 페이지 URL의 왼쪽에 추가 된 Chrome의 주소 표시 줄에 다음 텍스트를 입력하고 들어가다 키: 소스보기: (즉,보기 소스 : https : //www.Go-Travels.com).

세 번째 방법은 Chrome의 개발자 도구를 사용하는 것입니다.이 도구를 사용하면 페이지의 코드를 자세히 살펴보고 테스트 및 개발 목적으로 실시간 수정할 수 있습니다. 다음과 같은 키보드 단축키를 사용하여 개발자 도구 인터페이스를 열고 닫을 수 있습니다. CTRL + SHIFT + I (COMMAND + OPTION + I macOS에서). 다음 경로를 통해 시작할 수도 있습니다.

오른쪽 상단 모서리에 있으며 세로로 정렬 된 세 개의 점으로 표시된 Chrome의 기본 메뉴 버튼을 선택합니다.
드롭 다운 메뉴가 나타나면 마우스 커서를 추가 도구 선택권.
하위 메뉴가 나타나면 개발자 도구.

기계적 인조 인간

Android 용 Chrome에서 웹 페이지의 소스를 보는 것은 주소 (또는 URL) 앞에 다음 텍스트를 추가하고 제출하는 것만 큼 간단합니다. 소스보기:. 이것의 예는 다음과 같다. view-source : https : //www.Go-Travels.com . 해당 페이지의 HTML 및 기타 코드가 활성 창에 즉시 표시됩니다.

iOS

iPad, iPhone 또는 iPod touch에서 Chrome을 사용하여 소스 코드를 볼 수있는 기본 방법은 없지만 가장 간단하고 효과적인 방법은 소스보기 앱과 같은 타사 솔루션을 이용하는 것입니다.

App Store에서 0.99 달러에 구입할 수있는 View Source는 페이지의 URL을 입력하라는 메시지를 표시합니다 (또는 Chrome의 주소 표시 줄에서 복사 / 붙여 넣기를하는 것이 가장 간단한 방법 일 수도 있음). HTML 및 기타 소스 코드를 표시하는 것 외에도 개별 페이지 자산, DOM (Document Object Model), 페이지 크기, 쿠키 및 기타 흥미로운 세부 정보를 표시하는 탭이 있습니다.

Microsoft Edge

실행 대상 : Windows

Edge 브라우저를 사용하면 개발자 도구 인터페이스를 통해 현재 페이지의 소스 코드를보고 분석하고 심지어 조작 할 수 있습니다. 이 편리한 도구 세트에 액세스하려면 다음 단축키 중 하나를 사용할 수 있습니다. F12 또는 CTRL + U. 마우스를 대신 사용하려면 가장자리의 메뉴 버튼 (오른쪽 상단 모서리에있는 3 개의 점)을 클릭하고 F12 개발자 도구 옵션을 선택하십시오.

dev 도구가 처음 실행 된 후 Edge는 브라우저의 상황에 맞는 메뉴 (웹 페이지의 아무 곳이나 마우스 오른쪽 단추로 클릭하여 액세스 할 수 있음)에 두 가지 추가 옵션을 추가합니다. 요소를 점검하다 과 소스보기, 후자는 디버거 dev 도구 인터페이스의 일부는 소스 코드로 채워집니다.

모질라 파이어 폭스

실행 : Linux, macOS, Windows

Firefox의 데스크톱 버전에서 페이지의 소스 코드를 보려면 CTRL + U (COMMAND + U on macOS)를 입력하면 활성화 된 웹 페이지에 대한 HTML 및 기타 코드가 포함 된 새 탭이 열립니다.

Firefox의 주소 표시 줄에 페이지의 왼쪽에있는 다음 텍스트를 직접 입력하면 현재 탭에 같은 소스가 표시됩니다. 소스보기: ( 즉,보기 소스 : https : //www.dotdash.com ).

페이지의 소스 코드에 액세스하는 또 다른 방법은 다음 단계를 수행하여 액세스 할 수있는 Firefox의 개발자 도구를 사용하는 것입니다.

브라우저 창의 오른쪽 상단 모서리에 있고 세 개의 수평선으로 표시된 기본 메뉴 버튼을 선택하십시오.
팝업 메뉴가 나타나면 개발자 "렌치"아이콘.
웹 개발자 컨텍스트 메뉴가 표시됩니다. 선택 페이지 소스 선택권.

또한 Firefox는 페이지의 특정 부분에 대한 소스 코드를 볼 수 있으므로 문제를 쉽게 분리 할 수 있습니다. 이렇게하려면 먼저 마우스로 관심있는 영역을 강조 표시하십시오. 다음을 마우스 오른쪽 버튼으로 클릭하고 선택하십시오. 선택 소스보기 브라우저의 컨텍스트 메뉴에서.

기계적 인조 인간

Firefox의 Android 버전에서 소스 코드를 보려면 웹 페이지의 URL 앞에 다음 텍스트를 추가하십시오. 소스보기:. 예를 들어, Dotdash의 HTML 소스를 보려면 브라우저의 주소 표시 줄에 다음 텍스트를 제출하십시오. view-source : https : //www.dotdash.com .

iOS

iPad, iPhone 또는 iPod touch에서 웹 페이지 소스 코드를 보는 데 권장되는 방법은 App Store에서 $ 0.99로 볼 수있는 View Source 앱을 사용하는 것입니다. Firefox와 직접 통합되지는 않지만 해당 페이지와 관련된 HTML 및 기타 코드를 공개하려면 브라우저의 URL을 복사하여 응용 프로그램에 쉽게 붙여 넣을 수 있습니다.

애플 사파리

iOS 및 macOS에서 실행

iOS

iOS 용 Safari에는 기본적으로 페이지 소스를 볼 수있는 기능이 없지만 브라우저는 View Source 앱과 원활하게 통합됩니다 (App Store에서 $ 0.99).

이 타사 앱을 설치 한 후 Safari 브라우저로 돌아가서 화면 하단에있는 사각형 버튼과 위쪽 화살표로 표시된 공유 버튼을 탭합니다. 이제 Safari 창의 아래쪽 절반에 iOS 공유 시트가 표시됩니다. 오른쪽으로 스크롤하여 소스보기 단추.

이제 활성 페이지의 소스 코드를 색으로 구분하여 구조화 된 표현으로 표시하고 페이지 자산, 스크립트 등을 볼 수있는 다른 탭을 표시해야합니다.

맥 OS

Safari의 데스크톱 버전에서 페이지의 소스 코드를 보려면 먼저 해당 기능을 활성화해야합니다. 나타나게 하다 메뉴. 아래 단계는이 숨겨진 메뉴를 활성화하고 페이지의 HTML 소스를 표시하는 과정을 안내합니다.

고르다 원정 여행 화면 상단에있는 브라우저 메뉴에 있습니다.
드롭 다운 메뉴가 나타나면 환경 설정 선택권.
Safari의 환경 설정이 표시됩니다. 클릭 많은 아이콘, 상단 행의 맨 오른쪽에 있습니다.
고급 섹션 하단에 레이블이 붙은 옵션이 있습니다. 메뉴 막대에 개발 메뉴 표시빈 체크 박스와 함께 표시됩니다. 이 상자를 한 번 선택하면 체크 표시가 나타나고 왼쪽 상단 모서리에있는 빨간색 'x'를 클릭하여 환경 설정 창을 닫습니다.
선택 나타나게 하다 메뉴를 클릭하십시오.
드롭 다운 메뉴가 나타나면 페이지 소스보기. 다음 키보드 단축키를 대신 사용할 수도 있습니다. COMMAND + OPTION + U.

오페라

실행 : Linux, macOS, Windows

Opera 브라우저에서 활성 웹 페이지의 소스 코드를 보려면 다음 키보드 단축키를 사용하십시오. CTRL + U (COMMAND + OPTION + U macOS에서). 대신 현재 탭에서 소스를로드하려는 경우 주소 표시 줄의 페이지 URL 왼쪽에 다음 텍스트를 입력하고 조회합니다. 다음을 입력하십시오. view-source : ( 즉,보기 소스 : https : //www.Go-Travels.com ).

Opera의 데스크톱 버전에서는 통합 된 개발자 도구를 사용하여 HTML 소스, CSS 및 기타 요소를 볼 수도 있습니다. 기본 브라우저 창 오른쪽에이 인터페이스를 시작하려면 다음 키보드 단축 키를 누릅니다. CTRL + SHIFT + I (COMMAND + OPTION + I macOS에서).

Opera의 개발자 툴셋은 다음 단계를 통해 액세스 할 수도 있습니다.

브라우저 창의 왼쪽 상단 모서리에있는 Opera 로고를 선택하십시오.
드롭 다운 메뉴가 나타나면 마우스 커서를 추가 도구 선택권.
클릭 개발자 메뉴 표시.
오페라 로고를 다시 선택하십시오.
드롭 다운 메뉴가 나타나면 커서를 위에 놓습니다. 개발자.
하위 메뉴가 나타나면 개발자 도구.

비발디

비발디 브라우저에서 페이지 소스를 보는 방법에는 여러 가지가 있습니다. 가장 간단한 방법은 CTRL + U 키보드 단축키 : 활성 페이지의 코드를 새 탭에 표시합니다.

현재 URL 탭의 소스 코드를 표시하는 다음 텍스트를 페이지의 URL 앞에 추가 할 수도 있습니다. 소스보기:. 이것의 예는 다음과 같다. view-source : http : //www.dotdash.com .

또 다른 방법은 브라우저의 통합 개발자 도구를 사용하는 것입니다. CTRL + SHIFT + I 조합을 통해 또는 개발자 도구 브라우저의 옵션 도구들 메뉴 - V 왼쪽 상단 모서리에 로고가 있습니다. dev 도구를 사용하면 페이지 소스에 대한 심층적 인 분석이 가능합니다.