로그를 더 쉽게 찾기 위한 Chrome DevTools의 세 가지 요령

Chrome의 개발자 도구는 매우 강력합니다. 불행하게도 콘솔과 네트워크 탭은 거의 보지 않는 많은 로그로 채워지는 경향이 있어 볼 대상을 찾기가 어렵습니다.

오늘은 찾고자 하는 정보를 보다 쉽게 ​​찾을 수 있는 세 가지 요령을 보여 드리겠습니다. 이전에 첫 번째 팁을 보셨을 수도 있지만 두 번째와 세 번째 팁은 사람들이 사용하거나 글을 쓰는 것을 거의 보지 못한 덜 알려진 트릭입니다.

1. 로그를 돋보이게 하십시오

콘솔 로그를 이렇게 아름답게 만드십시오.


Chrome 개발 도구 콘솔의 컬러 로그인

알아차리기는 쉽지만 쓰기에는 다소 장황합니다. 쉽게 작성할 수 있도록 JavaScript 유틸리티 함수를 만들 수 있습니다.

const clog = (log) => console.log(`%c ${log} `, 'background: #ffff00; color: #0012e9');

# Usage
clog("I am colorful!")

컬러 콘솔 로그에 대한 속기 기능을 만들 수 있습니다.

또 다른 대안은 create a snippet in VS Code이므로 원하는 접두사를 작성하기만 하면 VS Code가 코드를 자동 완성할 수 있습니다.

아래에서 두 개의 스니펫을 볼 수 있습니다. 접두사 clog가 있는 첫 번째 항목은 파일에 clog를 작성하고 탭 키로 자동 완성할 때 다채로운 로그 문을 출력합니다. vlog라는 이름의 두 번째 항목은 레이블과 값을 모두 로그아웃합니다.

{
  "Colored Console": {
    "prefix": "clog",
    "body": [
      "console.log('%c $1 ', 'background: #ffff00; color: #0012e9');",
      "$2"
    ],
    "description": "Log colored message to console"
  },
  "Colored Value Console": {
    "prefix": "vlog",
    "body": [
      "console.log('%c $1 ', 'background: #ffff00; color: #0012e9', $1);",
      "$3"
    ],
    "description": "Log colored message to console and an additional value"
  }
}

2. 그룹 콘솔 메시지

콘솔 메시지가 너무 많아 제거하고 싶지 않으신가요? 내가 당신이 그것들을 보관하고 여전히 숨길 수 있다고 말하면 어떨까요? 검색하는 솔루션은 console.group입니다. 이러한 방식으로 예를 들어 파일 또는 모듈별로 로그를 그룹화할 수 있습니다. 또는 앱 초기화에 사용되는 모든 로그를 그룹으로 묶을 수도 있습니다.

일부 로그를 그룹으로 래핑하려면 로그 앞에 console.group()을 작성하고 로그 뒤에 console.groupEnd()를 작성하십시오. 웹 콘솔은 그 사이에 있는 모든 로그를 접습니다.


Chrome DevTools 콘솔의 접힌 콘솔 그룹

그리고 그룹을 펼치면 이런 모습이 됩니다.


Chrome DevTools 콘솔의 확장된 콘솔 그룹

3. 검색 대신 네트워크 요청 필터링

네트워크 탭은 특히 분석 및 로그 요청이 원격으로 전송될 때 중간 규모 및 대규모 애플리케이션에서 매우 부풀어 오르는 경향이 있습니다. 이미 알고 계시겠지만 이미지 또는 AJAX 요청(Fetch/XHR)과 같은 유형에 따라 네트워크 요청을 필터링할 수 있습니다. 네트워크 요청을 필터링할 수 있는 필터 필드도 찾았을 것입니다.


Chrome DevTools의 네트워크 탭 아래에 있는 필터 옵션

필터 필드를 사용하여 원하는 요청을 검색하는 많은 사람을 보았습니다. 다른 모든 종류의 스팸 요청을 무시하는 쉬운 방법입니다. 번거로운 점은 새 요청을 찾을 때마다 필터 용어를 작성해야 한다는 것입니다.

이를 방지하기 위해 필터 필드를 사용하여 보고 싶지 않은 로그를 필터링합니다. 이렇게 하려면 필터 상자 옆에 있는 반전 버튼을 선택하고 표시하지 않으려는 단어를 입력하면 됩니다. 각 단어를 공백으로 구분합니다.

아래 예에서는 "inspect"및 ".css"라는 용어를 포함한 모든 요청이 필터링됩니다. 이 필터를 활성 상태로 유지하여 일반적으로 확인하는 요청만 표시하는 깨끗한 네트워크 로그를 항상 유지할 수 있습니다.


필터가 없는 Chrome DevTools의 네트워크 탭 예


이름에 "inspect"라는 단어가 포함된 요청과 css 파일을 필터링하는 필터가 있는 Chrome DevTools의 동일한 네트워크 탭의 예

데니스 퍼슨 팔로우

I'm a former teacher writing articles about software development and everything around it. My ambition is to provide people all around the world with free education and humorous reading.