크롬 개발자 도구는 개발자들이 다른 브라우저를 쉽게 포기하지 못하는 주요 이유 중 하나입니다.
대부분의 개발자들은 크롬 개발자 도구의 몇 가지 기능만을 사용하며, 조용히 추가되는 놀라운 기능들을 제대로 인식하지 못하고 있습니다.
이 숨겨진 보석들을 함께 찾아봅시다!
모두가 선호하는 운영 체제, 하드웨어 플랫폼, 기기 종류, 기기 형태 등이 다르지만, 크롬 브라우저를 사용한다는 공통점을 가지고 있습니다. 브라우저 전쟁은 끝났고, 크롬이 확실하게 승리했다고 할 수 있습니다.
윈도우 사용자들은 기본 브라우저를 이용하여 크롬을 다운로드한 후, 윈도우의 모든 “권장 사항”을 무시하고 크롬을 사용합니다. 심지어 애플의 강력한 주장과 전환 전략에도 불구하고, 많은 사용자와 개발자들은 애플 기기, 특히 맥북이나 큰 화면 기기에서 사파리를 외면합니다.
만약 기기에서 크롬을 사용하지 않는다면, 크롬과 호환되는 파생 브라우저인 브레이브나 비발디를 사용할 가능성이 높습니다. 물론 이 브라우저들이 기술적으로 크롬을 기반으로 하지 않는다는 것을 알고 있지만, 그것은 또 다른 논쟁거리입니다. 일반 사용자들은 이념적이거나 특정한 이유로 다른 브라우저를 사용할 수 있지만, 개발자들에게 크롬 외 다른 브라우저는 눈에 들어오지 않습니다.
크롬이 메모리를 많이 차지한다는 사실조차 무시됩니다. 그 이유는 간단합니다. 크롬 개발자 도구 때문입니다.
이미지 출처: 크롬 개발자 도구 공식 문서
이 글을 읽고 있는 당신은 숙련된 사용자, 웹 개발자 또는 이와 비슷한 사람일 것입니다. 따라서 우리는 개발자 도구 소개, 여는 방법, 다양한 기능에 대한 설명은 생략하겠습니다.
대신, 시간을 낭비하지 않고 잘 알려지지 않았지만 매우 유용한 크롬 개발자 도구 기능들을 바로 살펴보겠습니다.
디자인 모드
개발자들이 매일 하는 일 중 하나는 웹 페이지 요소를 검사한 후 HTML을 수정하여 미리보거나 변경 효과를 테스트하는 것입니다.
하지만 개발자 도구에서 HTML을 직접 편집하는 것은 결코 쉽지 않습니다. 꼬인 태그들을 파헤치고, 올바른 열고 닫는 괄호를 찾으려고 애쓰며, 텍스트를 편집하는 동안 많은 공백을 처리해야 합니다. 특히 디자이너라면 이런 복잡한 과정이 더욱 불편할 수 있습니다.
다음은 이 웹사이트(koreantech.org) 페이지의 스크린샷입니다.
깊게 중첩된 HTML과 복잡하고 혼란스러운 CSS 클래스는 오늘날 개발자 도구 사용 경험이 만족스럽지 못한 웹사이트의 전형적인 모습입니다. 🤭
하지만 디자인 모드라는 개발자 도구 기능이 있어 이러한 어려움을 크게 줄일 수 있습니다. 디자인 모드를 사용하면 스프레드시트나 텍스트 편집기를 편집하는 것처럼 웹 페이지를 시각적으로 편집할 수 있습니다. 단, 이 기능은 기본적으로 활성화되어 있지 않으며, 특히 개발자가 아닌 경우에는 활성화하는 것이 약간 번거로울 수 있습니다.
어쨌든 활성화하는 방법은 매우 간단합니다. 다음 지침을 따르면 됩니다. 얼마나 간단한지는 숙련도에 따라 다를 수 있습니다. 아래 단계를 따르세요.
- 편집하려는 웹 페이지가 로드되어 있는지 확인합니다.
- 평소처럼 개발자 도구 패널을 엽니다(키보드 단축키, 마우스 클릭 등). 맥에서는 Opt + Cmd + I 키를 사용합니다.
- 개발자 도구가 열리면 “Console” 탭으로 이동합니다. 브라우저 콘솔과 자바스크립트에 익숙하지 않은 사람들에게는 이 과정이 조금 어렵게 느껴질 수도 있습니다.
- 커서 옆의 첫 번째 줄을 클릭하면 텍스트를 입력할 수 있는 프롬프트가 나타납니다. 이곳에 자바스크립트 코드를 작성할 수 있습니다 (아래 스크린샷 참조).
- 이제 자바스크립트 코드를 작성해야 합니다. document.designMode = “on”을 입력하면 됩니다. 이 코드를 복사하여 붙여넣거나 직접 입력할 수 있습니다. (복사 붙여넣기 시에는 서식이 포함되지 않도록 일반 텍스트로 붙여넣어야 합니다).
- Enter 키를 누릅니다.
“이게 다야?!”
네, 그게 전부입니다!
이제 웹 페이지를 문서처럼 자유롭게 편집할 수 있습니다. 디자인 모드를 사용하여 Spotify 웹사이트를 실시간으로 편집하는 예시 영상을 참고하세요.
디자인 모드는 완벽한 해결책은 아닙니다. 예를 들어, 버튼을 복사/붙여넣거나 모양을 쉽게 변경할 수는 없습니다. 하지만 콘텐츠를 시각적으로 빠르게 변경해야 할 때 유용하게 사용할 수 있습니다.
크롬 개발팀이 이 기능에 대한 사용자 반응을 테스트하고 있을 수도 있습니다. 긍정적인 반응과 강력한 사용 사례가 발견된다면, 더 강력한 편집 기능이 곧 추가될 것으로 기대할 수 있습니다! 🤞🏻🤞🏻
네트워크 환경 시뮬레이션
크롬 개발자 도구의 Network 탭은 가장 많이 사용되는 탭 중 하나입니다. 이 탭에서는 페이지에서 생성된 요청, 유형, 메타데이터/헤더, 상태, 자산 다운로드 진행률(이미지, 스타일시트 등), 로드 시간 등 다양한 정보를 확인할 수 있습니다. 이러한 유용성 때문에 네트워크 탭이 가장 많이 사용되는 것은 당연합니다.
하지만 이 탭에서 놓치기 쉬운 기능이 있습니다. 바로 온라인 상태를 나타내는 드롭다운 메뉴입니다.
이 메뉴를 클릭하면 네트워크 속도를 조절할 수 있는 다양한 옵션이 나타납니다. Fast 3G, Slow 3G, Offline 등이 있습니다. 이러한 옵션은 웹사이트 성능을 테스트하거나 오프라인 환경에서의 웹 앱 동작을 테스트하는 데 유용합니다.
한번 사용해 볼까요? 네트워크를 “Slow 3G”로 설정하고 이전 스크린샷의 동일한 페이지를 다시 로드해 보겠습니다. 이전 스크린샷에서는 현재 네트워크 연결(40Mbps 광대역)에서 대부분의 자산이 100밀리초 미만으로 다운로드되고 있었습니다.
이제 느린 3G에서는 어떻게 되는지 봅시다.
결과가 상당히 다르죠!
자산 로드 시간이 5-10초 범위로 늘어났고, 사이트가 완전히 로드되는 데 17.25초가 걸렸습니다. 느린 3G 네트워크에서는 최신 웹사이트를 로드하는 데 몇 초가 걸린다는 점을 감안해야 합니다. 느린 네트워크에서 빠른 로딩을 원하는지 여부는 또 다른 문제이지만, 대부분의 경우 이익이 노력을 정당화하는 사업적 결정이어야 합니다.
위 스크린샷에서 네트워크 탭의 경고 아이콘을 확인하세요. 이는 기본 설정이 아닌 변경이 적용되었음을 알려주는 크롬의 신호입니다. 현재 진행 중인 작업을 알지 못하는 경우 재설정해야 할 수도 있습니다.
대화형 색상 선택기
개발자 도구에서 DOM 요소를 검사하는 것은 거의 매일 하는 일입니다. 우리는 CSS 세부 정보 섹션에도 익숙하며, 해당 섹션에서 CSS를 편집하고 결과를 즉시 확인할 수 있다는 것도 알고 있습니다.
이 모든 기능들 중에서 숨겨진 유용한 기능은 CSS 색상 속성을 클릭하면 익숙한 색상 선택기 인터페이스가 나타난다는 것입니다!
단순한 기본 색상 선택기가 아닙니다. 투명도를 조절하고, 사용 중인 색상 시스템을 변경하고, 페이지에서 직접 색상을 선택하는 등 다양한 작업을 수행할 수 있습니다.
예를 들어, 다음번에 사이트의 강조 색상을 조정할 때 원하는 색상 값을 계산하거나 추측할 필요가 없습니다. 실제로 브라우저에서 직접 웹사이트를 디자인하는 것을 선호하는 많은 사람들에게 이 기능은 매우 유용합니다. 🙂
이벤트 페이지 요소 모니터링
특정 요소에서 발생하는 이벤트를 확인하고 싶을 때가 있습니다. 특히 jQuery를 사용하는 경우에는 이벤트 핸들러와 로직이 여기저기 흩어져 있어 버그를 추적하기가 어렵습니다.
다행히도 크롬 개발자 도구에는 이를 위한 훌륭한 기능이 있습니다. 특정 요소에서 발생하는 이벤트를 감시하고 콘솔에 기록합니다. 하지만 CSS 클래스 이름을 기반으로 요소를 선택할 수 없다는 점은 아쉽습니다. $(“#email”)과 같은 jQuery 방식은 사용할 수 없습니다. 🙂
그럼에도 불구하고 이 기능이 어떻게 작동하는지 살펴보겠습니다. 개발자 도구 검사기를 사용하여 간단하게 “요소 검사”를 시작합니다. 이것은 우리가 매일 사용하는 검사 도구와 동일합니다.
아래 스크린샷에서 검사기 도구를 사용하여 텍스트 입력을 강조 표시했습니다. “강조 표시”는 페이지의 요소가 강조 표시된다는 의미가 아닙니다. 검사기 커서가 텍스트 입력에서 클릭되었고 개발자 도구에서 해당 HTML 코드가 강조 표시된 것입니다.
이제 이벤트 모니터링을 위해 현재 검사된 요소를 대상으로 하여 $0이라는 특별한 자바스크립트 변수로 요소에 접근할 수 있습니다. 다음으로 콘솔을 클릭하고 이 텍스트 입력에 대한 이벤트 리스너를 연결합니다. 이를 위해 필요한 것은 한 줄의 코드 monitorEvents($0, ‘mouse’)입니다. ‘mouse’ 부분은 마우스 기반 이벤트만 보고 싶다는 것을 크롬에게 알려줍니다.
Enter 키를 누르면 모니터링이 활성화되고, 텍스트 입력 위로 마우스를 가져가거나 클릭하면 해당 이벤트가 콘솔에 자바스크립트 객체로 기록됩니다.
스크린샷에서 볼 수 있듯이 요소를 클릭하고 내 이름을 입력한 다음 마우스를 멀리 옮길 때 여러 유형의 마우스 이벤트가 캡처되었습니다(키보드 이벤트인 입력 이벤트는 기록되지 않음). 이벤트는 자바스크립트 객체이며, 각 객체에는 많은 정보가 포함되어 있습니다. 예를 들어 “클릭” 이벤트 객체를 확장했을 때 속성 수가 너무 많아서 한 장의 스크린샷에 모두 담을 수 없었습니다!
이 기능은 앞으로 많은 문제를 해결해 줄 것이 분명하므로, 지금 바로 사용해 보시기 바랍니다!
웹사이트 성능 보고서
오늘날 웹사이트 성능은 사업의 성패를 좌우할 수 있습니다. 약간의 성능 향상만으로도 SEO 개선과 사용자 만족도를 크게 높일 수 있습니다. 하지만 웹사이트의 어느 부분을 개선해야 하는지, 어떤 부분이 이미 좋은지 어떻게 알 수 있을까요?
전문가 팀을 고용하고 며칠 동안 기다려야 할까요?
그럴 수도 있지만, 다행히도 크롬 개발자 도구에서 대부분의 작업을 처리할 수 있습니다. 최신 버전의 크롬(2020년 말)에는 개발자 도구에 Lighthouse 탭이 있습니다. 몇 달 전에는 ‘Audits’라고 불렸는데, 공식 문서에서는 여전히 이 이름을 사용하고 있습니다. 중요한 점은 Lighthouse가 한때 웹사이트 성능을 무료로 확인할 수 있는 인기 서비스였지만, 구글에서 중단했다는 것입니다(이유는 밝혀지지 않았습니다). 다행히도 동일한 기능이 개발자 도구에 다시 나타났습니다.
성능 보고서를 생성하려면, 보고 싶은 페이지를 로드한 후 버튼을 클릭하기만 하면 됩니다.
스크린샷의 오른쪽에서 볼 수 있듯이, 원하는 정보의 양을 조절하는 몇 가지 옵션이 있습니다. 설정에 만족하면 큰 파란색 버튼을 누르고 잠시 기다리세요. 몇 초 후에 다음과 같은 유용한 보고서가 표시됩니다.
위 스크린샷에 표시된 숫자는 각 카테고리의 전체 점수를 보여줍니다. 이 웹사이트에는 PWA(Progressive Web App) 기능이 없기 때문에 PWA 범주가 회색으로 표시됩니다. 또한 스크린샷 오른쪽의 스크롤바 크기를 보면 보고서가 상당히 길다는 것을 알 수 있습니다.
성능 섹션의 일부는 다음과 같습니다.
Lighthouse와 그 제안이 웹사이트 성능의 만병통치약이라고 주장하지는 않겠지만, 매우 유용합니다. 웹사이트 소유자와 개발자는 어떤 문제가 있는지, 정확히 어떻게 해결해야 하는지에 대한 실마리를 얻을 수 있기 때문입니다.
솔직히 웹 개발자로서 성능과 테스트가 전문 분야가 되어버린 것 같다는 느낌을 받습니다. 이와 같은 Lighthouse는 잘 알려지지 않고 평가 절하된 도구이지만, 크롬 개발자 도구의 일부이며 비즈니스 소유자와 개발자/시스템 관리자 모두에게 매우 유용합니다.
코드 편집 능력
개발자 도구의 Sources 탭을 사용하면 웹사이트에서 로드한 다양한 파일에 접근할 수 있습니다. 또한 코드 편집, 스니펫 저장 등의 기능을 사용할 수 있습니다. 이것은 웹 개발자에게는 놀라운 일이 아닙니다. 하지만 개발자 도구에는 선호하는 코드 편집기에 익숙한 개발자의 삶을 더 쉽게 만들어주는 몇 가지 편리한 기능이 내장되어 있습니다.
개발자 도구는 몇 가지 잘 알려진 키보드 단축키를 사용하여 시간을 절약하고 코드 편집의 어려움을 줄여줍니다. 예를 들어, Ctrl + D(Mac에서는 Cmd + D)를 사용하여 여러 단어를 한 번에 강조 표시할 수 있습니다. 마찬가지로, Ctrl(또는 Mac에서는 Cmd) 키를 누른 상태에서 코드의 여러 위치를 클릭하면 여러 개의 커서가 나타납니다. 아래 영상을 참고하시면 더 잘 이해할 수 있을 것입니다.
이 기능이 마음에 든다면, 개발자 도구가 제공하는 모든 코드 편집 기능을 활용하기 위해 공식 문서를 자세히 살펴보세요.
DOM 요소 상태 제어
무언가를 테스트하거나 디버깅할 때, 특정 요소의 상태에서만 동작이 활성화되는 경우가 있습니다. 이러한 상황에서 상태를 조작하기 어려울 수 있습니다. 특히 “호버” 상태를 예시로 들 수 있습니다. 호버 동작의 시간을 맞추거나 임시 CSS를 추가하면서 많은 시간을 허비했던 경험이 있습니다.
다행히 크롬 개발자 도구에는 검사된 요소의 상태를 쉽게 변경할 수 있는 기능이 있습니다. 요소 탭에서 요소를 마우스 오른쪽 버튼으로 클릭하면 상태를 변경할 수 있는 옵션이 나타나지만, 기능의 수와 작업량 때문에 쉽게 간과할 수 있습니다.
보시다시피 매우 간단합니다!
이제 다른 상태의 요소를 관찰하기 위해 추가 CSS를 작성하거나 다른 방법을 시도할 필요가 없습니다.
도구 패널
마지막으로 도구 패널을 소개합니다. 이 기능은 잘 숨겨져 있고 키보드 단축키를 통해서만 접근할 수 있는 매우 유용한 기능입니다. 이름에서 알 수 있듯이, 도구 패널은 개발자 도구의 거의 모든 기능을 사용할 수 있는 일종의 대시보드입니다. 개발자 도구의 모든 기능을 제공하기 때문에 검색창을 사용하여 원하는 기능을 빠르게 찾을 수 있습니다.
도구 패널을 활성화하려면 개발자 도구 패널이 열린 상태에서 Ctrl + Shift + P (또는 Mac 사용자의 경우 Cmd + Shift + P) 키를 누릅니다.
도구 패널은 다양한 기능과 놀라움으로 가득합니다. 예를 들어, 개발자 도구에서 직접 스크린샷을 찍을 수 있다는 사실을 알고 계셨나요?
확인하려면 도구 패널을 실행하고 검색창에 “스크린샷”을 입력해야 합니다.
선택한 DOM 노드에 대한 옵션을 포함하여 스크린샷을 찍을 수 있는 여러 가지 옵션이 표시됩니다! 도구 패널을 자세히 살펴보세요. 실망하지 않으실 것입니다!
원격으로 웹 페이지의 스크린샷을 찍어야 하는 경우 koreantech.org 스크린샷 도구를 확인하세요.
결론
크롬 브라우저 자체도 기능이 풍부하지만, 진정한 가치는 개발자 도구에서 빛을 발합니다. 이 글에서 보았듯이, 많은 사용자들은 잘 숨겨진 유용한 기능들을 모르고 지나치는 경우가 많습니다. 왜 이러한 기능들이 숨겨져 있을까요?
일부 기능들은 (예: 디자인 모드) 실험적인 기능이어서, 크롬 개발자들은 일반 사용자들이 쉽게 찾지 못하도록 하려고 하는 것 같습니다. 나머지 기능들은 단순히 정보 과부하 때문이라고 생각합니다. 120개의 기능과 그 하위 기능들이 있다면, 이 모든 기능에 적합한 사용자 인터페이스를 디자인하는 것은 거의 불가능합니다. 또한, 구글은 역사적으로 자사 제품의 사용자 경험 개선에 큰 성과를 거두지 못했습니다. 🤷🏻♂️
그럼에도 불구하고, 이 글에서 소개한 기능들이 여러분에게 유용하기를 바랍니다. 더 중요한 것은, 이 글을 통해 숨겨진 기능에 대한 감을 잡고, 다음에 필요한 것을 찾거나 검색할 때 어디를 “깊이 파고들어야” 할지 알 수 있게 되기를 바랍니다. 😆