개발자도구에 있는 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
감사합니다.
'브라우저 활용' 카테고리의 다른 글
[개발자도구] 네트워크 필터 의미 | js css fetch xhr ws (0) | 2024.01.17 |
---|---|
[개발자도구] 네트워크 디버깅 (0) | 2024.01.17 |
[웹 브라우저 활용] 웹 페이지 캡처 방법 (1) | 2024.01.11 |
[Copilot | Microsoft Bing] GPT-4 무료로 사용하기 (1) | 2024.01.10 |
[Copilot | Microsoft Edge] 웹 페이지 요약 툴 (0) | 2024.01.10 |