Chrome DevTools의 잘 알려지지 않았지만 끝내주는 8가지 기능

Chrome DevTools는 개발자가 다른 브라우저를 건드리지 않는 가장 큰 이유 중 하나입니다.

그러나 우리 대부분은 소수의 기능만 사용하고 조용히 출시되는 더 많은 놀라운 기능을 인식하지 못합니다.

이 숨겨진 보석 중 일부를 발견합시다!

누구나 선호하는 운영 체제, 하드웨어 플랫폼, 기기 유형, 기기 폼 팩터 등이 있습니다. 하지만 모두에게 공통적인 한 가지는 Chrome 브라우저를 실행하고 Chrome 브라우저만 실행한다는 것입니다! 브라우저 전쟁은 끝났고 Chrome이 설득력 있게 승리했다고 말하는 것이 안전하다고 생각합니다.

Windows 사용자는 기본 브라우저만 사용하여 Chrome을 다운로드하고 이후에는 Windows의 모든 “권장 사항”을 무시하고 Chrome을 사용합니다. Apple의 많은 강력한 주장과 전환 전략에도 불구하고 사용자와 개발자가 Safari를 기피하는 Apple 기기(특히 MacBook 및 대형 화면 기기)도 마찬가지입니다.

기기에서 Chrome을 실행하지 않는 경우 다음과 같은 Chrome 호환 스핀오프를 실행할 가능성이 높습니다. 용감한 또는 비발디. 예, 기술적으로 이러한 브라우저는 Chrome을 기반으로 하지 않는다는 것을 알고 있습니다. 그러나 그것은 또 다른 논의입니다. 일반 사용자는 이념적이거나 특별한 이유로 이러한 다른 브라우저를 사용하고 있을지 모르지만 개발자의 경우 Chrome 외에는 다른 브라우저가 보이지 않습니다.

기억을 먹는 괴물이라는 사실조차 무시당한다. 그 이유는 간단합니다. Chrome 개발자 도구.

이미지 출처: 공식 Chrome DevTools 문서

이제 이 기사를 읽고 있다면 자신이 고급 사용자, 땜장이, 웹 개발자 또는 이러한 정렬을 따르는 무언가라고 가정하는 것이 안전합니다. 따라서 우리 중 누구도 DevTools에 대한 소개, 여는 방법, 다양한 기능 등이 필요하지 않습니다.

대신 시간을 낭비하지 않고 덜 알려졌지만 놀랍도록 유용한 Chrome DevTools 기능에 대해 바로 살펴보겠습니다.

디자인 모드

개발자가 일상적으로 수행하는 작업 중 하나는 페이지의 요소를 검사한 다음 HTML을 수정하여 무언가를 미리 보거나 변경 효과를 테스트하는 것입니다.

그러나 DevTools에서 직접 HTML로 작업하는 것은 결코 쉬운 일이 아닙니다. 태그 수프를 뒤지고 올바른 여는/닫는 괄호를 찾으려고 애쓰며 눈을 피로하게 하고 텍스트를 편집하는 동안 말도 안 되는 양의 공백을 처리해야 합니다. 보고 있는 문서에서 분명히 누락됨) 처리해야 할 몇 가지 문제입니다. 당신이 디자이너이고 엉망진창을 샅샅이 뒤지고 싶지 않다면 더 나쁩니다.

다음은 바로 이 웹사이트(koreantech.org) 페이지 중 하나의 스크린샷입니다.

깊숙이 중첩된 HTML과 불가사의하고 혼란스러운 CSS 클래스는 오늘날 DevTools 사용 경험이 차선책인 모든 중요하지 않은 웹 사이트의 전형입니다. 🤭

그러나 디자인 모드라는 DevTools 기능이 있어 많은 경우에 고통을 줄일 수 있습니다. 디자인 모드 사용하기 스프레드시트나 텍스트 편집기를 편집하는 것처럼 페이지를 시각적으로 라이브로 만들 수 있습니다! 유일한 문제는 이 기능이 기본적으로 켜져 있지 않으며 특히 개발자가 아닌 경우 활성화하는 것이 약간 골칫거리라는 것입니다.

어쨌든 그렇게 하는 것은 매우 간단합니다. 아래 지침을 따르기만 하면 됩니다. 사용자 정교화 곡선의 어느 위치에 있느냐에 따라 우스꽝스러울 정도로 쉬울 수도 있고 약간 어려울 수도 있습니다. 수행할 작업은 다음과 같습니다.

• 편집하려는 웹 페이지가 로드되어 있고 현재 보고 있는지 확인하십시오(즉, 해당 탭이 활성화되어 있음).
• 평소처럼 DevTools 패널을 엽니다(키보드 단축키, 마우스 클릭 등). 나는 키보드 단축키를 사용하는 것을 좋아하고 Mac에서는 Opt + Cmd + I가 작업을 수행합니다.
• 이제 DevTools가 열린 상태에서 “Console”이라는 탭으로 이동합니다. 여러분 중 일부는 이 모든 것이 얼마나 어리석고 당연해 보이는지 눈을 굴릴 수 있지만, 브라우저 콘솔과 JavaScript로 작업하는 동안 어려움을 겪고 있는(수백?) 수천 명의 사람들을 생각해 봅시다(어떤 이유로든). ).
• 커서 옆의 첫 번째 줄을 클릭하면 타이핑 프롬프트가 표시되고 이제 여기에서 JavaScript 코드를 작성할 수 있습니다(아래 스크린샷 참조).
• 이제 JavaScript 코드를 작성해야 합니다. 작성/입력해야 하는 내용은 매우 짧고 간단합니다. document.designMode = “on”입니다. 또한 이 페이지에서 코드를 복사하여 붙여넣거나(그렇게 하는 경우 서식이 복사되지 않도록 하십시오. 일반 텍스트만 필요합니다.) 자신이 있다면 코드를 입력하십시오.
• Enter/Return을 누르십시오.

“그거야??!”

그래, 그게 다야!

이제 페이지를 문서처럼 자유롭게 편집할 수 있습니다. 디자인 모드를 사용하여 Spotify 웹사이트를 라이브 편집하는 이 예제 비디오를 확인하십시오.

흥미진진한 디자인 모드 기능은 묘책이 아닙니다. 예를 들어 버튼 복사-붙여넣기, 모양 변경 등을 쉽게 할 수 없습니다. 꿈의 시각적 웹 페이지 편집기에 비해 실제로 할 수 있는 일의 수는 매우 적습니다. 그러나 콘텐츠를 시각적으로 즉석에서 변경해야 하는 사용 사례를 해결합니다.

즉, Chrome 직원이 이 기능이 얼마나 잘 수신되는지 테스트하고 있다고 주장하는 것은 그리 무리가 아닙니다. 좋은 반응과 강력한 사용 사례를 찾으면 더 강력한 편집 기능이 곧 뒤따를 것으로 기대하는 것이 합리적입니다! 🤞🏻🤞🏻

네트워크 조건 시뮬레이션

Chrome DevTools의 Network 탭은 아마도 가장 널리 사용되는 탭일 것입니다. 나머지 시간은 네트워크 탭). 페이지에서 생성된 요청, 유형, 메타데이터/헤더, 상태, 자산 다운로드 진행률(이미지, 스타일시트 등), 로드 시간 등에 대한 모든 종류의 정보를 제공합니다. 이러한 놀라운 유용성으로 인해 네트워크 탭이 가장 일반적이라는 것은 놀라운 일이 아닙니다.

그러나 우리가 논의하고 있는 기능을 놓치는 것은 간단합니다. 명백한 온라인 상태를 나타내는 무해한 드롭다운을 눈치채지 못했을 수 있습니다.

이것을 클릭하면 네트워크 속도를 조절할 수 있는 다양한 옵션이 있는 드롭다운이 표시됩니다: Fast 3G, Slow 3G, Offline 등. 이 옵션에 대한 다양한 사용 사례가 있을 수 있지만 가장 일반적인 것은 웹사이트를 테스트하는 것입니다. 느린 네트워크에서의 성능 또는 오프라인 시 웹 앱 동작(이러한 기능이 추가되었다고 가정).

스핀을 위해 이것을 가져 갑시다. 네트워크를 “Slow 3G”로 설정하고 이전 스크린샷에서 같은 페이지를 다시 로드하겠습니다. 그 전에 이전 스크린샷에서 현재 네트워크 연결(40Mbps 광대역)에서 대부분의 자산이 100밀리초 미만으로 다운로드되고 있음을 확인하십시오.

이제 느린 3G가 무엇을 하는지 살펴볼 시간입니다.

얼마나 다른가!

이제 자산 로드 시간이 5-10초 범위에 있음을 알 수 있습니다. 또한 사이트는 17.25초 만에 완전히 로드되었습니다! 예, 무슨 생각을 하는지 알지만 느린 3G 네트워크에서는 모든 최신 웹 사이트를 로드하는 데 몇 초가 걸린다는 점을 고려해야 합니다. 느린 네트워크에서 빠른 로딩을 원하는지 여부는 또 다른 문제이지만 대체로 이익이 노력을 정당화하는 비즈니스 결정이어야 합니다.

위의 스크린샷에서 네트워크 탭의 경고 아이콘을 확인하십시오. 이는 기본이 아닌 지속적인 변경을 수행했음을 알려주는 Chrome의 방식이며 현재 수행 중인 작업을 알지 못하는 경우 재설정해야 할 수 있습니다.

대화형 색상 선택기

DevTools에서 DOM 요소를 검사하는 것은 우리 모두가 거의 매일 하는 일입니다. 우리는 또한 옆에 표시된 CSS 세부 정보 섹션에 익숙하며 이를 편집하고 결과를 즉시 볼 수 있다는 것을 알고 있습니다.

이 모든 것 중에 숨겨진 작은 편리함은 CSS 색상 속성을 클릭하면 친숙한 색상 선택기 인터페이스가 팝업된다는 것입니다!

베어본, 기본 색상 선택기가 아닙니다. 투명도를 제어하고, 사용 중인 색상 시스템을 변경하고, 페이지에서 직접 색상을 선택하는 등의 작업을 수행할 수 있습니다.

예를 들어 다음에 사이트의 강조 색상을 실험할 때 마음에 두고 있는 음영에 대한 올바른 값을 계산하거나 추측할 필요가 없습니다! 실제로 많은 사람들이 브라우저에서 직접 웹사이트를 디자인하는 것을 좋아합니다. 그들에게 이러한 기능은 신의 선물입니다! 🙂

이벤트 페이지 요소 모니터링

우리는 종종 우리가 관심을 갖고 있는 하나의 특정 요소에 대해 무슨 일이 일어나고 있는지 알고 싶은 상황에 처합니다. 이것은 특히 중요한 코드 기반에서 jQuery를 사용할 때 그렇습니다. 이벤트 핸들러와 로직은 모든 ​​곳에 분산되어 있으며 버그를 추적하는 것은 악몽이 될 수 있습니다.

고맙게도 Chrome DevTools에는 이를 위한 멋진 기능이 있습니다. 표시된 요소를 관찰하고 이벤트를 콘솔에 기록합니다. 그러나 약간의 실망이 있습니다. 이 기능에는 CSS 클래스 이름을 기반으로 하는 요소 선택 기능이 없습니다. 따라서 $(“#email”)의 jQuery 방식은 사용할 수 없습니다. 🙂

그렇게 말하면 어떻게 작동하는지 봅시다. DevTools 인스펙터를 사용하여 간단한 “요소 검사”를 수행하는 것으로 시작합니다. 예, 우리가 매일 사용하는 것과 똑같은 검사 도구입니다.

아래 스크린샷에서 인스펙터 도구를 사용하여 텍스트 입력을 강조 표시했습니다. “강조 표시”는 페이지의 요소가 강조 표시된다는 의미가 아닙니다(보시다시피 강조 표시되지 않음). 오히려 인스펙터 커서가 텍스트 입력에서 클릭되었고 DevTools의 해당 HTML 코드가 강조 표시되었습니다.

이렇게 하면 이벤트 모니터링을 위해 현재 검사된 요소를 대상으로 하여 $0이라는 특수 JavaScript 변수로 요소에 액세스할 수 있습니다. 다음으로 브라우저 창의 다른 곳(특히 HTML 코드 부분)을 부주의하게 클릭하지 않도록 콘솔을 클릭하고 이 텍스트 입력에 대한 이벤트 리스너를 연결합니다. 이를 위해 필요한 것은 한 줄의 코드인 monitorEvents($0, ‘mouse’)뿐입니다. 여기에서 “마우스” 부분은 내가 마우스 기반 이벤트를 보는 데만 관심이 있다는 것을 Chrome에 알려줍니다.

Enter/Return을 누르는 즉시 모니터링이 활성화되고 텍스트 입력 위로 마우스를 가져가거나 클릭하면 해당 이벤트가 콘솔에 JavaScript 개체로 기록됩니다.

스크린샷에서 볼 수 있듯이 요소를 클릭하고 내 이름을 입력한 다음 마우스를 멀리 옮길 때 여러 유형의 마우스 이벤트가 캡처되었습니다(키보드 이벤트인 입력 이벤트는 기록되지 않음). 이벤트는 스크린샷에서 알 수 있듯이 JavaScript 개체 자체입니다. 각 이벤트 개체에는 엄청난 양의 정보가 포함되어 있습니다. 예를 들어 “클릭” 이벤트 개체를 확장했는데 속성 수가 단일 스크린샷에 모두 들어갈 수 없었습니다!

다가오는 프로젝트에서 많은 골칫거리를 덜어줄 것이 확실하므로 이 기능을 바로 사용해 보는 것이 좋습니다!

웹사이트 성능 보고서

요즘 웹사이트 성능은 비즈니스/웹사이트를 만들거나 망칩니다. 약간의 성능 향상만으로도 엄청난 SEO 이득과 사용자 만족도를 얻을 수 있습니다. 하지만 웹 사이트의 어떤 부분에 주의가 필요하고 어떤 부분이 이미 좋은지 어떻게 알 수 있습니까?

전문가 팀을 고용하고 며칠 동안 참을성 있게 기다려야 합니까?

이를 수행해야 하는 경우도 있지만 고맙게도 Chrome DevTools에서 나머지 작업을 처리할 수 있습니다. 최신 버전의 Chrome(2020년 말)에서는 DevTools에 Lighthouse 탭이 있습니다. 몇 달 전에는 감사(Audits)라고 불렸는데, 혼란스럽게도 공식 문서 작성 시점에서 찾을 수 있는 이름입니다. 어쨌든 요점은 Lighthouse가 웹 사이트 성능을 무료로 확인하는 유행 웹 사이트 였지만 Google에서 중단했다는 것입니다 (이유는 제공되지 않음). 고맙게도 동일한 강력한 기능이 나중에 DevTools에서 다시 나타났습니다.

실적 보고서를 생성하려면 관심 있는 페이지가 로드된 후 버튼 하나만 누르면 됩니다.

스크린샷의 오른쪽에서 볼 수 있듯이 원하는 정보의 양(물론 테스트하려는 대상)을 제어하는 ​​몇 가지 옵션이 있습니다. 설정에 만족하면 큰 파란색 버튼을 누르고 편안히 앉아 휴식을 취하세요. 몇 초 후에 다음과 같은 유용한 보고서가 표시됩니다.

위 스크린샷에 표시된 숫자는 각 카테고리의 전체 점수를 보여줍니다. 이 웹사이트에 PWA 기능이 없기 때문에 PWA(Progressive Web App) 범주가 회색으로 표시됩니다. 또한 스크린샷(맨 오른쪽)의 스크롤 막대 크기로 알 수 있듯이 긴 보고서입니다.

성능 섹션의 일부는 다음과 같습니다.

나는 Lighthouse와 그 제안이 웹사이트 성능의 성배라고 주장하지는 않겠지만 이것들은 매우 유용합니다. 웹 사이트 소유자와 개발자는 어떤 문제가 존재하고 정확히 어떻게 해결해야 하는지에 대한 단서가 거의 없기 때문입니다.

솔직히 성능과 테스트가 일종의 전문화되는 경향이 있기 때문에 웹 개발자로서 길을 잃은 느낌이 듭니다. 이와 같이 Lighthouse는 거의 알려지지 않고 평가가 저조한 도구이며 현재 Chrome DevTools의 일부이며 비즈니스 소유자와 개발자/시스템 관리자 모두에게 매우 유용합니다.

코드 편집 능력

DevTools의 Sources 탭을 사용하면 웹사이트에서 로드한 다양한 파일에 액세스할 수 있습니다. 또한 코드 편집, 스니펫 저장 등과 같은 기능도 있습니다. 이는 웹 개발자에게 놀라운 일이 아닙니다. 그러나 DevTools에는 선호하는 코드 IDE에 익숙한 개발자의 삶을 더 쉽게 만들어주는 몇 가지 편의 기능이 내장되어 있습니다.

DevTools는 몇 가지 잘 알려진 키보드 단축키를 사용하여 시간을 절약하고 코드 랭글링 좌절을 최소화합니다. 예를 들어 Ctrl + D(Mac에서는 Cmd + D)를 사용하여 여러 단어를 강조 표시할 수 있습니다. 마찬가지로 Ctrl(또는 Mac의 경우 Cmd)을 누른 상태에서 코드의 여러 위치를 클릭하면 여러 개의 커서가 나타납니다. 더 나은 아이디어를 얻으려면 아래 비디오를보십시오.

이것이 멋지다고 생각한다면 DevTools가 제공해야 하는 모든 코드 편집 기능을 활용하기 위해 공식 문서를 자세히 살펴보십시오.

제어 DOM 요소 상태

때때로 우리는 무언가를 테스트하거나 디버깅하지만 우리가 쫓는 동작은 특정 요소 상태에서만 사용할 수 있습니다. 상태에 따라 끔찍한 시간을 보낼 수 있습니다. 제게는 “호버” 상태입니다. 호버 동작의 시간을 맞추려고 노력하거나 추가 임시 CSS 등을 추가하려고 수많은 시간을 낭비한 것을 기억하기 때문입니다.

고맙게도 Chrome DevTools에는 검사된 요소의 상태를 쉽게 변경할 수 있는 방법이 있습니다. 또한 요소를 마우스 오른쪽 버튼으로 클릭하면(요소 탭에서) 그렇게 할 수 있는 옵션이 있지만 기능의 수와 하루 작업의 압력을 감안할 때 이를 간과하기 쉽습니다.

예, 정말 간단합니다!

이제 다른 상태의 요소를 관찰할 때 조건부 테스트 논리를 코드에 적용하거나 추가 CSS를 작성하거나 다른 후프를 건너뛸 필요가 없습니다.

도구 패널

마지막으로 이 목록에서 중요한 것은 도구 패널입니다. 잘 숨겨져 있고 키보드 단축키를 통해서만 볼 수 있는 매우 유용한 기능 중 하나입니다. 이름에서 알 수 있듯이 도구 패널은 단일 도구가 아니라 DevTool의 거의 모든 기능을 사용할 수 있는 일종의 대시보드입니다. 전체 DevTools 기능을 제공하는 기능이 너무 많기 때문에 상단에서 바로 검색 표시줄을 사용할 수 있습니다.

Tools 패널을 활성화하려면 DevTools 패널에 있는지 확인한 다음 Ctrl + Shift + P(또는 Mac 사용자의 경우 Cmd + Shift + P)를 누릅니다.

도구 패널은 기능과 놀라움으로 가득 차 있습니다. 예를 들어 DevTools에서 직접 스크린샷을 찍을 수 있다는 사실을 알고 계셨나요?

다음을 확인하려면 도구 패널을 실행하고 검색 표시줄에 “스크린샷”을 입력해야 하기 때문에 그렇지 않을 것입니다.

또한 선택한 DOM 노드에 대한 옵션을 포함하여 스크린샷을 찍을 수 있는 여러 옵션이 표시됩니다! 도구 패널을 자세히 살펴보세요. 실망하지 않으실 것입니다!

원격으로 웹 페이지의 스크린샷을 찍어야 하는 경우 koreantech.org 스크린샷 도구를 확인하십시오.

결론

Chrome 브라우저 자체는 기능이 풍부하지만 실제로 빛나는 부분은 DevTools 제공입니다. 이 기사에서 보았듯이 대다수의 사용자가 알지 못하는 잘 숨겨진 기능이 꽤 많이 있습니다. 이러한 기능이 숨겨진 이유는 무엇입니까?

이 중 일부는 매우 실험적이며(예: 디자인 모드) Chrome 개발자는 일반 사용자가 이러한 기능을 찾기 어렵게 만들고 싶어합니다. 나머지 많은 기능에 대해서는 단순히 정보 과부하의 경우라고 생각합니다. 예를 들어 120개의 기능이 있고 그 중 일부에 하위 기능이 있는 경우 이러한 기능에 적합한 UI를 디자인하는 것은 거의 불가능합니다. 시나리오. 또한 Google은 역사적으로 자사 제품의 UX에 대해 큰 성과를 거두지 못했습니다. 🤷🏻‍♂️

그럼에도 불구하고 이러한 기능 중 일부가 유용하기를 바랍니다. 그러나 더 중요한 것은 이 기사가 무엇이 숨어 있는지에 대한 감각을 제공하여 다음 번에 특정 항목을 탐색하거나 검색하고 싶을 때 “깊이 파고들” 수 있는 위치를 알 수 있기를 바랍니다. 😆