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

chrome.devtools.panels

설명

chrome.devtools.panels API를 사용하여 확장 프로그램을 개발자 도구 창 UI에 통합하세요. 자체 패널을 만들고 기존 패널에 액세스하고 사이드바를 추가할 수 있습니다.

매니페스트

이 API를 사용하려면 매니페스트에서 다음 키를 선언해야 합니다.

"devtools_page"

Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약을 참조하세요.

개요

각 확장 프로그램 패널과 사이드바는 별도의 HTML 페이지로 표시됩니다. 모든 확장 프로그램 페이지가 표시됨 개발자 도구 창에서 chrome.devtools API의 모든 모듈에 액세스할 수 있을 뿐만 아니라 chrome.extension API로 업그레이드됩니다. 다른 확장 프로그램 API는 개발자 내의 페이지에서 사용할 수 없습니다. 도구 창을 실행하지만, 확장 프로그램의 백그라운드 페이지로 요청을 전송하여 호출할 수 있습니다. 콘텐츠 스크립트에서 처리하는 방식과 비슷합니다.

devtools.panels.setOpenResourceHandler 메서드를 사용하여 콜백 함수를 설치할 수 있습니다. 는 리소스 열기를 위한 사용자 요청 (일반적으로 리소스의 링크 클릭)을 개발자 도구 창)에서 사용할 수 있습니다. 설치된 핸들러 중 최대 하나만 호출됩니다. 지정할 수 있습니다( 기본 동작 또는 리소스를 처리하기 위한 확장 프로그램)를 선택하는 것이 좋습니다. 확인할 수 있습니다 확장 프로그램에서 setOpenResourceHandler()를 여러 번 호출하는 경우 마지막 호출만 유지됩니다.

예

다음 코드는Panel.htmlFontPicker.png 글꼴 선택 도구라는 라벨이 지정된 개발자 도구 툴바:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

다음 코드는 Sidebar.html에 포함되고 글꼴 속성이라는 제목의 사이드바 창을 Elements 패널을 사용합니다. 그런 다음 높이를 8ex로 설정합니다.

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

이 스크린샷은 위의 예가 개발자 도구 창에 미치는 영향을 보여줍니다.

DevTools 툴바의 확장 프로그램 아이콘 패널

이 API를 사용하려면 chrome-extension-samples에서 devtools 패널 API 예시를 설치하세요. 저장소

유형

Button

확장 프로그램에서 생성한 버튼

속성

onClicked

이벤트<functionvoid>

버튼을 클릭하면 실행됩니다.

onClicked.addListener 함수는 다음과 같습니다.
```
(callback: function) => {...}
```
- 콜백
  
  함수
  
  callback 매개변수는 다음과 같습니다.
```
() => void
```
update

void

버튼의 속성을 업데이트합니다. 인수 중 일부가 생략되거나 null인 경우 해당 속성이 업데이트되지 않습니다.

update 함수는 다음과 같습니다.
```
(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
```
- iconPath
  
  문자열(선택사항)
  
  버튼의 새 아이콘의 경로입니다.
- tooltipText
  
  문자열(선택사항)
  
  사용자가 버튼 위로 마우스를 가져가면 도움말로 표시되는 텍스트입니다.
- 사용중지됨
  
  불리언 선택사항
  
  버튼의 사용 중지 여부입니다.

ElementsPanel

요소 패널을 나타냅니다.

속성

onSelectionChanged

이벤트<functionvoid>

패널에서 객체를 선택하면 실행됩니다.

onSelectionChanged.addListener 함수는 다음과 같습니다.
```
(callback: function) => {...}
```
- 콜백
  
  함수
  
  callback 매개변수는 다음과 같습니다.
```
() => void
```
createSidebarPane

void

패널의 사이드바 내에 창을 만듭니다.

createSidebarPane 함수는 다음과 같습니다.
```
(title: string, callback?: function) => {...}
```
- 제목
  
  문자열
  
  사이드바 캡션에 표시되는 텍스트입니다.
- 콜백
  
  함수 선택사항
  
  callback 매개변수는 다음과 같습니다.
```
(result: ExtensionSidebarPane) => void
```
  - 결과
    
    ExtensionSidebarPane
    
    생성된 사이드바 창의 ExtensionSidebarPane 객체

ExtensionPanel

확장 프로그램으로 만든 패널을 나타냅니다.

속성

onHidden

이벤트<functionvoid>

사용자가 패널에서 벗어날 때 실행됩니다.

onHidden.addListener 함수는 다음과 같습니다.
```
(callback: function) => {...}
```
- 콜백
  
  함수
  
  callback 매개변수는 다음과 같습니다.
```
() => void
```
onSearch

이벤트<functionvoid>

검색 작업 (새 검색 시작, 검색결과 탐색 또는 검색 취소) 시 실행됩니다.

onSearch.addListener 함수는 다음과 같습니다.
```
(callback: function) => {...}
```
- 콜백
  
  함수
  
  callback 매개변수는 다음과 같습니다.
```
(action: string, queryString?: string) => void
```
  - action
    
    문자열
  - queryString
    
    문자열(선택사항)
onShown

이벤트<functionvoid>

사용자가 패널로 전환할 때 실행됩니다.

onShown.addListener 함수는 다음과 같습니다.
```
(callback: function) => {...}
```
- 콜백
  
  함수
  
  callback 매개변수는 다음과 같습니다.
```
(window: Window) => void
```
  - 창
    
    창
createStatusBarButton

void

패널의 상태 표시줄에 버튼을 추가합니다.

createStatusBarButton 함수는 다음과 같습니다.
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  문자열
  
  버튼 아이콘의 경로입니다. 파일에는 2개의 32x24 아이콘으로 구성된 64x24픽셀 이미지가 포함되어야 합니다. 왼쪽 아이콘은 버튼이 비활성 상태일 때 사용됩니다. 버튼을 누르면 오른쪽 아이콘이 표시됩니다.
- tooltipText
  
  문자열
  
  사용자가 버튼 위로 마우스를 가져가면 도움말로 표시되는 텍스트입니다.
- 사용중지됨
  
  부울
  
  버튼의 사용 중지 여부입니다.
- returns
  버튼

ExtensionSidebarPane

확장 프로그램에서 생성한 사이드바.

속성

onHidden

이벤트<functionvoid>

사용자가 사이드바 창을 호스팅하는 패널에서 벗어나 사이드바 창이 숨겨지면 실행됩니다.

onHidden.addListener 함수는 다음과 같습니다.
```
(callback: function) => {...}
```
- 콜백
  
  함수
  
  callback 매개변수는 다음과 같습니다.
```
() => void
```
onShown

이벤트<functionvoid>

사용자가 사이드바 창을 호스팅하는 패널로 전환한 결과 사이드바 창이 표시되면 실행됩니다.

onShown.addListener 함수는 다음과 같습니다.
```
(callback: function) => {...}
```
- 콜백
  
  함수
  
  callback 매개변수는 다음과 같습니다.
```
(window: Window) => void
```
  - 창
    
    창
setExpression

void

검사된 페이지 내에서 평가되는 표현식을 설정합니다. 사이드바 창에 결과가 표시됩니다.

setExpression 함수는 다음과 같습니다.
```
(expression: string, rootTitle?: string, callback?: function) => {...}
```
- 표현식
  
  문자열
  
  검사된 페이지의 컨텍스트에서 평가할 표현식입니다. JavaScript 객체와 DOM 노드는 콘솔/시계처럼 확장 가능한 트리에 표시됩니다.
- rootTitle
  
  문자열(선택사항)
  
  표현식 트리 루트의 제목입니다(선택사항).
- 콜백
  
  함수 선택사항
  
  callback 매개변수는 다음과 같습니다.
```
() => void
```
setHeight

void

사이드바의 높이를 설정합니다.

setHeight 함수는 다음과 같습니다.
```
(height: string) => {...}
```
- 높이
  
  문자열
  
  CSS와 유사한 크기 사양(예: '100px' 또는 '12ex')
setObject

void

사이드바 창에 표시할 JSON 호환 객체를 설정합니다.

setObject 함수는 다음과 같습니다.
```
(jsonObject: string, rootTitle?: string, callback?: function) => {...}
```
- jsonObject
  
  문자열
  
  검사된 페이지의 컨텍스트에 표시될 객체입니다. 호출자 (API 클라이언트)의 컨텍스트에서 평가됩니다.
- rootTitle
  
  문자열(선택사항)
  
  표현식 트리 루트의 제목입니다(선택사항).
- 콜백
  
  함수 선택사항
  
  callback 매개변수는 다음과 같습니다.
```
() => void
```
setPage

void

사이드바 창에 표시할 HTML 페이지를 설정합니다.

setPage 함수는 다음과 같습니다.
```
(path: string) => {...}
```
- 경로
  
  문자열
  
  사이드바 내에 표시할 확장 프로그램 페이지의 상대 경로입니다.

SourcesPanel

소스 패널을 나타냅니다.

속성

onSelectionChanged

이벤트<functionvoid>

패널에서 객체를 선택하면 실행됩니다.

onSelectionChanged.addListener 함수는 다음과 같습니다.
```
(callback: function) => {...}
```
- 콜백
  
  함수
  
  callback 매개변수는 다음과 같습니다.
```
() => void
```
createSidebarPane

void

패널의 사이드바 내에 창을 만듭니다.

createSidebarPane 함수는 다음과 같습니다.
```
(title: string, callback?: function) => {...}
```
- 제목
  
  문자열
  
  사이드바 캡션에 표시되는 텍스트입니다.
- 콜백
  
  함수 선택사항
  
  callback 매개변수는 다음과 같습니다.
```
(result: ExtensionSidebarPane) => void
```
  - 결과
    
    ExtensionSidebarPane
    
    생성된 사이드바 창의 ExtensionSidebarPane 객체

속성

elements

요소 패널

유형

ElementsPanel

sources

소스 패널

유형

SourcesPanel

themeName

Chrome 59 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

사용자의 DevTools 설정에 설정된 색상 테마의 이름입니다. 가능한 값은 default (기본값) 및 dark입니다.

유형

문자열

메서드

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
)

확장 패널을 생성합니다.

매개변수

제목

문자열

개발자 도구 툴바의 확장 프로그램 아이콘 옆에 표시되는 제목
iconPath

문자열

확장 프로그램 디렉터리를 기준으로 한 패널 아이콘의 경로입니다.
pagePath

문자열

확장 프로그램 디렉터리를 기준으로 한 패널의 HTML 페이지 경로입니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
(panel: ExtensionPanel) => void
```
- 패널
  
  ExtensionPanel
  
  생성된 패널을 나타내는 ExtensionPanel 객체입니다.

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
)

DevTools에 개발자 도구 패널에서 URL을 열도록 요청합니다.

매개변수

URL

문자열

열려는 리소스의 URL입니다.
lineNumber

숫자

리소스가 로드될 때 스크롤할 줄 번호를 지정합니다.
columnNumber

숫자 선택사항

Chrome 114 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

리소스가 로드될 때 스크롤할 열 번호를 지정합니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
() => void
```

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
)

사용자가 개발자 도구 창에서 리소스 링크를 클릭할 때 호출할 함수를 지정합니다. 핸들러를 설정 해제하려면 매개변수 없이 메서드를 호출하거나 null을 매개변수로 전달합니다.

매개변수

콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
(resource: Resource) => void
```
- 리소스
  
  리소스
  
  클릭된 리소스의 devtools.inspectedWindow.Resource 객체.