Chrome에서 페이지 코드를 변경하는 방법. Chrome에서 페이지의 소스 코드를 보는 방법

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

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

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

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

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

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

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

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

인터넷상의 수많은 사이트를 살펴보면 우리가 정말 좋아하는 사이트를 찾을 수 있습니다. 즉시 많은 질문이 발생합니다. 사이트가 홈메이드 코드로 만들어졌나요? 아니면 일종의 CMS로 만들어졌나요? 어떤 CSS 스타일이 있나요? 메타 태그는 무엇입니까? 등등.

웹사이트 페이지의 코드에 대한 정보를 추출하는 데 사용할 수 있는 도구가 많이 있습니다. 하지만 우리는 항상 오른쪽 마우스 버튼을 가지고 있습니다. 이것이 내 사이트를 예로 들어 우리가 사용할 것입니다.

페이지 코드를 보는 방법은 무엇입니까?

사이트 페이지의 소스 코드를 보려면 웹 페이지의 아무 영역(이미지 및 링크 제외) 위에 마우스를 올려 놓아야 합니다. 그런 다음 마우스 오른쪽 버튼을 클릭하십시오. 몇 가지 옵션이 있는 창이 열립니다(브라우저마다 약간 다를 수 있음). 예를 들어 Google Chrome 브라우저에서는 다음 명령을 사용합니다.

• 뒤쪽에;
• 앞으로;
• 재부팅;
• 다른 이름으로 저장;
• 밀봉하다;
• 러시아어로 번역;
• 페이지 코드 보기;
• 코드 보기

우리는 클릭해야합니다 페이지 코드 보기, 사이트 페이지의 HTML 코드가 우리 앞에 열립니다.

페이지 코드 보기: 주의할 점은 무엇입니까?

따라서 HTML 페이지 코드는 번호가 매겨진 줄 목록으로, 각 줄에는 이 사이트가 어떻게 만들어졌는지에 대한 정보가 담겨 있습니다. 이 엄청난 수의 기호와 특수 기호를 이해하는 방법을 빨리 배우려면 코드의 여러 섹션을 구별해야 합니다.

예를 들어, head 태그 내부의 코드 줄에는 검색 엔진과 웹마스터를 위한 정보가 포함되어 있습니다. 사이트에는 표시되지 않습니다. 여기에서 이 페이지가 어떤 키워드로 홍보되는지, 제목과 설명이 어떻게 작성되는지 확인할 수 있습니다. 또한 여기에서 링크를 찾을 수 있으며, 이를 통해 사이트에서 사용되는 Google 글꼴 제품군에 대해 알아볼 수 있습니다.

사이트가 CMS WordPress 또는 Joomla에서 만들어진 경우 여기에도 표시됩니다. 예를 들어 이 영역에는 WordPress 테마 또는 Joomla 사이트 템플릿에 대한 정보가 표시됩니다. 파란색으로 강조 표시된 링크의 내용을 읽어보면 알 수 있습니다. 한 링크는 웹사이트 템플릿을 보여줍니다.

예를 들어:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

페이지의 CSS 글꼴 스타일을 살펴보겠습니다. 이 경우 글꼴이 사용됩니다. 이는 여기에서 볼 수 있습니다 - 글꼴 모음: 'Source Sans Pro'.

이 사이트는 Yoast SEO 플러그인을 사용하여 최적화되었습니다. 이는 주석 처리된 코드 섹션에서 확인할 수 있습니다.

이 사이트는 Yoast SEO 플러그인 v3.4.2에 최적화되어 있습니다 - https://yoast.com/wordpress/plugins/seo/

body 태그 안에 포함된 모든 정보는 브라우저에 의해 모니터 화면에 표시됩니다. 여기에는 페이지의 HTML 코드가 있고 맨 아래에는 Yandex Metrics 스크립트 코드가 있습니다. 이는 다음 텍스트가 포함된 주석 처리된 태그로 둘러싸여 있습니다.

/Yandex.Metrika 카운터

요약하자면

사이트 메인 페이지의 코드를 다소 피상적으로 분석하면 이 페이지가 어떤 도구로 만들어졌는지 결론을 내릴 수 있습니다. 우리는 그것에 대해 보았습니다:

• CMS 워드프레스;
• Google 글꼴 소스 Sans Pro;
• WordPress 테마 – 시드니;
• 요스트 플러그인;
• Yandex 측정항목 카운터.

이제 웹사이트 페이지의 HTML 코드를 분석하는 원리는 매우 명확해졌습니다. 검색 중인 페이지를 브라우저에 열어둘 필요는 전혀 없습니다. ctrl+a, ctrl+c, ctrl+v 키 조합을 사용하여 페이지 코드를 컴퓨터에 저장할 수 있습니다. 텍스트 편집기(바람직하게는 Notepad++)에 붙여넣고 html 확장자로 저장하세요. 이렇게 하면 언제든지 더 깊이 공부하고 자신에게 더 유용한 정보를 찾을 수 있습니다.

우리는 소셜 미디어 콘텐츠 마케팅: 팔로어의 머리 속으로 들어가 브랜드와 사랑에 빠지게 만드는 방법이라는 새 책을 출시했습니다.

사이트의 소스 코드는 브라우저가 웹 서버로부터 수신하는 HTML 마크업, CSS 스타일 및 JavaScript 스크립트의 모음입니다.

우리 채널의 더 많은 비디오 - SEMANTICA와 함께 인터넷 마케팅을 배우십시오

이는 지휘관이 군인들에게 내리는 일련의 명령에 비유될 수 있습니다. 청중이 상사를 보거나 듣지 못한다고 상상해보십시오. 그들의 관점에서 볼 때 군대는 독립적으로 행동을 수행합니다. 우리의 경우 지휘관은 브라우저이고 명령은 소스 코드이며 행진하는 군인은 최종 결과입니다.

사이트는 사용자 요청 시 페이지를 보내는 웹 서버에 저장됩니다. 요청은 주소 표시줄에 URL을 입력하거나, 링크를 클릭하거나, 양식에서 제출 버튼을 클릭하는 것입니다. 웹 페이지가 어떤 언어로 작성되었는지 또는 소프트웨어 구성 요소가 포함되어 있는지는 중요하지 않습니다. 서버 측 알고리즘의 최종 결과는 html 태그와 텍스트 세트입니다.
페이지 소스 코드는 다음을 포함하는 데이터 세트입니다.

• HTML 마크업;
• 스타일 시트 또는 파일 링크;
• JavaScript로 작성된 프로그램 또는 코드가 포함된 파일에 대한 링크.

이 세 섹션은 브라우저에 의해 처리됩니다. 서버의 경우 이는 요청에 대한 응답으로 보내야 하는 텍스트일 뿐입니다.

소스 코드를 연구해야 하는 이유

우리가 보는 모든 것을 분석하고 적용하여 사이트 작업 중, 특히 최적화할 때 발생하는 특정 문제를 해결할 수 있습니다. 소스 코드를 살펴보면 다음을 수행할 수 있습니다.

• 귀하 또는 다른 사람 사이트의 메타 태그를 확인하여 분석하세요.
• 카운터, 다양한 시스템의 식별 코드, 특정 스크립트 등 사이트의 특정 요소의 존재 여부를 확인하세요.
• 크기, 색상, 글꼴 등 요소의 매개변수를 알아보세요.
• 페이지에 있는 사진 및 기타 요소의 경로를 찾으세요.
• 페이지의 링크를 살펴보세요.
• 별도의 파일에 배치되지 않은 스타일, 스크립트, 유효하지 않은 코드 등 사이트 최적화 과정을 방해하는 코드 문제를 찾아보세요.

이는 기본 기능이지만 실제로 코드를 읽을 수 있으면 페이지에 대해 더 많은 것을 배울 수 있습니다.

사이트의 소스 코드를 보는 방법

브라우저에서 서버에 게시되는 형태로 완전히 수행하는 것은 불가능합니다. 하지만 페이지를 마우스 오른쪽 버튼으로 클릭하면 모든 마크업을 볼 수 있습니다. 여기와 아래에서는 Google Chrome을 예로 들어 설명합니다.

"페이지 코드 보기" 옵션을 선택하고 별도의 탭에서 전체 목록을 확인하세요.

이해하기 위해 분석해야 하는 텍스트일 뿐입니다. 하지만 개발자 도구를 사용하면 대화형 코드를 얻을 수 있습니다.

웹사이트 페이지의 소스 코드를 찾는 방법

브라우저에서 메뉴 아이콘을 클릭하세요. 대부분 오른쪽에 있으며 세 개의 점이나 줄무늬처럼 보입니다.

추가 도구 섹션에서 "개발자 도구"를 선택합니다.

코드의 활성 상태를 보여주는 창이 열립니다. 즉, 마크업을 클릭하면 요소 스타일이 그 옆에 나타나고 선택한 블록이 페이지에서 강조 표시됩니다.

"소스" 탭에서는 스크립트, 글꼴, 이미지 등 일부 파일의 내용을 볼 수 있습니다.

'보안' 탭에서 해당 사이트의 인증서를 확인할 수 있습니다.

"감사" 탭은 호스팅에 게시된 리소스를 확인하는 데 도움이 됩니다.

오른쪽 패널의 위치가 불편한 경우에는 점 세개를 클릭 후 원하는 항목을 선택하여 변경할 수 있습니다.

메타 태그를 보는 방법

모든 HTML 문서에는 구조 태그가 포함되어 있습니다. 그 중 일부는 다음과 같습니다.

1. Html – 전체 문서.
2. 헤드 – 서비스 헤더 섹션입니다.
3. 제목 - 페이지 제목(탭에 표시됨)입니다.
4. 본문 – 문서의 본문입니다.
5. H1-H6 – 페이지 텍스트 제목.
6. 기사 – 기사.
7. 섹션 - 섹션.
8. 메뉴 – 메뉴.
9. Div – 차단.
10. 범위 – 문자열.
11. P – 단락.
12. 테이블 – 테이블.

요소는 필요한 경우 페이지의 섹션을 논리적으로 구분하도록 설계되었으며 스타일을 사용하여 설계되었습니다. 여기에는 페이지에 어떻게든 표시되는 텍스트가 포함되어 있습니다. 그러나 Head 태그에는 서비스 정보가 포함되어 있습니다. 이를 나타내기 위해 메타태그가 사용됩니다. 거기에 쓰여진 모든 내용은 서버와 검색 엔진을 위한 것입니다.

그 내용은 다른 어떤 방법으로도 알아낼 수 없습니다.

Link 태그에 주목해보자. 도움을 받아 외부 포함 파일에 대한 링크가 지정됩니다. 원하는 경우 내용을 확인하고 디스크에 저장할 수 있습니다. 이렇게 하려면 포인터를 주소로 이동하고 RMB를 누르십시오. "새 탭에서 열기"를 선택하세요.

지정된 파일이 새 탭에서 열리며 이를 보거나 저장할 수 있습니다.

스크립트 디버깅을 위해 페이지의 소스 코드를 보는 방법

이 경우 로컬 컴퓨터에서 페이지를 여는 것이 가장 편리합니다. 마크업, 스타일, 스크립트만 수정해야 하는 경우 폴더에서 직접 수정하면 됩니다. HTML 코드도 같은 방식으로 표시됩니다. 그러나 JavaScript 코드 오류는 "콘솔" 탭에서 볼 수 있습니다. 여기에는 오류에 대한 설명과 오류가 발생한 줄 번호가 표시됩니다.

구문은 코드에서 직접 볼 수 있습니다. 이것이 바로 "소스" 탭의 역할입니다.

특정 요소의 코드를 보는 방법

요소가 많은 대형 페이지의 경우 모든 마크업에서 필요한 코드를 찾기가 어렵습니다. 이 경우 특별한 상황에 맞는 메뉴 명령을 사용해야 합니다. 조각 위로 마우스를 이동하고 RMB를 누릅니다. "코드 보기" 명령을 선택합니다.

동일한 창이 열리지만 선택한 개체에 초점이 맞춰져 있습니다.

요약

페이지 소스코드가 무엇인지 알려드렸습니다. HTML과 CSS에 대한 기본 지식을 익히는 것으로 충분하며, 편리한 개발자 도구를 사용하여 자신의 HTML 문서를 디버깅할 수 있습니다.

인터넷에서 리소스 코드를 검토하면 자신의 경험뿐만 아니라 실제 작업 사례를 사용하여 배울 수도 있습니다. 그리고 SEO 전문가에게는 사이트에 대해 많은 것을 말해 줄 수 있는 정보인 메타 태그가 유용할 것입니다.

SendPulse 서비스는 구독 기반을 구축하고 귀하의 웹사이트를 방문하는 일반 방문자를 일반 방문자로 전환하기 위한 마케팅 도구입니다. SendPulse는 고객 유치 및 유지를 위한 가장 중요한 기능을 하나의 플랫폼에 결합합니다.
● 이메일 뉴스레터,
● 웹 푸시,
● SMS 메일링,
● SMTP,
● Viber의 뉴스레터,
● 페이스북 메신저로 메시지 보내기.

이메일 뉴스레터

푸시 알림 보내기

SMTP

페이스북 메신저 봇

SMS 보내기

제휴 프로그램

각 인터넷 사용자는 자신이 가장 좋아하는 사이트를 가지고 있으며 오랜 시간을 보냅니다. 그리고 게으른 사람만이 그것이 어떻게 만들어졌고 무엇으로 구성되어 있는지 볼 생각을 하지 않았습니다. 웹사이트를 만드는 방법은 다양하기 때문에 이러한 모든 질문에 답하는 것은 불가능합니다. 그러나 웹사이트를 구성하는 명령과 코드를 살펴보는 것은 가능하고 모든 사람이 공개적으로 사용할 수 있습니다.

또 다른 질문은 프로그래밍에 참여하지 않는 사람이 코드를 구성하는 기호를 이해할 수 있는지 여부입니다. 그러나 아래에 제시된 예를 통해 모든 Google Chrome 사용자는 사이트의 개별 요소를 볼 수 있습니다.

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

Chrome에서 페이지 코드를 보려면 관심 있는 사이트로 이동하여 다음 단계를 수행해야 합니다.

이 두 항목은 사용자, 프로그래머 또는 해커를 위한 기능과 정보가 다릅니다.

페이지 코드와 "코드 보기" 명령의 차이점은 무엇입니까?

이러한 각 기능을 분석하여 별도의 기사를 작성할 수 있습니다. 프로그래머에게 이 차이는 중요하며 Google Chrome 브라우저에서 "코드 보기"를 사용해야 하는 경우와 "페이지 코드 보기"를 사용해야 하는 경우를 이해합니다.

그러나 일반 사용자를 기준으로 설명하면 이러한 기능은 다음과 같은 목적으로 나눌 수 있습니다.

1. “페이지 코드 보기”는 페이지의 주요 조합을 보기 위해서만 필요합니다. 기본적으로 이것은 사이트의 구조입니다(CSS 파일 형태의 추가 모델 및 사이트 작성자의 폴더에 남아 있는 기타 추가 사항 없음). 이 구조는 "복사하여 붙여넣기"를 통해 자신의 페이지를 만드는 데 적합하지 않지만 Google Chrome 브라우저의 사이트가 이러한 외부 디자인을 갖도록 프로그래머가 정확히 무엇을 했는지, 어떤 순서로 수행했는지 확인할 수 있습니다.
2. "코드 보기"는 페이지에서 영향을 받는 모든 영역을 강조하여 자세한 구조를 표시합니다. 특정 목록 코드 위로 마우스를 가져가면 해당 코드가 속한 사이트의 요소가 강조 표시됩니다.
3. 페이지 코드 보기는 편집 기능 없이 별도의 브라우저에서 열립니다. 즉, 사이트 코드를 복사하고 읽는 데에만 적합합니다. 그러나 이것은 그다지 유용한 기능이 아닙니다.
4. "코드 보기"는 변경 가능하며 편리한 방식으로 모든 요소를 ​​편집할 수 있습니다. 물론 이러한 모든 변경 사항은 페이지가 새로 고쳐질 때까지 "실시간"으로 유지되지만 때로는 해당 설정을 살펴보고 이 값 또는 저 값이 필요한 이유와 변경하면 어떤 일이 발생하는지 이해하는 것이 재미있을 때도 있습니다. 그러한 행동으로 인해 자신이나 사이트에 해를 끼칠 것이라고 가정해서는 안됩니다. 이러한 변경 사항은 Chrome 코드에만 영향을 미치며 온라인에 접속되지 않습니다.

요소 코드를 어떻게 볼 수 있는지에 대한 질문을 고려 중입니다.

그러한 질문에 대답하려면 그 자체로 제안되는 유일한 옵션은 예입니다. 한 글에서 이 주제를 이해하는 사람(웹 개발자)이 되는 것은 매우 어렵지만, 질문을 해결하기 위해 예를 들어 보여주는 것이 훨씬 쉽기 때문입니다.

요소 코드의 기능은 매우 광범위하므로 Google Chrome 브라우저 웹사이트에 있는 단어 중 하나를 사용합니다. 우리 사이트에 어떤 키워드(코드에서는 "키워드"로 표시됨)가 사용되었는지 고려하고 싶었습니다. 이를 위해 다음 알고리즘을 수행합니다.

Google Chrome 브라우저에서 이 기능을 사용하는 다른 방법

일반적으로 요소의 코드를 보는 방법과 요소가 필요한 이유에 대한 질문에 계속 대답하려면 해당 기능을 나열해야 합니다. 즉, Google Chrome 브라우저에서 모든 사이트 요소의 코드를 볼 수 있는 기능 덕분에 다음을 수행할 수 있습니다.

• head(“사이트 헤더”)에서 시작하여 end(모든 프로그램의 마지막 명령)로 끝나는 사이트의 구조를 확인하세요.
• 사이트의 모든 기능, 즉 다른 사이트에 대한 링크, 외부 사이트의 추가 모듈 및 다양한 정보 수집을 위한 내장 카운터의 존재를 봅니다.
• 사이트에서 복사가 금지되어 있는지 확인하세요.
• 코드는 사이트의 다른 페이지에 대한 모든 링크는 물론 해당 페이지를 클릭한 후의 디자인 및 후속 작업을 기록합니다.

이것은 결코 유한한 목록이 아닙니다. 그러나 특별한 지식 없이는 Google 크롬 페이지의 코드를 "읽는" 것이 거의 불가능하며 일반 사용자에게는 수신된 데이터가 실제로 필요하지 않다는 점을 기억해야 합니다.

"요소 코드 보기" 항목이 작동하지 않습니다.

각 사이트는 요소 코드에 공개적으로 액세스할 수 있다고 바로 말해야 합니다. 즉, 가장 인기 있고 값비싼 사이트라도 코드를 볼 수 있게 공개됩니다. 따라서 Google Chrome 브라우저의 항목이 활성화되지 않거나 오류가 발생하는 경우 다음과 같은 이유가 있을 수 있습니다.

• 사용자 프로필이 손상되었습니다.
• 컴퓨터에 악성 코드가 존재합니다.
• 성능을 높이기 위해 특정 확장 프로그램을 차단합니다(이런 경우도 발생할 수 있음).

손상된 사용자 프로필 수정

새 프로필을 생성하려면 컴퓨터에서 이전 프로필을 삭제해야 합니다. 이를 위해 우리는 다음을 수행합니다.

1. Google Chrome을 닫고 내장된 Windows 탐색기 브라우저를 시작하세요.
2. 주소 표시줄에 %LOCALAPPDATA%\Google\Chrome\User Data\ 명령을 입력합니다.
3. 디렉토리가 열리면 "기본" 폴더를 찾아 이름에 "백업"을 추가하여 "백업 기본값"과 같이 표시되도록 하세요.
4. 이제 Chrome 브라우저를 다시 시작하면 새 프로필이 생성됩니다.

우리는 맬웨어 또는 그 잔재를 제거합니다

새 프로필이 페이지 요소 코드에 대한 액세스를 제공하지 않고 여전히 오류가 표시되는 경우 다음을 수행해야 합니다.

1. Windows 명령줄("실행")을 열고 거기에 "cmd" 명령을 입력합니다.
2. RD /S /Q “%WinDir%\System32\GroupPolicyUsers” 줄에 다음 명령을 입력합니다.
3. 작업을 확인한 후 RD /S /Q “%WinDir%\System32\GroupPolicy”를 입력합니다.
4. 이제 “gpupdate /force”(따옴표 제외).

모든 작업이 올바르게 완료되면 컴퓨터를 다시 시작한 후 Google Chrome에서 요소 코드가 열리고 브라우저가 정상적으로 작동합니다.

다음 내용을 읽어보는 것이 도움이 될 수 있습니다.

• Chrome에서 페이지의 소스 코드를 보는 방법;
• AMD Radeon 그래픽 카드 드라이버 설치 방법;
• 실험: 스마트폰의 흠집을 제거하는 방법;
• 연락처 페이지 등록 및 로그인 - VK에 로그인할 수 없는 경우 수행할 작업;
• Maryana ro의 사진. Maryana RO : 전기;
• Abstract 이메일: 역사, 개발 이메일에 관한 이야기;
• onload에서 여러 기능 실행 페이지 로딩 기능을 호출하는 방법;
• 게임 시작 시 Direct3D 초기화 오류;