읽고있는 웹 페이지는 소스 코드로 구성되어 있습니다. 그것은 귀하의 웹 브라우저가 다운로드하고 현재 읽고있는 정보로 번역되는 정보입니다.
대부분의 웹 브라우저는 현재 사용중인 장치 유형에 상관없이 추가 소프트웨어가 필요없이 웹 페이지의 소스 코드를 볼 수있는 기능을 제공합니다.
일부는 고급 기능 및 구조를 제공하기 때문에 페이지에서 HTML 및 기타 프로그래밍 코드를 더 쉽게 볼 수 있습니다.
왜 소스 코드를보고 싶습니까?
페이지의 소스 코드를 보려는 데에는 몇 가지 이유가 있습니다. 웹 개발자라면 다른 프로그래머의 특정 스타일이나 구현을 살펴볼 수 있습니다. 어쩌면 당신은 품질 보증을하고 있으며 웹 페이지의 특정 부분이 렌더링 또는 작동하는 이유를 확인하려고 시도하고있을 수도 있습니다.
또한 자신의 페이지를 코딩하는 법을 배우고 실전 예제를 찾고있는 초보자 일 수도 있습니다. 물론이 카테고리에 속하지 않고 단순히 호기심에서 벗어난 소스를보고 싶을 수도 있습니다.
아래 목록은 선택한 브라우저에서 소스 코드를 보는 방법에 대한 지침입니다.
구글 크롬
실행 장소 : Chrome OS, Linux, macOS, Windows
Chrome의 데스크톱 버전은 다음의 키보드 단축키를 사용하여 페이지의 소스 코드를 보는 세 가지 방법을 제공합니다. 가장 간단한 방법은 Ctrl + U (MacOS의 경우 COMMAND + OPTION + U )입니다.
이 단축키를 누르면 활성 페이지에 대한 HTML 및 기타 코드를 표시하는 새 브라우저 탭이 열립니다. 이 소스는 색으로 구분되고 구조화되어 찾고있는 것을 쉽게 찾을 수 있도록 구조화되어 있습니다. 또한 Chrome의 주소 표시 줄에 다음 텍스트를 입력하고 웹 페이지 URL 의 왼쪽에 추가 한 다음 Enter 키를 눌러서 가져올 수 있습니다. view-source : (예 : view-source : https : // www ).
세 번째 방법은 Chrome의 개발자 도구 를 사용하는 것 입니다.이 도구 를 사용하면 페이지의 코드를 자세히 살펴보고 테스트 및 개발 목적으로 실시간 수정할 수 있습니다. 개발자 도구 인터페이스는 Ctrl + Shift + I (macOS의 경우 COMMAND + OPTION + I) 와 같은 바로 가기 키를 사용하여 열고 닫을 수 있습니다. 다음 경로를 통해 시작할 수도 있습니다.
- 오른쪽 상단에있는 Chrome의 기본 메뉴 버튼을 클릭하고 세로로 정렬 된 세 개의 점으로 표시하십시오.
- 드롭 다운 메뉴가 나타나면 마우스 커서를 기타 도구 옵션 위로 가져갑니다.
- 하위 메뉴가 나타나면 개발자 도구를 클릭하십시오.
기계적 인조 인간
Android 용 Chrome에서 웹 페이지의 소스를 보는 것은 주소 (또는 URL) 앞에 다음 텍스트를 추가하고 제출하는 것만 큼 간단합니다. view-source : . 예를 들면 view-source : https : // www입니다. . 해당 페이지의 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는 브라우저의 상황에 맞는 메뉴 (웹 페이지의 아무 곳이나 마우스 오른쪽 단추로 클릭하여 액세스 할 수 있음)에 두 가지 추가 옵션을 추가합니다. 요소 검사 및 소스보기 , 후자는 개발자의 디버거 부분을 엽니 다. 도구 인터페이스는 소스 코드로 채워집니다.
모질라 파이어 폭스
실행 : Linux, macOS, Windows
Firefox의 데스크톱 버전에서 페이지의 소스 코드를 보려면 키보드에서 Ctrl + U (MacOS의 경우 COMMAND + U )를 누르면 활성 웹 페이지에 대한 HTML 및 기타 코드가 포함 된 새 탭이 열립니다.
Firefox의 주소 표시 줄에 페이지의 URL 왼쪽에 직접 다음 텍스트를 입력하면 현재 탭에 동일한 소스가 표시됩니다. view-source : (즉, view-source : https : // www.) .
페이지의 소스 코드에 액세스하는 또 다른 방법은 다음 단계를 수행하여 액세스 할 수있는 Firefox의 개발자 도구를 사용하는 것입니다.
- 브라우저 창의 오른쪽 상단 구석에있는 세 개의 수평선으로 표시된 기본 메뉴 버튼을 클릭하십시오.
- 팝업 메뉴가 나타나면 개발자 '공구 모양'아이콘을 클릭하십시오.
- 웹 개발자 컨텍스트 메뉴가 표시됩니다. 페이지 소스 옵션을 선택하십시오.
또한 Firefox는 페이지의 특정 부분에 대한 소스 코드를 볼 수 있으므로 문제를 쉽게 분리 할 수 있습니다. 이렇게하려면 먼저 마우스로 관심있는 영역을 강조 표시하십시오. 그런 다음 마우스 오른쪽 버튼을 클릭하고 브라우저의 컨텍스트 메뉴에서 선택 소스보기를 선택 하십시오.
기계적 인조 인간
Firefox의 Android 버전에서 소스 코드를 보려면 웹 페이지의 URL 앞에 view-source :라는 텍스트를 추가하면됩니다. 예를 들어 HTML 소스를 보려면 브라우저의 주소 표시 줄에 다음 텍스트를 제출하십시오. view-source : https : // www. .
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 를 클릭하십시오.
- 드롭 다운 메뉴가 나타나면 기본 설정 옵션을 선택하십시오.
- Safari의 환경 설정이 표시됩니다. 상단 행 맨 오른쪽에있는 고급 아이콘을 클릭하십시오.
- 고급 섹션의 맨 아래에는 메뉴 표시 줄에 Show Develop menu 라는 레이블이 붙은 옵션과 빈 체크 박스가 있습니다. 이 상자를 한 번 클릭하여 체크 표시를하고 왼쪽 상단 모서리에있는 빨간색 'x'를 클릭하여 환경 설정 창을 닫습니다.
- 화면 상단에있는 개발 메뉴를 클릭하십시오.
- 드롭 다운 메뉴가 나타나면 페이지 소스 표시를 선택하십시오. 다음 키보드 단축키를 대신 사용할 수도 있습니다 : COMMAND + OPTION + U.
오페라
실행 : Linux, macOS, Windows
오페라 브라우저에서 활성 웹 페이지의 소스 코드를 보려면 Ctrl + U (macOS의 경우 COMMAND + OPTION + U) 와 같은 바로 가기 키를 사용하십시오. 현재 탭에서 소스를로드하는 것을 선호하는 경우 주소 표시 줄의 페이지 URL 왼쪽에 다음 텍스트를 입력 하고 Enter 키를 누릅니다 . view-source : (즉, view-source : https : // www. ).
Opera의 데스크톱 버전에서는 통합 된 개발자 도구를 사용하여 HTML 소스, CSS 및 기타 요소를 볼 수도 있습니다. 이 인터페이스를 실행하려면 기본적으로 기본 브라우저 창의 오른쪽에 나타납니다. 다음 키보드 바로 가기를 누릅니다. Ctrl + Shift + I (macOS의 경우 COMMAND + OPTION + I ).
Opera의 개발자 툴셋은 다음 단계를 통해 액세스 할 수도 있습니다.
- 브라우저 창의 왼쪽 상단 모서리에있는 Opera 로고를 클릭하십시오.
- 드롭 다운 메뉴가 나타나면 마우스 커서를 기타 도구 옵션 위로 가져갑니다.
- 개발자 메뉴 표시를 클릭하십시오.
- 오페라 로고를 다시 클릭하십시오.
- 드롭 다운 메뉴가 나타나면 개발자 위로 커서를 이동합니다.
- 하위 메뉴가 나타나면 개발자 도구를 클릭하십시오.
비발디
비발디 브라우저에서 페이지 소스를 보는 방법에는 여러 가지가 있습니다. 가장 간단한 방법은 활성 페이지의 코드를 새 탭에 표시하는 Ctrl + U 키보드 바로 가기를 사용하는 것입니다.
현재 URL의 앞면에 다음 텍스트를 추가하여 현재 탭에 소스 코드를 표시 할 수도 있습니다. view-source : . 예를 들면 view-source 가 될 수 있습니다. http : // www. .
또 다른 방법은 왼쪽 상단 모서리에있는 'V'로고를 클릭하여 브라우저의 도구 메뉴에서 Ctrl + Shift + I 조합 또는 개발자 도구 옵션을 사용하여 액세스 할 수있는 브라우저의 통합 개발자 도구를 사용하는 것입니다. dev 도구를 사용하면 페이지 소스에 대한 심층적 인 분석이 가능합니다.