UI,UX,접근성,기본개념 등

Chrome 콘솔 숨은 기능

F.E.D 2020. 6. 13. 15:22

크롬 콘솔 숨은 기능들을 살펴봅시다.

Chrome DevTools의 콘솔 유틸리티는 Chrome 브라우저에서 가장 많이 사용되는 가장 유용한 개발 도구 중 하나입니다.

웹 페이지에 추가 기능을 추가하는 소수의 기능을 제공합니다.

웹 페이지에서 디버깅, 프로파일 링 및 모니터링 작업을 도와줍니다.

이 게시물에서는 모두 Chrome 콘솔이 제공하는 매우 유용하지만 알려지지 않은 기능 중 일부를 검토합니다.

1.monitor

이 함수는 함수가 언제 호출되는지 알기 위해 함수를 모니터하는 데 사용됩니다.

function traceFunc (arg) { }
monitor(traceFunc);

traceFunc 함수는 모니터 할 인수로 전달됩니다.
이제 traceFunc가 호출 될 때마다 모니터는 함수가 호출되었음을 알려줍니다.

traceFunc (90);

위와 같이 호출하면
콘솔에 다음과 같이 나타납니다.

function traceFunc was called with arguments: 90

모니터링 하고 있다는 뜻이죠.

2.unmonitor

이렇게하면 표시된 기능이 모니터 기능이 취소됩니다.
traceFunc를 모니터링하지 않기 위해 사용

unmonitor(traceFunc);

직전에 모니터링하던 콘솔 로그가 찍히지 않습니다.

3.monitorEvents

monitorEvents(object,[,events]);

이 함수는 객체에서 이벤트가 호출 될 때 출력을 모니터링하고 기록합니다.

monitorEvents(button, “click”);

monitorEvents(button, [“click”, “mouseover”])

버튼의 "클릭"및 "마우스 오버"이벤트를 모니터링합니다. 마우스를 버튼 위로 움직이면 콘솔에 대한 보고서와 클릭시 보고서가 표시됩니다.

4.unmonitorEvents

위의 기능을 취소합니다.

5.$_

콘솔에서 마지막으로 실행 된 표현식을 호출합니다.
콘솔에서 2 + 2를 입력하고 실행하면 우리는 이것이 표현 평가의 결과 인 4를 보게 될 것입니다.
그런 다음 3 * 2를 입력하고 실행합니다.
그것은 우리에게 6을 줄 것입니다.
3 * 2가 가장 최근에 두 개의 표현식을 실행했습니다.
이제 $ _를 입력하고 실행하면 콘솔에서 가장 최근에 실행 된 표현식 인 3 * 2의 결과가 표시됩니다.
6이 표시됩니다.

6.copy

이 기능은 전달 된 데이터를 클립 보드에 복사합니다.
콘솔에서“copy (“nnamdi”)”를 입력하면“nnamdi”문자열이 클립 보드에 복사됩니다.
이를 확인하려면 브라우저 URL 주소 표시 줄로 이동하여 마우스 오른쪽 버튼을 클릭하고 붙여 넣기를 클릭하면 URL 주소 표시 줄에 "nnamdi"가 붙여져 있습니다.

7.clear

콘솔의 실행 기록이 지워집니다.
전에 실행된 기록도 사라지기 때문에 참조할 수 없습니다.

4 + 4
8
$_
8

clear()
$_
undefined

8.keys(object)

Object.keys와 마찬가지로 이 함수는 객체의 속성 키인 배열을 반환합니다.

9.values(object)

마찬가지로이 함수는 Object.values를 사용하여 객체의 속성 값을 배열로 반환합니다.

10.getEventListeners(object)

이 함수는 객체에 등록 된 이벤트를 반환합니다.
예를 들어, 클릭, 마우스 오버, 마우스 아웃 이벤트를 버튼에 등록하면이 함수는 이벤트 이름을 속성으로 갖는 객체를 반환합니다.
이러한 속성은 이벤트에대한 리스너 함수를 포함하는 배열입니다.

<button id="button" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button</button>
<script>
    function clickHandler() {
    }
    function mousedownHandler() {
    }
    function mouseoverHandler() {
    }
</script>

객체는 버튼에 등록 된 이벤트의 이벤트 이름, 클릭, 마우스 다운, 마우스 오버 속성을가집니다.
속성은 객체를 포함하는 배열입니다.
객체를 확장하면 버튼에 등록 된 이벤트에 대한 리스너 기능임을 알 수 있습니다.

11.$(elementName, [,node])

이 함수는 지정된 요소의 첫 번째 DOM 노드를 반환합니다

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>

$(“button”) // jquery가 아닙니다.

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
    <button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
    <button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
    <button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>

위와 같은 상태일 때 button2에 접근하고 싶다면

$("button", document.querySelector("div"))

위와 같이 선언하면 됩니다.

12.$$(element, [,node]) Double dollar

이 기능은 모든 돔 노드를 배열로 리턴합니다.

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button> <button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button> <button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button> <button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>

위와 같은 상태일 때

또 다른 많은 기능들이 있습니다. 콘솔을 애용하세요. 디버깅이 편리해집니다.

table
debug
undebug
$x()
dir
dirxml
profile() profileEnd()
inspect
$0 ~ $X

출처 : https://blog.bitsrc.io/10-chrome-console-utility-apis-you-probably-never-used-14a0b64f1bd6

저작자표시