키를 사용하여 Google에서 페이지 코드를 엽니다. Google 크롬 - 웹마스터를 위한 도구

30.08.2019

브라우저 개발자는 동일한 브라우저에서 열리는 사이트를 만드는 사람들, 즉 웹마스터의 편의를 돌보았습니다. 표준 기능에 개발자 도구를 추가했는데, 이를 통해 쉽게 열고 브라우저에서 사이트 페이지의 소스 코드 보기: HTML, CSS, JavaScript(JS), 사이트 구조에 대한 다양하고 유용한 데이터 획득, 기술적 분석 수행. 일반적으로 유용한 것들을 많이 참조하십시오.

물론 이러한 도구는 업무용 웹 사이트 제작자뿐만 아니라 소스 코드를 통해 다양한 유용한 데이터를 볼 수 있는 일반 사용자도 사용합니다.

이 글에서는 브라우저에서 웹사이트 페이지의 소스 코드를 보는 방법(웹사이트의 HTML, CSS, JavaScript 코드를 여는 방법)을 배울 것입니다.

브라우저에서 페이지의 소스 코드를 여는 방법

브라우저에서 웹페이지의 소스 코드를 여는 방법에는 두 가지가 있습니다.

단축키 사용
상황에 맞는 메뉴에서 엽니다.

Ctrl+U– 전체 사이트 페이지의 소스 코드를 별도의 새 창에서 볼 수 있는 단축키 조합입니다. 모든 브라우저의 표준: Google Chrome, Opera, Mozilla Firefox, Yandex 브라우저, IE.

다음과 같이 개발자 도구를 입력할 수도 있습니다.

페이지에서 원하는 코드, 단어 또는 텍스트를 빠르게 찾으려면 모든 브라우저에서 표준 검색 단축키 조합인 Ctrl + G를 사용할 수 있습니다.

비디오 교육:

요소 코드 보기 | 요소 탐색 | 요소를 점검하다

갑자기 전체 소스 코드를 보지 않고 별도의 부분, 페이지의 일부 영역만 표시해야 하는 경우 이전 도구는 작동하지 않습니다. 이를 위해 개발자 도구에는 아래에서 설명할 또 다른 기능이 있습니다.

페이지에서 요소의 코드를 보는 방법:

키보드 단축키를 사용하여 요소 검사에 빠르게 액세스할 수도 있습니다.

단축키(버튼):

구글 크롬: Ctrl+Shift+I 및 Ctrl+Shift+C

오페라: Ctrl+Shift+I 및 Ctrl+Shift+C

모질라 파이어폭스: Ctrl+Shift+I 및 Ctrl+Shift+C

Yandex 브라우저: Ctrl+Shift+I 및 Ctrl+Shift+C

이러한 단계를 수행하면 웹페이지의 소스 코드가 동일한 브라우저 창에서 열립니다.

모든 HTML 코드는 왼쪽의 큰 열에 있습니다. CSS 스타일은 오른쪽에 있습니다.

물론 이 방법의 장점은 사용자가 소스 코드를 변경하고 스타일을 편집할 수 있다는 것입니다. 즉, 호스팅 서버에 있는 파일을 즉시 변경하지 않고도 사이트의 스타일을 편집하고 특정 스타일이 어떻게 표시되는지 확인할 수 있습니다. 프로그램 코드를 변경하거나 추가하려면 원하는 부분이나 영역을 두 번 클릭해야 합니다. 물론, 호스팅 서버에서는 브라우저에서의 코드 수정이 이루어지지 않습니다. 따라서 앞으로는 어떤 경우에도 이 코드를 복사하여 파일에 작성해야 합니다.

이 비디오 지침에서는 개발자 도구를 사용하여 작업하는 방법을 자세히 설명하고 보여줍니다.

마찬가지로 온라인으로, 브라우저에서 바로 사이트 페이지의 소스 코드를 볼 수 있고, HTML 및 CSS 코드에 대한 기본 데이터를 얻고, 이 사이트의 파일을 컴퓨터에 다운로드할 필요 없이 변경 및 복사할 수 있습니다. .

그런데, 페이지 코드를 변경하고 저장되기를 기대한 경험이 없는 인터넷 사용자들은 실망할 것입니다. 결국 페이지를 새로 고치면 페이지의 모든 변경 사항이 사라집니다. 이것은 사이트를 해킹하기에 충분하지 않습니다 :)

Android 휴대폰에서 소스 코드를 보는 방법

또한 개발자 도구는 데스크톱 버전의 브라우저, 즉 컴퓨터와 노트북에서만 사용할 수 있다는 점에 주목하고 싶습니다. 휴대폰과 태블릿(Android, iOS)에서도 소스 코드를 볼 수 있습니다.

이렇게 하려면 검사 중인 페이지의 URL에 view-source 접두어를 추가하세요.

예를 들어:

보기 소스:https://site/turbo-rezhim-opera/

인터넷에 게시된 사이트의 파일과 코드에 영향을 주지 않고 사이트 자체의 모든 변경 사항을 빠르게 확인해야 합니다. 예를 들어, 블록의 색상 구성표를 변경하고, 밖으로 이동한 요소를 이동하는 등의 작업을 수행합니다.

이를 위해 많은 웹마스터는 로컬 Denwer 또는 OpenServer 서버를 사용하여 자신의 컴퓨터에서 사이트의 전체 복사본을 실행합니다. 이 방법은 보편적이며 전문가에게 적합합니다. 다양한 스크립트 및 플러그인의 작동을 테스트하고, 디자인 변경을 실험하고, 모든 사이트 파일을 편집하고, 테스트 후에 적절한 변경 사항을 사이트에 직접 전송하는 데 사용할 수 있습니다.

웹마스터 아트와 거리가 먼 사용자의 경우 이러한 목적으로 브라우저를 사용하는 것이 좋습니다. 저는 Chrome을 사용하므로 이 특정 브라우저에 대한 스크린샷과 함께 지침을 제공하겠습니다. 비유하자면 Opera, Yandex.Browser, Mozilla Firefox 및 기타 브라우저에서 작업할 수 있는 도구의 원리는 비슷합니다.

지침 1: 브라우저에서 사이트의 전체 HTML 코드를 보는 방법

사이트의 필수 웹페이지를 엽니다. 필요한 요소를 마우스 오른쪽 버튼으로 클릭하면 사용 가능한 명령이 포함된 브라우저 상황별 드롭다운 메뉴가 나타납니다.

그림 1. Chrome 브라우저에서 웹페이지의 전체 HTML 코드 보기

중요한:예를 들어, 드롭다운 메뉴의 명령은 활성 요소(링크, 사진, 비디오)와 비활성 요소(텍스트, 배경, div)에 따라 다를 수 있습니다.

그림 2. Chrome 브라우저 드롭다운 메뉴

따라서 필요한 명령을 찾지 못한 경우 다른 곳을 마우스 오른쪽 버튼으로 클릭하거나 브라우저의 단축키를 사용하세요.

그림 1로 돌아가서 소스 웹 페이지의 모든 HTML 코드를 보는 데 필요한 명령을 보여줍니다. " 페이지 코드 보기". 명령을 클릭하면 소스 웹 페이지의 전체 코드가 포함된 새 탭이 열립니다. 이는 모든 것에 큰 장점이 됩니다. 구문 강조를 통해 볼 수 있습니다.

그림 3. 이 사이트의 코드 조각

이 도구는 찾고 있는 요소를 찾고 편집하는 데 매우 유용합니다.

웹 페이지의 모든 HTML 코드를 보는 다른 방법

더 빠른 액세스를 위해 이 도구를 호출하는 다른 방법을 사용할 수 있습니다.

그림 1에서는 키보드 단축키를 통해 이 명령을 사용할 수 있음을 알 수 있습니다. + ;

내 도메인 대신 브라우저의 주소 표시줄에 view-source:site를 붙여넣고 주소를 입력하세요.

두 방법 모두 보편적이며 모든 브라우저에서 작동합니다.

처음에는 이것이 전혀 필요한 도구가 아니라고 생각할 수도 있지만 사이트의 전체 HTML 코드를 보는 것은 코드에서 필요한 요소를 찾는 데 좋습니다. 이러한 요소는 링크, 태그, 메타 태그, 속성 및 기타 요소일 수 있습니다. .

단축키 조합 +검색 창을 열면 Chrome 브라우저의 오른쪽 상단에 나타납니다.

그림 3. 사이트 코드로 검색

검색 양식에 요청을 입력하면 화면이 발견된 첫 번째 요소로 이동하며 화살표를 사용하여 요소 사이를 이동하고 필요한 요소를 선택할 수 있습니다.

그림 4. HTML 사이트 코드로 검색

지침 2: Google Chrome 브라우저에서 사이트의 HTML 및 CSS 코드를 보고 편집하는 방법

이제 가장 중요한 부분인 브라우저에서 웹사이트의 HTML 및 CSS 코드를 편집하는 방법을 보여드리겠습니다. 그런 다음 변경 사항을 브라우저로 전송합니다.

이 유용한 도구는 브라우저에서 항상 사용할 수 있습니다. 사이트를 더 쉽게 편집할 수 있는 다른 명령을 실험해 보세요.

웹페이지를 열면 사이트의 유형과 초점에 따라 변하지 않는 일반적인 요소가 포함되어 있습니다. 예제 4.1에서는 기본 태그가 포함된 간단한 문서의 코드를 보여줍니다.

예제 4.1. 웹페이지 소스코드

예제 웹페이지

표제

첫 번째 단락.

두 번째 단락.

이 예제의 내용을 복사하여 c:\www\ 폴더에 example41.html로 저장합니다. 그런 다음 브라우저를 시작하고 메뉴 항목을 통해 파일을 엽니다. 파일 > 파일 열기(Ctrl+O). 문서 선택 대화 상자에서 example41.html 파일을 선택합니다. 그림 1에 표시된 웹 페이지가 브라우저에서 열립니다. 4.1.

쌀. 4.1. 예제 실행 결과

요소현재 문서의 유형(DTD(문서 유형 정의, 문서 유형 설명))을 나타내기 위한 것입니다. 이는 HTML이 여러 버전으로 존재하고 HTML과 유사하지만 구문이 다른 XHTML(EXtensible HyperText Markup Language)이 있기 때문에 브라우저가 현재 웹 페이지를 해석하는 방법을 이해하는 데 필요합니다. 브라우저가 "혼란스럽지 않고" 웹 페이지를 표시할 표준을 이해하려면 코드의 첫 번째 줄에 설정해야 합니다. .

여러 종류가 있습니다, 대상으로 삼는 HTML 버전에 따라 다릅니다. 테이블에 4.1. 설명과 함께 주요 유형의 문서가 제공됩니다.

테이블 4.1. 유효한 DTD

문서 유형	설명
HTML 4.01
	엄격한 HTML 구문.
	전환 HTML 구문.
	HTML 문서는 프레임을 사용합니다.
HTML5
	이 HTML 버전에는 문서 유형이 하나만 있습니다.
XHTML 1.0
	엄격한 XHTML 구문.
	XHTML 전환 구문.
	문서는 XHTML로 작성되었으며 프레임을 포함합니다.
XHTML 1.1
	XHTML 1.1 개발자들은 XHTML 1.1이 점진적으로 HTML을 대체할 것으로 기대하고 있습니다. 보시다시피, 이 정의는 구문이 동일하고 명확한 규칙을 따르기 때문에 유형으로 구분되지 않습니다.

엄격한 문서 설명과 과도기적 문서 설명의 차이점은 문서 코드 작성에 대한 접근 방식이 다르다는 것입니다. 엄격한 HTML은 HTML 사양을 엄격하게 준수해야 하며 엄격합니다. 전환 HTML은 일부 코드 결함에 대해 더 완화되어 있으므로 특정 경우에는 이 유형을 사용하는 것이 좋습니다.

예를 들어 엄격한 HTML 및 XHTML에서는 태그가 필요합니다. , 전환 HTML에서는 생략되거나 지정되지 않을 수 있습니다. 동시에 우리는 브라우저가 구문과 일치하는지 여부에 관계없이 어떤 경우에도 문서를 표시한다는 것을 기억합니다. 이 검사는 유효성 검사기를 사용하여 수행되며 주로 개발자가 문서의 오류를 추적하는 데 사용됩니다.</p> <p>앞으로는 주로 엄격한 방법을 사용할 것입니다.<!DOCTYPE>, 별도의 규정이없는. 이를 통해 우리는 일반적인 실수를 방지하고 구문적으로 올바른 코드를 작성하는 방법을 배울 수 있습니다.</p> <p>HTML 코드를 사용하지 않고도 HTML 코드를 찾을 수 있는 경우가 많습니다.<!DOCTYPE>, 이 경우 웹페이지는 계속 표시됩니다. 그러나 브라우저를 사용하면 동일한 문서가 브라우저에서 다르게 나타나는 경우가 발생할 수 있습니다.<!DOCTYPE>그리고 그것 없이는. 게다가, 브라우저는 그러한 문서를 자신만의 방식으로 표시할 수 있으며, 그 결과 페이지가 "무너져"집니다. 개발자가 요구하는 것과는 완전히 다르게 표시됩니다. 이러한 상황을 피하려면 항상 다음을 추가하십시오.<!DOCTYPE>문서의 시작 부분에.</p><p>꼬리표 <html>HTML 파일의 시작 부분을 정의하며 헤더는 그 안에 저장됩니다( <head>) 및 문서 본문( <body> ).</p><p>블록이라고도 하는 문서 제목 <head>, 텍스트와 태그를 포함할 수 있지만 이 섹션의 콘텐츠는 컨테이너를 제외하고 페이지에 직접 표시되지 않습니다. <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>꼬리표 <meta>보편적이며 특히 메타 태그를 사용하여 전체 기능 클래스를 추가합니다. 이 태그는 일반적으로 호출되므로 페이지 인코딩을 변경하고 키워드, 문서 설명 등을 추가할 수 있습니다. 브라우저가 UTF-8 인코딩(유니코드 변환 형식, 유니코드 변환 형식)을 처리하고 있음을 이해하고 이 행이 추가됩니다.</p><p> <title>예제 웹페이지

꼬리표 웹페이지의 제목을 결정합니다. 이는 많은 문제를 해결하기 위해 설계된 중요한 요소 중 하나입니다. Windows 운영 체제에서는 제목 텍스트가 브라우저 창의 왼쪽 상단에 표시됩니다(그림 4.2).</p> <p><img src='https://i2.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>쌀. 4.2. 브라우저의 헤더 보기</p> <p>꼬리표 <title>필수이며 반드시 문서 코드에 있어야 합니다.</p><p>닫는 태그를 추가해야 합니다.</head>문서 제목 블록이 완료되었음을 나타냅니다.</p><p>문서 본문 <body>웹페이지의 태그와 콘텐츠를 배치하기 위한 것입니다.</p><p> <h1>표제</h1> </p><p>HTML은 제목 다음 섹션의 상대적 중요성을 나타내는 다양한 수준의 6개 텍스트 제목을 제공합니다. 응, 태그해 <h1>가장 중요한 첫 번째 수준 제목을 나타내며 태그는 <h6>여섯 번째 수준 제목을 나타내는 역할을 하며 가장 중요하지 않습니다. 기본적으로 첫 번째 수준 제목은 가장 큰 굵은 글꼴로 표시되고 이후 수준 제목은 크기가 더 작습니다. 태그 <h1>...<h6>블록 요소를 참조하면 항상 새 줄에서 시작하고 그 뒤에 다른 요소가 다음 줄에 나타납니다. 또한 제목 앞뒤에 공백이 추가됩니다.</p><p>  </p><p>일부 텍스트는 주석을 달아 브라우저에 표시되지 않도록 숨길 수 있습니다. 이 텍스트는 사용자에게는 보이지 않지만 문서에는 계속 전송되기 때문에 소스코드를 살펴보면 숨겨진 메모를 발견할 수 있습니다.</p> <p>오랫동안 "페이지 소스 표시" 옵션은 나에게 쓸모없고 흥미롭지 않았습니다. 지금까지 Codecademy에서 HTML을 배우고 나만의 웹사이트를 디자인하는 것은 나의 새로운 취미로 성장하지 못했습니다. 여기에서 질문이 생겼습니다. 실제 사례를 찾고 "돼지 저금통"에 대한 흥미로운 솔루션을 빌릴 수 있는 곳은 어디입니까? 모든 기발한 일이 그렇듯이 대답은 예상외로 간단했습니다. Chrome에서 페이지의 소스 코드를 살펴보세요! 나는 겸손한 발견을 여러분과 공유합니다.</p> <h2>페이지 소스 코드는 무엇입니까</h2> <p>나처럼 HTML 프로그래밍의 첫 번째 단계를 시작하는 경우 페이지의 소스 코드가 무엇인지 알아내는 것이 좋습니다.</p> <p>HTML 페이지 코드라고도 하는 소스 코드는 HTML(Hyper Text Markup Language)의 텍스트입니다. 여기에는 실제 페이지 콘텐츠(텍스트, 표)와 태그가 포함됩니다. 후자는 콘텐츠를 표시하는 방법, 사용할 형식 유형, 하이퍼링크나 미디어 파일을 삽입할 위치 등 브라우저에 대한 지침 역할을 합니다. 음, 초보 프로그래머인 우리에게 소스 코드는 최고의 훈련장입니다. 흥미로운 사이트를 찾아 이를 염탐하고, 저장하고, 성공적인 조각을 사용합니다. 어떻게?</p> <h2>Google Chrome 브라우저 페이지에서 소스 코드를 보는 방법</h2> <p>마음에 드는 페이지를 찾아보세요. 예를 들어 저는 사이트 메뉴 디자인에 관심이 있었습니다. Google Chrome 브라우저에서 소스 코드를 여는 방법에는 세 가지가 있습니다.</p> <ol><li>아이콘을 클릭하세요 <b>메뉴</b>브라우저 오른쪽 상단에서 '추가 도구'를 선택하세요. 그중에는 "소스 코드 보기" 옵션이 있습니다. 솔직히 저는 이 방법을 거의 사용하지 않습니다. 불필요한 움직임이 많이 있습니다. 더욱 간단하게 만들 수 있습니다.</li> <li>키 조합을 누르세요 <b>Ctrl+U</b>– 소스 코드가 포함된 새 창이 열립니다.</li> <li>상황에 맞는 메뉴를 좋아하는 경우: 페이지를 마우스 오른쪽 버튼으로 클릭하고 '페이지 코드 보기' 옵션을 선택하세요.</li> </ol><p>우리는 브라우저에서 페이지의 HTML 코드를 보는 작업에 대처했습니다. 가장 흥미로운 단계로 넘어 갑시다.</p> <h2>소스코드 편집 및 저장 방법</h2> <p>웹사이트를 만드는 방법을 배우려면 다른 사람의 HTML 코드를 읽는 것만으로는 충분하지 않습니다. 가지고 놀고, 실험하고, 변경하고, 결과를 확인해야 합니다. 몇 가지 성공적인 샘플을 컴파일하여 시작할 수도 있습니다. 소스코드를 편집하고 저장하는 방법은 무엇입니까?</p> <p>옵션 1. “수동”</p> <p>페이지의 소스 코드를 연 후 컨텍스트 메뉴를 호출하고 "다른 이름으로 저장" 옵션을 선택한 다음 파일을 하드 드라이브에 저장합니다. 메모장이나 메모장에서 파일을 편집하고 변경 사항을 저장한 다음 브라우저를 통해 엽니다. 변경 결과(성공 여부)가 브라우저 창에 반영됩니다.</p><p>옵션 2. 전문가용</p> <p>매일 소스코드를 가지고 "플레이"하다 보면 "저장-열기-변경-저장-확인"이라는 과정이 지치게 됩니다. 나 자신을 위해 Google Chrome용 플러그인인 Firebug Lite를 설치하는 형태로 솔루션을 찾았습니다. 브라우저 창을 떠나지 않고도 소스 코드를 편집하고 저장할 수 있습니다.</p> <p>그래서 오늘 우리는 웹사이트를 디자인할 때 삶을 더 쉽게 만들어주는 웹 마스터를 위한 몇 가지 유용한 도구를 살펴보겠습니다. Google Chrome의 웹 마스터용 콘솔부터 시작해 보겠습니다. 그리고 웹사이트 레이아웃 중에 웹마스터에게 가장 자주 묻는 질문을 살펴보겠습니다.</p> <p>콘솔로 이동하려면 Google Chrome에서 웹사이트를 열고 웹페이지 아무 곳이나 마우스 오른쪽 버튼으로 클릭한 다음 상황에 맞는 드롭다운 메뉴에서 "페이지 코드 보기"를 선택하거나 "코드 보기"를 선택하여 연구할 특정 요소를 선택하세요. 요소".</p> <p>상단에는 여러 탭이 나열되어 있습니다. 오늘은 "요소"탭에 대해 이야기하겠습니다. <b>, </b>태그 강조 표시, 속성 강조 표시, 요소 중첩 강조 표시, DOM 트리의 요소 계층 구조 표시(하단에 루트 상위에서 현재 상위까지의 힌트), 기능이 포함된 웹 페이지 요소를 표시합니다. 요소, 해당 속성 목록을 편집하려면 요소별 검색을 고려하고 요소와 관련된 CSS 스타일 등을 보는 방법을 알아보세요.</p> <h3>특정 요소와 관련된 모든 스타일을 보려면 어떻게 해야 합니까? 지금은 어느 것이 사용되나요? 어떤 파일에 위치합니까?</h3> <p>따라서 이보다 더 쉬울 수는 없습니다! Google Chrome 브라우저를 열고 질문의 소스인 사이트를 열고 페이지 컨텍스트에 표시되는 경우 원하는 요소를 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 메뉴에서 "요소 코드 보기"를 선택합니다.</p> <p>하단에는 왼쪽 "요소"에 강조 표시된 탭이 있고 오른쪽에 요소와 관련된 모든 스타일이 있는 콘솔이 있습니다. <b>계산된 스타일</b>– 이는 사용자 브라우저(환경)의 CSS 규칙 및 설정에서 요소에 할당된 일반적인 "요약" 스타일이며 동시에 탭이 축소됩니다.</p> <p>그러나 우리는 그 아래에 확장된 "스타일" 탭에 관심이 있습니다. 이 탭에는 요소에 할당된 모든 스타일이 나열되어 있으며 이러한 규칙이 유형, ID, 클래스, 이름, 속성별로 이 요소에 대해 지정된 파일도 있습니다. , 속성 등. 또한 CSS 규칙에 줄이 그어져 있으면 이전/나중에 재정의되었음을 의미합니다(이는 어떤 CSS 규칙이 우선순위를 가지며 이 경우 요소에 적용되는지 쉽게 추적할 수 있음).</p> <p>콘솔 아래에는 문서 계층 구조의 요소를 표시하는 줄이 있어 루트부터 선택한 요소까지 상위 요소의 전체 목록을 쉽게 볼 수 있습니다. "빵 부스러기"와 같은 것.</p> <h3>HTML 태그가 페이지 컨텍스트에 표시되지 않습니까? 아니면 특정 클래스, 이름, 속성, 유형 등을 기준으로 모든 태그를 찾아야 합니까?</h3> <p>Chrome에서 사이트를 열고 마우스 오른쪽 버튼을 클릭한 후 상황에 맞는 메뉴를 불러온 다음 <b>« </b>페이지 코드 보기 <b>» </b>. "CTRL + F"키 조합을 동시에 누르고 필요한 문구를 입력하십시오 ( <b>예를 들어</b><i>: </i><i>수업 =”</i><i>심"</i>) 검색된 결과 목록을 이동하면서 페이지 오른쪽에서 원하는 요소와 관련된 모든 스타일을 동시에 볼 수 있습니다.</p> <h3>동적으로 로드된 요소의 HTML 코드를 보는 방법(예: Ajax를 통해)</h3> <p>Google Chrome에 페이지가 로드되기를 기다리고 있습니다. Ajax가 작동하는 데 필요한 작업을 수행합니다. 로드된 데이터를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 “요소 코드 보기”를 선택한 후 콘솔의 왼쪽 “요소” 탭에서 결과를 확인합니다.</p> <h3>CSS 스타일 변경 사항을 실시간으로 확인하세요.</h3> <p>그런데 필요한 경우 예를 들어 갤러리 및 기타 타이머 이벤트를 스크롤할 때 요소에 어떤 스타일이 할당되어 있는지 즉시 관찰하는 것도 편리합니다. 실시간으로 자바스크립트를 통해 할당된 모든 스타일이 속성에 표시됩니다. <b>스타일</b>"요소" 탭의 창에서 요소를 선택했습니다.</p> <h3>HTML 태그 표시에 대한 CSS 규칙의 영향을 대화식으로 확인합니다.</h3> <p>Google Chrome은 CSS 스타일에 대한 대화형 콘솔을 제공합니다. 즉, 요소에 어떤 스타일이 적용되었는지 볼 수 있을 뿐만 아니라 특정 CSS 속성 위로 마우스 커서를 이동하고, 오른쪽의 팝업 확인란을 사용하여 활성화하거나, 플래그를 지워 비활성화하고, 볼 수도 있습니다. 페이지의 결과 결과입니다.</p> <h3>html 요소 표시 구조를 즉시 변경합니다(브라우저에서 직접).</h3> <p>따라서 우리는 이미 Chrome에서 웹 문서의 구조를 탐색하는 방법을 배웠으며 이제 즉시 편집 요소를 간략하게 살펴보겠습니다. 우리는 우리에게 편리한 방식으로 콘솔로 이동합니다. "요소" 탭에서 원하는 요소를 찾아 마우스 오른쪽 버튼으로 클릭하면 상황에 맞는 팝업 메뉴가 열립니다.</p> <ul><li><b>속성 추가</b>– 지정된 요소에 대한 속성을 추가합니다. 커서가 활성화되자마자 원하는 속성을 설정하기 시작합니다. <b>예를 들어</b>: name="itemImage"를 작성하면 요소에 즉시 추가됩니다.</li> <li><b>속성 편집</b>– 요소 속성을 마우스 오른쪽 버튼으로 클릭하면 해당 항목을 사용할 수 있게 됩니다. <b>편집하다</b><b>기인하다</b>. 클릭하고 편집하세요.</li> </ul><p><b>사용 예:</b> Google Chrome에서 별표 아래에 저장된 비밀번호를 잊어버렸습니다(비밀번호가 이 브라우저에 저장된 경우). 비밀번호가 입력된 요소를 마우스 오른쪽 버튼으로 클릭하고 "요소 코드 보기"를 클릭합니다. <b>, </b>콘솔의 왼쪽 탭에 <b>강요</b> type="password" 속성을 마우스 오른쪽 버튼으로 클릭하고 <b>편집하다</b><b>기인하다</b>속성을 변경하다 <i>유형 =”</i><i>비밀번호"</i>~에 <i>유형 =”</i><i>텍스트"</i>, 이제 별표 대신 동일한 비밀번호가 텍스트 형식으로 표시됩니다.</p> <ul><li><b>편집하다</b><b>HTML</b>– 콘솔에서 요소를 마우스 오른쪽 버튼으로 클릭 <b>강요</b>, 선택하다 <b>편집하다</b><b>HTML,</b>원하는대로 코드를 변경하십시오.</li> <li><b>복사</b><b>~처럼</b><b>HTML</b>– 메모장이나 정확히 동일한 레이아웃을 적용해야 하는 기타 목적을 위해 추가 조사에 필요한 HTML 부분을 복사합니다. 우리는 시간을 절약합니다.</li> <li><b>복사</b><b>XPATH</b>– 상위 요소의 루트에서 선택한 요소로 구조의 XPATH 표현을 복사합니다.</li> <li><b>삭제</b><b>마디</b>– 웹 페이지의 컨텍스트에서 현재 선택한 요소와 모든 하위 요소를 제거하고 결과를 확인해야 하는 경우.</li> <li><b>단어</b><b>포장하다</b>– 콘솔 컨텍스트에서 웹 페이지 보기를 렌더링합니다. <b>강요</b>더 읽기 쉽습니다.</li> </ul><p>다음 기사에서 우리는 웹마스터를 위한 도구를 계속해서 고려할 것이며, 특히 웹마스터를 위한 도구의 나머지 탭에 대해 알게 될 것입니다. <b>구글 크롬</b>, 또한 다른 브라우저를 사용하여 자바스크립트 오류를 디버깅하는 것도 고려해 보세요.</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="찾다" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>최근 항목</span></h3> <ul> <li> <a href="https://olegshein.ru/ko/applied/optimizaciya-operativnoi-pamyati-dlya-windows-xp-programmy-dlya-ochistki/">RAM 청소 프로그램</a> </li> <li> <a href="https://olegshein.ru/ko/contacts-and-messages/prilozhenie-chtob-govorit-po-internetu-luchshie-prilozheniya/">데이트와 커뮤니케이션을 위한 최고의 앱</a> </li> <li> <a href="https://olegshein.ru/ko/applied/krymskii-rouming-ot-megafona-stoimost-zvonkov-sms-i/">Megafon의 크림 로밍 : 통화, SMS 및 인터넷 비용</a> </li> <li> <a href="https://olegshein.ru/ko/instructions/pri-skanirovanii-prosmotr-mac-os-kontrast-izobrazheniya-kak/">OS X에서 문서와 사진을 스캔하는 방법</a> </li> <li> <a href="https://olegshein.ru/ko/security/blade-soul-zapuskaetsya-oshibka-1073-oshibki-blade-and-soul-i-sposoby-ih/">블레이드 앤 소울 오류 및 해결 방법</a> </li> <li> <a href="https://olegshein.ru/ko/security/kak-nastroit-monitor-dlya-pravilnoi-cvetoperedachi-s-pomoshchyu-po/">지침: 노트북 화면 보정 - 연색성 조정 모니터의 연색성 불량</a> </li> <li> <a href="https://olegshein.ru/ko/security/pochemu-gnezdo-usb-ne-rabotaet-kak-otklyuchit-ili-vklyuchit-usb-porty-v/">Windows에서 USB 포트를 비활성화하거나 활성화하는 방법</a> </li> <li> <a href="https://olegshein.ru/ko/contacts-and-messages/tipovye-neispravnosti-telefonov-lg-problemy-s-lg-g3-poprobuite-nashi-resheniya/">LG 휴대폰의 일반적인 결함</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">2024년 <a href="https://olegshein.ru/ko/" title="olegshein.ru"><span>olegshein.ru</span></a>. Oleg Shein의 컴퓨터 클럽. <br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">질문이 있으신가요?</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">이름</label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">이메일 <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">메시지 <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-buttons"> <div class="pweb-field"> <button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">보내다</button> </div> </div> </div> </div> </div> <div class="pweb-msg pweb-msg-after"> <div id="pwebcontact1_msg" class="pweb-progress"> <script type="text/javascript"> document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..." </script> </div> </div> <input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token"> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(function() { jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block"); new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), { 'background_color': '#000000', 'color': '#ffffff', 'max_width': 250, 'opacity': 0.95, 'position': 'center' }); }); </script> <script type="text/javascript"> jQuery(document).on('ready post-load', function() { jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox'); }); jQuery(document).on('ready post-load', easy_fancybox_handler); jQuery(document).on('ready', easy_fancybox_auto); </script> <div id="mistape_dialog" data-mode="comment" data-dry-run="0"> <div class="dialog__overlay"></div> <div class="dialog__content"> <div id="mistape_confirm_dialog" class="mistape_dialog_screen"> <div class="dialog-wrap"> <div class="dialog-wrap-top"> <h2>오타 신고</h2> <div class="mistape_dialog_block"> <h3>편집자에게 전송될 텍스트:</h3> <div id="mistape_reported_text"></div> </div> </div> <div class="dialog-wrap-bottom"> <div class="mistape_dialog_block comment"> <h3><label for="mistape_comment">귀하의 의견(선택사항):</label></h3> <textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea> </div> <div class="pos-relative"> </div> </div> </div> <div class="mistape_dialog_block"> <a class="mistape_action" data-action="send" data-id="389" role="button">보내다</a> <a class="mistape_action" data-dialog-close role="button" style="display:none">취소</a> </div> <div class="mistape-letter-front letter-part"> <div class="front-left"></div> <div class="front-right"></div> <div class="front-bottom"></div> </div> <div class="mistape-letter-back letter-part"> <div class="mistape-letter-back-top"></div> </div> <div class="mistape-letter-top letter-part"></div> </div> </div> </div> <script type="text/javascript">  </script><br> <br> </body> </html>