Console Utilities API 참조

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}
를 사용합니다.
<img> 요소
현재 문서에서 선택한 노드 뒤에 나타납니다.
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}





$x(경로 [, startNode])

$x(path)는 지정된 XPath 표현식과 일치하는 DOM 요소의 배열을 반환합니다.

예를 들어 다음은 페이지의 모든 <p> 요소를 반환합니다.
$x("//p")



다음 예시에서는 <a> 요소가 포함된 모든 <p> 요소를 반환합니다.
$x("//p[a]")



다른 선택기 함수와 마찬가지로 $x(path)에는 선택적 두 번째 매개변수인 startNode가 있습니다.
- 요소를 검색할 요소 또는 노드를 지정합니다.



clear()

clear()는 콘솔에서 기록을 지웁니다.
clear();

복사(객체)

copy(object)는 지정된 객체의 문자열 표현을 클립보드에 복사합니다.
copy($0);

디버그(함수)

지정된 함수가 호출되면 디버거가 호출되고
코드를 단계별로 실행하고 디버그할 수 있는 Sources 패널.
debug(getData);



undebug(fn)를 사용하여 함수 중단을 중지하거나 UI를 사용하여 모든 중단점을 사용 중지합니다.

중단점에 관한 자세한 내용은 중단점으로 코드 일시중지를 참고하세요.

dir(object)

dir(object) - 지정된 모든 객체 속성의 객체 스타일 목록을 표시합니다. 이 방법
이는 Console API console.dir() 메서드의 바로가기입니다.

다음 예는 document.body 를 직접 평가하는 경우의 차이점을
명령줄을 실행하고 dir()를 사용하여 동일한 요소를 표시합니다.
document.body;
dir(document.body);



자세한 내용은 Console API의 console.dir() 항목을 참고하세요.

dirxml(객체)

dirxml(object)는 Elements 패널에 표시된 대로 지정된 객체의 XML 표현을 출력합니다.
이 메서드는 console.dirxml() 메서드와 동일합니다.

inspect(object/function)

inspect(object/function)가 열리고 적절한 위치에서 지정된 요소 또는 객체를 선택합니다.
패널: DOM 요소의 Elements 패널 또는 JavaScript 힙 객체의 경우 Profiles 패널입니다.

다음 예에서는 Elements 패널에서 document.body를 엽니다.
inspect(document.body);



검사할 함수를 전달하면 함수가 Sources 패널에서 문서를 엽니다.
검사할 수 있습니다

getEventListeners(object)

getEventListeners(object)는 지정된 객체에 등록된 이벤트 리스너를 반환합니다. 이
반환 값은 등록된 각 이벤트 유형 (click 또는
keydown). 각 배열의 구성원은 등록된 리스너를 설명하는 객체입니다.
확인할 수 있습니다 예를 들어 다음은 문서에 등록된 모든 이벤트 리스너를 나열합니다.
객체:
getEventListeners(document);



지정된 객체에 둘 이상의 리스너가 등록된 경우 배열에 하나의 멤버가 포함됩니다.
를 사용해야 합니다. 다음 예에서는
click 이벤트의 문서 요소를 다음과 같이 처리합니다.



이러한 각 객체를 확장하여 속성을 탐색할 수 있습니다.



자세한 내용은 객체 속성 검사를 참고하세요.

키(객체)

keys(object)는 지정된
객체를 지정합니다. 동일한 속성의 연결된 값을 가져오려면 values()를 사용합니다.

예를 들어 애플리케이션에서 다음 객체를 정의했다고 가정해 보겠습니다.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

편의상 player가 전역 네임스페이스에 정의되어 있다고 가정하고 keys(player)를 입력합니다.
콘솔에서 values(player)를 실행하면 다음과 같은 결과가 발생합니다.



Monitor(함수)

지정된 함수가 호출되면
함수 이름을 입력합니다.
function sum(x, y) {
  return x + y;
}
monitor(sum);



unmonitor(function)를 사용하여 모니터링을 중지합니다.

monitorEvents(object [, events])

지정된 객체에서 지정된 이벤트 중 하나가 발생하면 Event 객체는
살펴보겠습니다 모니터링할 단일 이벤트, 이벤트 배열 또는 일반 이벤트 중 하나를 지정할 수 있습니다.
'유형' 사전 정의된 이벤트 모음에 매핑됩니다. 아래 예를 참조하세요.

다음은 window 객체에서 모든 크기 조절 이벤트를 모니터링합니다.
monitorEvents(window, "resize");



다음은 '크기 조절'을 모두 모니터링할 배열을 정의합니다. '스크롤' 이벤트를 설정하는 방법을 보여줍니다.
monitorEvents(window, ["resize", "scroll"])

또한 사용 가능한 이벤트 '유형' 중 하나인
이벤트를 수신합니다. 아래 표에는 사용 가능한 이벤트 유형 및 관련 이벤트 매핑이 나와 있습니다.

이벤트 유형 및 상응하는 매핑된 이벤트
쥐
'mousedown', 'mouseup', 'click', 'dblclick', 'mousemove', 'mouseover', 'mouseout', 'mousewheel'
키
'keydown', 'keyup', 'keypress', 'textInput'
터치
'touchstart', 'touchmove', 'touchend', 'touchcancel'
제어
'크기 조정', '스크롤', '확대/축소', '초점', '흐리게', '선택', '변경', '제출', '재설정'

예를 들어 다음은 '키'를 사용합니다. 이벤트 유형 입력 텍스트의 해당하는 모든 주요 이벤트
Elements 패널에서 현재 선택된 필드입니다.
monitorEvents($0, "key");

다음은 텍스트 필드에 문자를 입력한 후의 샘플 출력입니다.



unmonitorEvents(object[, events])를 사용하여 모니터링을 중지합니다.

Profile([name]) 및 ProfileEnd([name])

profile()는 선택적 이름을 사용하여 JavaScript CPU 프로파일링 세션을 시작합니다. profileEnd()
프로필을 완성하고 Performance(성능)에 결과를 표시합니다. 기본 트랙



프로파일링을 시작하려면 다음 안내를 따르세요.
profile("Profile 1")

프로파일링을 중지하고 성능 > 기본 트랙:
profileEnd("Profile 1")

성능 > 기본 트랙:



프로필을 중첩할 수도 있습니다. 예를 들어 이 작업은 어떤 순서로든 작동합니다.
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
 드림


queryObjects(Constructor)

콘솔에서 queryObjects(Constructor)를 호출하여 만들어진 객체의 배열을 반환합니다.
를 지정합니다. 예를 들면 다음과 같습니다.


queryObjects(Promise) Promise의 모든 인스턴스를 반환합니다.
queryObjects(HTMLElement) 모든 HTML 요소를 반환합니다.
queryObjects(foo), 여기서 foo은 클래스 이름입니다. 인스턴스화된 모든 객체 반환
new foo()을(를) 통해


queryObjects()의 범위는 콘솔에서 현재 선택된 실행 컨텍스트입니다.

테이블(데이터 [, 열])

선택적 열 제목과 함께 데이터 객체를 전달하여 표 형식으로 객체 데이터를 로깅합니다.
console.table()의 바로가기입니다.

예를 들어 콘솔에서 테이블을 사용하여 이름 목록을 표시하려면 다음을 수행합니다.
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



undebug(함수)

undebug(function)는 지정된 함수의 디버깅을 중지하므로 함수가
디버거가 더 이상 호출되지 않습니다. debug(fn)와 함께 사용됩니다.
undebug(getData);

unmonitor(function)

unmonitor(function)는 지정된 함수의 모니터링을 중지합니다. 이것은
monitor(fn)
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events])는 지정된 객체 및 이벤트의 이벤트 모니터링을 중지합니다. 대상
예를 들어 다음 명령어는 window 객체에서 모든 이벤트 모니터링을 중지합니다.
unmonitorEvents(window);

객체의 특정 이벤트 모니터링을 선택적으로 중지할 수도 있습니다. 예를 들어
코드가 현재 선택된 요소에서 모든 마우스 이벤트를 모니터링하기 시작한 다음 모니터링을 중지합니다.
'mousemove' 이벤트 (콘솔 출력의 노이즈를 줄이기 위한 용도일 수 있음):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

값(객체)

values(object)는 지정된
객체를 지정합니다.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);