이 페이지는 Cloud Translation API를 통해 번역되었습니다.

새로운 명령어 편집기로 Chrome Devtools 프로토콜 (CDP) 명령어를 효율적으로 만드세요.

Hadrien Jaubert

Chrome DevTools 프로토콜 (CDP)은 개발자가 실행 중인 Chrome 브라우저와 통신할 수 있는 원격 디버깅 프로토콜 (API)입니다. Chrome DevTools는 CDP를 사용하여 브라우저 상태를 검사하고, 동작을 제어하며, 디버깅 정보를 수집합니다. CDP를 사용하는 Chrome 확장 프로그램을 빌드할 수도 있습니다.

예를 들어 다음은 지정된 styleSheetId의 스타일시트에서 location로 지정된 위치에 지정된 ruleText가 포함된 새 규칙을 삽입하는 CDP 명령어입니다.

{ 
    command: 'CSS.addRule', 
    parameters: {
        styleSheetId: '2',
        ruleText:'Example', 
        location: {
            startLine: 1,
            startColumn: 1,
            endLine: 1,
            endColumn: 1
        }
    }
}

프로토콜 모니터 창 탭에서는 CDP 요청을 전송하고 DevTools에서 전송 및 수신하는 모든 CDP 요청과 응답을 볼 수 있습니다.

프로토콜 모니터 하단의 명령줄 막대

이전에는 특히 매개변수가 많은 명령어를 직접 작성하기가 어려웠습니다. 시작 괄호와 닫는 괄호, 따옴표에 유의해야 할 뿐만 아니라 명령어의 매개변수도 기억해야 했습니다. 이 때문에 CDP 문서를 참고해야 했습니다.

이 문제를 해결하기 위해 DevTools에서는 다음과 같은 주요 목표를 가진 새로운 CDP 편집기를 도입했습니다.

명령 자동 완성 자동 완성 기능을 통해 사용 가능한 명령어 목록을 제공하여 CDP 명령어 입력을 간소화합니다.
명령어 매개변수 자동 입력 사용 가능한 명령어 매개변수 목록을 CDP 문서에서 확인할 필요가 줄어듭니다.
매개변수 입력 간소화 전송하려는 매개변수의 값만 입력하면 됩니다.
수정하여 다시 보내기 CDP 명령어를 더 빠르게 수정하여 프로토타입 제작 속도를 개선합니다.

이제 이 새로운 편집기의 기능과 사용 방법을 살펴보겠습니다.

자동 완성 기능

자동 완성 드롭다운 메뉴

이제 명령어 입력창에 자동 완성 기능이 제공됩니다. 액세스 권한이 있는 CDP 명령어의 이름을 작성하는 데 도움이 됩니다. 이는 매개변수를 허용하지 않는 명령어에 매우 유용할 수 있습니다.

문자열 및 숫자 매개변수

이제 이 새로운 편집기를 사용하여 기본 매개변수의 값을 쉽게 수정할 수 있습니다. 편집기를 열려면 명령어 입력 옆에 있는 아이콘을 클릭합니다.

명령어 이름을 입력하면 편집기에 해당하는 매개변수가 자동으로 표시됩니다. 어떤 명령어와 어떤 매개변수가 함께 사용되는지 문서를 찾아볼 필요가 없습니다. 또한 편집기에서는 필수 매개변수 (빨간색)가 먼저 표시되고 선택적 매개변수 (파란색)가 그다음에 표시되는 등 지정된 순서로 매개변수를 표시합니다.

선택적 매개변수에 값을 추가하려면 이름 위로 마우스를 가져간 다음 + 버튼을 클릭합니다. 매개변수를 정의되지 않음으로 재설정하려면 기본값으로 재설정 버튼을 클릭합니다.

+ 및 '기본값으로 재설정' 버튼

enum 및 불리언 매개변수

enum 또는 불리언 매개변수를 수정할 때는 가능한 값 (enum의 경우)을 선택할 수 있는 드롭다운 메뉴 또는 불리언의 경우 간단한 true 또는 false 옵션이 표시됩니다. 이 기능을 사용하면 열거형 매개변수에 잘못된 값을 입력할 가능성을 줄이고 정확성과 단순성을 유지할 수 있습니다.

불리언 및 enum 드롭다운 메뉴

배열 매개변수

배열 매개변수의 경우 배열에 값을 직접 추가할 수 있습니다. 매개변수 행 위로 마우스를 가져가 + 버튼을 클릭합니다.

배열 항목을 하나씩 삭제하려면 항목 옆에 있는 휴지통 버튼을 클릭합니다. 블록 버튼을 사용하여 배열에서 모든 매개변수를 지울 수도 있습니다. 이 경우 배열 매개변수가 []로 재설정됩니다.

'매개변수 삭제' 및 '기본값으로 재설정' 버튼

객체 매개변수

객체 매개변수를 허용하는 명령어를 입력하면 편집기에 이 객체의 키가 표시되며 값을 직접 수정할 수 있습니다. 이는 모든 유형의 중첩 매개변수에 적용됩니다.

중첩된 매개변수

편집기에서 명령어 및 매개변수의 기능 알아보기

매개변수나 명령어의 목적을 확신할 수 없는 경우가 있었나요? 이제 명령어 또는 매개변수 위로 마우스를 가져가면 온라인 문서 링크가 포함된 설명 도움말이 표시됩니다.

명령어 위로 마우스를 가져가면 표시되는 설명성 도움말입니다.

잘못된 매개변수를 보내기 전에 경고 표시

이전에는 매개변수 값이 올바른 유형인지 알 수 없어 오류 응답을 읽기 위해 기다려야 했지만 이제 이 새로운 편집기를 사용하면 됩니다. 입력한 값을 매개변수가 허용하지 못하는 경우 실시간 오류를 표시합니다.

명령어 다시 보내기

방금 전송한 명령어의 매개변수를 조정해야 하는 경우 다시 입력할 필요가 없습니다. 명령어를 수정하고 다시 전송하려면 데이터 그리드에서 항목을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 수정 및 다시 전송을 선택합니다. 이렇게 하면 CDP 편집기가 자동으로 다시 열리고 선택한 명령어로 미리 채워집니다.

명령어를 JSON 형식으로 복사

JSON 형식의 CDP 명령어를 클립보드에 복사하려면 툴바 왼쪽 끝에 있는 복사 아이콘을 클릭합니다. 또한 입력창에 명령어를 직접 입력하면 편집기에 원활하게 채워지고 그 반대의 경우도 마찬가지입니다.

결론

DevTools팀이 이 새로운 CDP 편집기를 설계한 목표는 CDP 명령어를 간편하게 입력할 수 있도록 하는 것이었습니다. 이 새로운 편집기를 사용하면 문서와 함께 매개변수를 확인하고 CDP 명령어를 더 쉽게 전송할 수 있습니다.

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.

crbug.com에서 의견 및 기능 요청을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools에 트윗하세요.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 댓글을 남겨주세요.