코딩에 익숙하지 않은 사람은 실수로 Inspect Element를 연 후 겁을 먹기 쉽습니다. 그러나 복잡한 코드를 본 후에도 침착하게 대처한다면 Inspect Element를 사용하여 수행 방법을 알고 있다면 여러 가지 유용한(그리고 일부 유용하지 않은) 작업을 수행할 수 있습니다.
여기에서는 브라우저의 개발자 도구와 Inspect Element를 사용하여 할 수 있는 7가지 재미있는 작업을 살펴보겠습니다.
검사 요소란 무엇입니까?
Inspect Element는 웹페이지의 소스 코드를 보고 일시적으로 변경하기 위해 브라우저에서 제공하는 개발자 도구입니다. 이 도구를 사용하여 개발자와 디자이너는 모든 웹사이트의 프런트 엔드를 확인하고 수정할 수 있습니다.
코드를 변경하면 브라우저가 웹페이지를 실시간으로 계속 업데이트합니다. 이 변경 사항은 웹사이트에서 세션이 진행되는 동안에만 지속되며 한 기기에서만 볼 수 있습니다. 웹페이지를 떠나는 즉시 모든 변경 사항이 제거됩니다.
1. 이미지 및 동영상 다운로드
일반적으로 웹에서 사진을 마우스 오른쪽 버튼으로 클릭하고 저장하면 쉽게 다운로드할 수 있습니다. 하지만 모든 웹사이트에서 그렇게 할 수는 없습니다. 이 경우 요소 검사 기능이 유용합니다.
미디어 파일을 다운로드하려면 파일을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다. .
2. 헤더와 텍스트를 장난 친구로 변경
처음부터 가짜 이미지를 만드는 대신 DevTools를 사용하여 웹페이지의 텍스트를 변경하고 친구에게 장난을 칠 수 있습니다.
가짜 웹페이지를 만들려면 평판이 좋은 웹사이트의 페이지를 열고 제목을 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음 검사를 클릭합니다. 창을 엽니다. 더보기를 클릭합니다. 강조 표시된 코드의 아이콘을 클릭하고 HTML로 수정을 선택합니다. . 그런 다음 제목을 자신의 가짜 헤드라인으로 바꾸세요.
마찬가지로 발췌문, 날짜 및 작성자 이름과 같은 다른 텍스트 본문을 변경할 수 있습니다. 이미지를 변경하려면 동일한 단계를 사용하여 이미지 소스를 제거하십시오. 그런 다음 Google에서 관련 이미지를 찾아 이미지 주소를 복사하여 소스에 붙여넣습니다.
이렇게 하면 큰 어려움 없이 친구에게 장난을 칠 수 있습니다. 그러나 변경 사항은 일시적이므로 링크 대신 DevTools 창이 숨겨진 상태로 스크린샷을 보내야 합니다.
3. 웹페이지의 색상 및 글꼴 변경
Inspect Element를 사용하여 할 수 있는 또 다른 교활한 일은 웹 페이지의 색상과 글꼴을 변경하는 것입니다. 색상을 변경하려는 개체를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다. . 그런 다음 스타일에서 탭에서 색상 또는 배경색을 찾아 16진수 코드를 입력합니다. 마찬가지로 스타일 탭에서 글꼴 크기와 스타일을 변경할 수 있습니다.
이 트릭을 사용하여 웹 사이트의 모양을 변경하고 읽기 쉽게 만들 수 있습니다. 예를 들어, 웹사이트의 어두운 모드를 만들고 가독성을 높이기 위해 글꼴 크기를 늘리고 눈에 띄는 요소를 삭제하여 제거할 수 있습니다.
4. 숨겨진 비밀번호 보기
웹사이트에서 별표로 비밀번호를 숨긴 경우 웹페이지 코드를 조정하여 볼 수 있습니다. DevTools로 이동합니다. 숨겨진 암호를 마우스 오른쪽 버튼으로 클릭하여 그런 다음 입력 태그 내에서 유형을 암호에서 텍스트로 변경하고 빈 화면을 클릭합니다. 이제 비밀번호가 표시됩니다.
이 트릭은 암호를 잊어버렸지만 암호 관리자에 저장한 경우에 유용합니다. 따라서 웹페이지에서 직접 비밀번호를 확인하고 기억할 수 있습니다.
5. 웹사이트의 모바일 버전 보기
우리는 모두 휴대 전화에서 데스크톱 사이트를 보는 방법을 알고 있습니다. 그러나 Inspect Element를 사용하여 데스크탑에서 모바일 버전을 볼 수도 있습니다. 이렇게 하려면 DevTools를 엽니다. 기기 도구 모음 전환을 클릭합니다. 버튼(오른쪽 상단에서 두 번째 버튼).
마찬가지로 사용자 에이전트를 전환하고 웹사이트의 다른 버전을 볼 수 있습니다. 개발자 도구에서 더보기 왼쪽 상단 모서리에 있는 아이콘을 클릭하고 네트워크 조건을 선택합니다. 기본 브라우저 사용 선택을 취소합니다. 사용자 에이전트 상자 섹션을 클릭하고 아래 드롭다운 메뉴에서 다른 사용자 에이전트를 선택합니다.
6. 웹사이트에서 색상 선택
타사 색상 선택기 확장 프로그램을 설치하는 대신 요소 검사를 사용하여 원하는 색상을 선택할 수 있습니다. 웹페이지에서 색상을 선택하려면 요소 검사로 이동하세요. . 그런 다음 스타일 탭을 클릭하고 색상 또는 배경을 찾습니다. 이제 색상 뒤에 있는 작은 상자를 클릭하여 색상 선택기를 불러옵니다.
이제 페이지의 아무 곳이나 클릭하여 색상을 선택하고 스타일에서 16진수 코드를 복사할 수 있습니다. 탭. RGB 또는 HSLA 코드를 원하는 경우 화살표를 사용하여 볼 수 있습니다. 버튼.
따라서 웹사이트에서 나중에 사용하고 싶은 멋진 색상을 볼 때마다 Inspect Element를 사용하고 참조용으로 코드를 저장하기만 하면 됩니다.
7. 확장 프로그램 없이 스크린샷 찍기
DevTools를 사용하면 깨끗하고 선명한 스크린샷을 찍을 수도 있습니다. 스크린샷을 찍으려면 DevTools를 엽니다. , 더보기를 클릭합니다. 아이콘을 클릭하고 명령 실행을 선택합니다. . 검색 상자에 스크린샷을 입력합니다. 4가지 유형의 스크린샷 캡처 옵션이 표시됩니다.
영역 스크린샷을 선택하여 창의 특정 영역을 강조 표시할 수 있으며 브라우저는 이를 PNG 파일로 저장합니다.
전체 크기 스크린샷을 캡처하면 화면에 표시되지 않는 항목을 포함하여 전체 웹 페이지의 이미지가 저장됩니다. 노드 스크린샷은 특정 요소의 이미지만 캡처합니다. 마지막으로 스크린샷 캡처 옵션은 화면에 보이는 모든 이미지를 저장합니다.
요소 검사의 숨겨진 트릭 배우기
이것은 Inspect Element를 사용하여 수행할 수 있는 몇 가지 트릭일 뿐입니다. DevTools를 사용하여 수행할 수 있는 다른 유용한 작업이 많이 있습니다.
따라서 고급 사용자가 되어 친구들에게 깊은 인상을 남기고 싶다면 DevTools의 숨겨진 기능에 대해 알아보는 것이 좋습니다.