브라우저 활용

{개발자도구} Console 탭 유틸 함수

조드래곤나인 2024. 1. 29. 18:33

 

개발자도구에 있는 Console 탭에서 디버깅에 유용한 유틸 함수를 제공합니다.

오늘은 알고 있으면 언젠간 써먹을

Console 탭 유틸 함수를 알아보겠습니다.

 

목차
- clear(): 콘솔 로그 모두 제거하고 싶을 때
-  copy(param): 복사하고 싶을 때
-  $_: 이전 실행 결괏값 참조하고 싶을 때
-  $(selector), $$(selector): DOM 참조하고 싶을 때

 

clear(): 콘솔 로그 모두 제거하고 싶을 때

 

clear() 함수는 현재 콘솔 패널에 표시되고 있는 로그들을 모두 제거합니다.

로그를 모두 제거하고 새로운 작업을 하고 싶을 때 유용합니다.

 

 

clear() 실행 후에는 Console was cleared와 같은 문구가 표시됩니다.

 

copy(param): 복사하고 싶을 때

copy(param)은 param에 있는 내용을 복사합니다.

자바스크립트 실행 결과값을 복사하고 싶을 때 유용합니다.
테스트 케이스에서 사용할 목업 데이터를 만들 때도 사용하곤 합니다.

 

$_: 이전 실행 결괏값 참조하고 싶을 때

 

$_는 이전 실행 결과값을 참조하고 싶을 때 사용합니다.
배열을 디버깅할 때 배열을 먼저 실행하고 $_로 참조할 수 있습니다.

 

$(selector), $$(selector): DOM 참조하고 싶을 때

$(selector), $$(selector)는 DOM을 참조하고 싶을 때 사용합니다.

$(selector)는 document.querySelector와 유사하고,

$$(selector)는 document.querySelectorAll과 유사합니다.

 

 

이상으로 Console 탭 유틸 함수를 알아봤습니다.


여기서 소개한 유틸 함수 이외도 다양한 함수들이 있으니

궁금하신 분들은 아래 링크 참고 바랍니다.

 

Console tool utility functions and selectors - Microsoft Edge Development

Convenience utility functions, commands, and DOM selectors that are available in the Console tool in Microsoft Edge DevTools, but not through JavaScript source files.

learn.microsoft.com

 

감사합니다.

728x90