Element Inspector 팁: 꼭 알아야 할 8가지 팁! 🛠️

브라우저의 Element Inspector는 개발자 전용 도구처럼 보일 수 있지만, 프로그래밍에 대해 아무것도 모르더라도 실제로 멋진 작업을 할 수 있습니다! 🚀

1 . 이미지 다운로드

웹사이트에서 이미지를 다운로드해야 할 수도 있습니다. 마우스 오른쪽 버튼을 클릭하고 "이미지 저장"을 클릭하려고 하면 해당 옵션이 회색으로 표시되거나 "이미지 저장" 버튼이 나타나지 않습니다. 전체 파일이 아닌 이미지의 썸네일만 다운로드할 수 있는 경우도 있습니다. 🤔 무슨 일이야?

개발자는 종종 의도적으로 이 "이미지 저장" 버튼을 비활성화하거나 이런 방식으로 이미지를 다운로드할 수 없는 웹 프레임워크를 사용합니다. 하지만 Elements 검사기에는 편리한 해결책이 있습니다. 세 가지 간단한 단계만 거치면 웹사이트의 모든 이미지 리소스를 전체 크기로 얻을 수 있습니다. 📸

1단계

하다 마우스 오른쪽 버튼을 클릭하세요 페이지의 어느 곳에서나 "요소 검사" 또는 "검사"를 선택하세요. 브라우저 내에서 검사기의 특정 단축키를 사용할 수도 있습니다. F12 대부분의 브라우저에서 작동합니다 및 운영 체제. 이 데모에서는 Firefox를 사용했지만 단계는 동일합니다. 🖱️

2단계

Element Inspector 창 내부에서 "네트워크" 탭을 클릭합니다. 네트워크 탭에는 하위 메뉴 중 하나로 "이미지"가 있어야 합니다. "이미지"를 클릭하세요. 🖼️

이제 페이지를 다시 로드하면 모든 이미지 리소스가 "이미지" 탭에 나타납니다. 사용하세요 주소창 옆에 있는 새로 고침 버튼 브라우저에서 또는 Ctrl+R을 누르세요. 🔄

3단계

이제 다 보셨죠. 전체 이미지 라이브러리가 목록에 로드되어야 합니다. 이 목록은 동적으로 업데이트되므로, 웹사이트에 더 많은 이미지가 업로드되면 여기에도 표시됩니다. 🖼️✨

파일 위에 마우스를 올리면 미리보기와 크기를 볼 수 있습니다. 파일을 두 번 클릭하면 새 탭에서 열리고, 오른쪽 클릭 메뉴를 사용하여 파일을 저장할 수 있습니다. 💾

2 . 비디오 다운로드

이미지 자산과 마찬가지로 웹사이트에서는 때때로 다음을 허용하지 않습니다. 해고하다 비디오를 직접 보세요. 하지만 요소 검사기에서 로드하여 다운로드할 수 있습니다. 파일을 검사기에 로드한 후 파일 이름을 두 번 클릭하면 새 탭에서 열립니다. 🎥

1단계

F12 키보드 단축키를 눌러 Element Inspector 창을 엽니다(대부분 시스템에서 작동). 또는 웹 페이지의 아무 곳이나 마우스 오른쪽 버튼을 클릭하고 "검사"를 선택할 수 있습니다. 요소 검사기 창이 나타납니다. 🖱️

2단계

"네트워크" 탭을 클릭한 다음 "미디어"를 클릭하여 비디오 파일을 제외한 모든 항목을 필터링합니다. 페이지를 새로 고침하세요. 브라우저의 새로 고침 버튼을 클릭하거나 Ctrl+R을 누르세요. 🔄

3단계

비디오 파일이 목록에 로드되어야 합니다. 즉시 미리 볼 수는 없지만, 파일을 두 번 클릭하면 새 탭에서 열 수 있습니다. 거기에서 마우스 오른쪽 버튼을 클릭하여 다운로드할 수 있습니다. 🎬

3 . 전체 페이지 스크린샷 캡처

전체 웹 페이지를 저장하려면 PDF나 HTML 파일로 빠르게 다운로드할 수 있습니다. 하지만 전체 페이지의 스크린샷을 정기적으로 찍고 싶다면 어떻게 해야 할까요? 여기 어떻게 하는지 설명해 드릴게요. 📸

Firefox에는 컨텍스트 메뉴에 전용 스크린샷 도구가 있으므로 이를 수행하는 방법을 보여드리겠습니다. 구글 크롬 및 기타 브라우저. 🌐

페이지의 아무 곳이나 마우스 오른쪽 버튼을 클릭하거나 F12를 눌러 검사기 도구를 엽니다.

Ctrl+Shift+P를 눌러 실행 창을 엽니다. 나는 썼다 캡처 캡처 풀사이즈 화면 이 창에서. 클릭해 보세요. 📄

"다른 이름으로 저장" 창이 즉시 나타나서 전체 페이지 스크린샷을 JPG 형식으로 저장할 수 있습니다. 💾

4 . 전화 통화를 하고 있다고 가정해 보세요

대부분의 웹사이트는 기기 유형과 화면 크기에 따라 다르게 로드됩니다. 어떤 이유로든 다른 기기를 사용하고 있다고 사이트를 속이고 싶다면 검사기 도구를 사용하면 쉽게 그렇게 할 수 있습니다. 📱

Chrome에서는 마우스 오른쪽 버튼 메뉴나 F12를 눌러 요소 검사기 창을 엽니다. 그런 다음 왼쪽 상단 모서리에 있는 작은 노트북 및 휴대전화 아이콘을 클릭하세요. Firefox에는 반응형 디자인 모드(Ctrl+Shift+M)라는 비슷한 버튼이 있습니다. 🖥️

에뮬레이션할 수 있는 장치 목록이 표시되고 크기를 수동으로 조정할 수도 있습니다. 화면. 모바일 기기를 선택하면 브라우저에서도 터치 제스처를 시뮬레이션한다는 것을 알 수 있습니다. 📱✨

5 . 소스 식별

이 팁은 창의적인 사람들을 위한 것이지만, 웹사이트의 글꼴에 대해 궁금한 사람이라면 누구나 이 요령을 활용할 수 있습니다. 당신은 사용할 수 있습니다 식별하기 위한 검사 도구 그리고 가끔은 글꼴을 다운로드하기도 합니다. 🖋️

먼저, 요소 검사기 도구를 엽니다. 다음으로, "네트워크" 탭을 클릭합니다(오버플로 메뉴에 숨겨져 있을 수 있음) 그리고 "소스"를 선택합니다.

그런 다음 Ctrl+R을 누릅니다. 렌더링된 글꼴은 아마도 WOFF 형식으로 목록에 로드됩니다. 글꼴 이름을 두 번 클릭하면 직접 다운로드할 수 있습니다. 예를 들어, How-To Geek는 기본 글꼴로 Roboto를 사용합니다. 🔤

글꼴에 대한 더 자세한 정보가 필요하면 "요소" 탭으로 이동하여 "스타일"을 선택하세요. 아래로 스크롤하여 글꼴 패밀리 속성을 클릭합니다. 해당 텍스트는 웹사이트에 표시됩니다. 이렇게 하면 출처를 정확하게 식별할 수 있습니다. 🎨

6 . 페이지의 텍스트 편집(일시적으로)

검사기를 사용하여 웹 페이지의 거의 모든 것을 일시적으로 편집할 수 있다는 것을 알고 계셨나요? 이 도구를 사용하면 웹사이트를 구성하는 코드를 편집할 수 있습니다. 코드를 알고 있다면 원하는 대로 페이지를 만들 수 있습니다(페이지를 다시 로드하기 전까지는 사용자의 컴퓨터에서만 가능합니다). 🛠️

코딩에 대한 지식이 없더라도 모든 웹 페이지의 기본 텍스트를 편집할 수 있습니다. 친구에게 재밌는 장난을 치는 것도 방법입니다. 😉

편집하려는 페이지에서 텍스트를 강조 표시하고 마우스 오른쪽 버튼을 클릭하세요. 그런 다음 "검사" 또는 "요소 검사"를 선택합니다.

관련 텍스트 조각이 요소 탭에 나타날 것입니다. 간단히 두 번 클릭하여 텍스트를 원하는 내용으로 바꾸세요. ✏️

요소 검사기를 닫으면 완료됩니다! 페이지를 새로 고침하면 변경 사항이 취소됩니다. 🔄

7 . 항목 삭제

텍스트를 편집하는 것과 마찬가지로 웹 페이지에서 특정 요소를 삭제할 수도 있습니다. 다시 말해, 변경 사항은 페이지를 다시 로드할 때까지만 지속됩니다. ❌

삭제하려는 항목을 마우스 오른쪽 버튼으로 클릭한 다음 "검사" 또는 "요소 검사"를 선택합니다.

라벨 위에 마우스를 올려 놓으세요.

"전체 요소가 강조 표시될 때까지. 그런 다음 Delete 키를 누르세요. 🔚

그렇게 사라져 버렸어요! 🕵️‍♂️

8 . 색상 값 식별

크리에이티브를 위한 또 다른 팁: 어떤 RGB 및 HEX 값도 얻을 수 있습니다. 웹 페이지의 색상 요소 검사기에서 찾을 수 있는 아이드로퍼 도구를 사용합니다. 🎨

페이지의 아무 곳이나 마우스 오른쪽 버튼을 클릭하고 검사기를 엽니다. 기본적으로 규칙 창은 검사기 탭에서 열립니다. 아래로 스크롤하여 색상이라는 라벨이 있는 속성을 찾으세요.

color 속성 옆에는 색상이 있는 원이나 사각형이 있어야 합니다. 색상 선택기를 열려면 클릭하고 옆에 있는 스포이드 아이콘을 누르세요. 🖌️

이 스포이드를 페이지 어디로든 끌어서 색상 값을 찾을 수 있습니다. 아이드로퍼를 클릭하면 방금 선택한 색상 값으로 속성이 자동으로 채워집니다. 여기에서 쉽게 복사할 수 있습니다. 📋

---

이것들 팁은 표면을 간신히 긁은 것일 뿐이다 Elements Inspector를 사용하면 실제로 가능한 것보다 더 많은 것을 얻을 수 있습니다. 웹 개발에 대해 더 깊이 알아보고 싶다면 이 가이드를 참고하십시오. 💻