크롬북에서 요소 검사하는 방법
크롬북에서 개발자 도구를 사용하면 웹사이트의 프런트엔드 코드(HTML, CSS, 심지어 일부 JavaScript까지)를 살펴볼 수 있어 편리합니다.주로 디버깅이나 간단한 수정 작업에 유용하지만, 변경 사항은 일시적이라는 점을 기억하세요.페이지를 새로고침하면 모든 것이 원래대로 돌아갑니다.웹 디자인을 수정하거나 레이아웃 오류를 해결할 때 사용해 보세요.크롬북은 Chrome OS를 사용하므로 일반 Chrome에서와 사용 방법은 거의 동일하지만, 특히 학교나 회사에서 사용하는 기기처럼 관리자 권한이 있는 경우에는 개발자 도구에 접근하지 못하는 경우가 있습니다.따라서 이러한 제한을 우회하거나 접근하는 방법을 알아두면 매우 유용합니다.마우스 오른쪽 버튼을 클릭하는 일반적인 방법이 비활성화되거나 차단된 경우, 다른 방법을 시도해 볼 수 있습니다.크롬북에서 개발자 도구를 사용하는 몇 가지 방법을 소개합니다.관리자 권한 제한 때문에 불편함을 겪고 있거나 단순히 웹사이트 코드를 살펴보고 싶을 때 유용하게 활용할 수 있을 것입니다.
크롬북에서 요소 검사하는 방법
마우스 오른쪽 버튼을 사용하여
가장 쉬운 방법은 확인하고 싶은 요소를 마우스 오른쪽 버튼으로 클릭(트랙패드에서는 두 손가락 탭)한 다음 ‘검사’를 선택하는 것 입니다.대부분의 경우 개발자 도구 패널이 바로 열리고 해당 요소의 코드가 강조 표시됩니다.아주 간단하죠? 하지만 콘텐츠 소유자가 자신의 콘텐츠를 보호하려는 경우, 사이트에서 마우스 오른쪽 버튼 클릭을 차단하는 경우가 있습니다.그런 경우에는 아래의 고급 옵션을 살펴보세요.제 환경에서는 일부 사이트에서 처음에는 마우스 오른쪽 버튼 클릭이 작동하지 않지만, 페이지를 새로 고침하거나 스크립트 차단 기능을 비활성화하면 갑자기 작동하는 경우가 있습니다.보호 기능이 이렇게 일관성이 없다는 게 참 이상하죠.
단축키 사용하기
마우스 오른쪽 클릭이 비활성화되어 있거나 귀찮다면 Ctrl + Shift + C 단축키를 사용해 보세요.이 단축키를 누르면 “검사” 기능이 즉시 실행됩니다.개발자 도구 창이 열리면 도구 패널 왼쪽 상단에 작은 화살표 아이콘이 나타납니다.이 아이콘을 클릭하면 십자 모양 커서가 나타나는데, 페이지의 아무 요소나 클릭하면 해당 부분만 검사할 수 있습니다.메뉴를 탐색하지 않고도 빠르게 검사할 수 있는 편리한 방법이죠.어떤 사이트에서는 이 단축키가 바로 작동하지만, 특히 보안이 강화된 사이트에서는 추가 권한을 부여하지 않으면 작동하지 않을 수도 있습니다.크롬이 굳이 필요 이상으로 복잡하게 만들어 놓은 탓이겠죠.
크롬 메뉴 사용
메뉴를 선호하신다면, 오른쪽 상단 모서리에 있는 점 세 개( 세로 점 세 개 )를 클릭하여 Chrome 메뉴를 여세요.그런 다음 ‘도구 더보기’ > ‘개발자 도구’ 로 이동합니다.그러면 오른쪽이나 하단에 개발자 패널이 열립니다.거기서 ‘요소’ 탭을 클릭하면 모든 준비가 완료됩니다.특정 요소를 검사하려면 패널에서 화살표 아이콘을 클릭하고 분석하려는 페이지 부분을 선택하세요.간단하지만, 개발자 도구가 차단된 경우에는 작동하지 않을 수 있습니다. Chrome을 다시 시작하거나 캐시를 삭제하면 권한이 새로 고쳐지는 경우가 있지만, 학교 기기에서는 이러한 방법이 아무런 메시지 없이 실패할 수도 있습니다.
개발자 도구 차단 해제 또는 더 고급적인 방법
만약 학교용 크롬북처럼 사용이 제한된 크롬북을 사용 중이라면, 이러한 옵션들이 모두 잠겨 있을 가능성이 높습니다.하지만 교묘하게도 기본적인 내용을 검사해야 할 경우 우회 방법이 있습니다.제가 본 방법 중 하나는 페이지에 작은 스크립트를 삽입하는 북마크릿을 추가하는 것입니다.예를 들어, 이 스크립트를 복사해서 북마크 URL에 붙여넣으면 됩니다.
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0기본적으로 이 기능을 사용하면 페이지를 편집 가능한 문서처럼 만들어 표시 방식을 수정할 수 있습니다.개발자 도구와 완전히 동일하지는 않지만, 다양한 요소의 배치 방식을 확인하거나 정적 콘텐츠를 수정하고 싶을 때 빠르게 사용할 수 있습니다.이 기능을 사용하려면 메뉴에서 ‘ 북마크 > 북마크 추가 ‘를 선택하여 새 북마크를 만들고, 위 코드를 URL 필드에 붙여넣으세요.이제 어떤 페이지에서든 해당 북마크를 클릭하면 페이지를 편집할 수 있습니다.개발자 도구처럼 CSS와 HTML에 완전히 접근할 수는 없지만, 간단한 수정에는 충분합니다.다만, 관리자가 접근 제한을 강화한 잠금 기기에서는 이 방법이 비활성화되거나 작동하지 않을 수 있으니 주의하세요.
솔직히 말해서, 일부 환경에서 기본적인 웹 개발자 기능이 차단되는 건 좀 답답하지만, 해결 방법은 있습니다.이러한 옵션들을 꼼꼼히 살펴보고, 때로는 시행착오를 거쳐야 할 수도 있죠.제한 사항을 우회하려고 할 때는 특히 관리되는 환경에서는 신중을 기해야 한다는 점을 명심하세요.하지만 개인적인 용도로, 단순히 내부 구조를 살펴보고 싶을 때 이러한 방법들은 많은 골칫거리를 덜어줄 수 있습니다.