.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
floatFirstTOC: right
YAML
복사
Console Ninja
•
실행 중인 브라우저나 노드 애플리케이션에서 에디터로 바로 console.log 출력과 런타임 오류를 표시하는 VS 코드 확장 프로그램
•
브라우저 개발 도구 콘솔 탭이나 노드 앱의 터미널 출력과 비슷하지만 컨텍스트를 전환할 필요 없이 값이 코드에 연결되어 에디터에 인체공학적으로 표시
connected to your code and displayed ergonomically in your editor.
console.log
코드에 console.log를 추가하면 에디터에서 관련 코드 줄 옆에 로그 출력이 표시됩니다. 콘솔 로그` 값 위로 마우스를 가져가면 추가 세부 정보가 표시됩니다. 로그 출력은 로그 뷰어에도 표시됩니다.
console.trace
코드에 console.trace를 추가하면 console.trace가 있는 코드 줄 옆에 에디터에서 바로 통화 스택 추적이 표시됩니다. 스택 추적 출력은 로그 뷰어에도 표시됩니다.
console.time
코드에 console.time('일부_레이블') 및 console.timeEnd('일부_레이블')를 추가하면 에디터에서 호출 사이에 코드를 실행하는 데 걸린 시간이 console.timeEnd가 있는 코드 줄 바로 옆에 표시됩니다. 시간 출력은 로그 뷰어에도 표시됩니다.
마우스오버 툴팁
로그나 오류와 같은 콘솔 Ninja 출력 위에 마우스를 올리면 로그 값, 타임스탬프, 오류 메시지, 스택 추적 등 자세한 정보가 표시됩니다.
예를 들어 위젯의 오른쪽 상단 모서리에 아이콘으로 표시되는 몇 가지 작업도 마우스오버 툴팁에 설명되어 있습니다:
•
`콘솔 출력에 표시` 콘솔 Ninja의 로그 뷰어를 열고 로그 항목에 초점을 맞추는 작업입니다.
•
필터링 설정 열기 : 콘솔 닌자의 출력 필터링 설정을 여는 작업.
Log viewer
•
콘솔 로그 결과가 있는 줄에서 명령이 실행되면 로그 뷰어에서 마지막으로 기록된 로그 항목에 초점이 맞춰집니다.
각 로그 항목은 요약 세부 정보를 제공하며 기본적으로 축소되어 있어 마우스 또는 오른쪽 화살표 키보드 키를 사용하여 초점을 맞춘 후 확장하여 세부 정보를 확인할 수 있는 짧은 미리 보기를 제공합니다. 세부 정보가 확장되면 'Enter' 키보드 키를 사용하여 세부 정보 키보드 선택/탐색 모드로 들어갈 수 있으며, 'Esc' 키를 사용하여 모드를 종료할 수 있습니다.
각 항목 미리 보기 및 확장된 오류 항목 세부 정보에는 대상 소스 코드에 대한 클릭 가능한 링크가 포함되어 있습니다. http위치를 가리키는 링크는 파일을 먼저 다운로드하여 편집기에서 열립니다(설정에 따라 브라우저에서http` 링크를 대신 열 수 있음).
브라우저 개발 도구와 마찬가지로 코드의 같은 위치에서 기록되고 값이 같은 기본 유형의 순차적 항목(예: string, boolean, number)과 모든 오류는 함께 그룹화되어 단일 항목으로 표시됩니다. 항목 접두사는 그룹 내 항목 수를 나타냅니다.
빠른 탐색을 위해 다음과 같은 키보드 단축키가 지원됩니다:
•
위쪽 화살표및아래쪽 화살표`를 사용하여 표시된 다음/이전 항목으로 이동합니다.
•
홈및끝`은 표시된 첫 번째/마지막 항목으로 이동합니다.
•
왼쪽 화살표를 누르면 초점이 맞춰진 항목 세부 정보가 축소되고 Ctrl/Cmd + 왼쪽 화살표`를 누르면 확장된 모든 항목 세부 정보가 축소됩니다.
또한 다음과 같은 명령(로그 뷰어 상단에 아이콘 버튼으로도 표시됨)을 사용할 수 있습니다:
•
콘솔 닌자에서 인라인 출력을 포함한 모든 출력을 지우려면 모든 출력 지우기를 클릭합니다.
•
현재 표시된 항목과 이후에 추가된 새 항목 사이에 가로 구분선을 추가하려면 체크포인트 추가를 클릭합니다.
•
'날짜 및 시간 표시 모드 변경'은 표시된 각 로그 항목의 날짜/시간 부분을 표시하거나 숨깁니다.
•
파일 변경 시 출력의 자동 지우기 토글`. 자동 지우기를 '끄기'로 설정하면 최근 파일 변경 이전에 기록된 로그 항목이 흐리게 표시되고, 파일 링크 호버 아이콘이 변경되어 해당 항목이 기록된 이후 표시 위치가 변경되었을 수 있음을 나타냅니다.
•
새 로그 항목이 추가되면 최근 로그 항목으로 자동 스크롤 토글. 출력을 수동으로 위로 스크롤하여 마지막 항목 행이 보이지 않으면 출력을 수동으로 스크롤하여 마지막 항목 행이 표시될 때까지 자동 스크롤이 일시 중지됩니다.
로그 뷰어는 Ctrl/Cmd + F 키보드 단축키를 이용한 검색을 지원합니다.
로그 뷰어는 '파일 옆'과 '보기'의 두 가지 모드로 표시할 수 있으며, 모드를 설정하는 설정이 있습니다.
'파일 옆' 모드(기본값 및 권장)에서는 뷰어가 현재 에디터에서 왼쪽에 있는 별도의 새 에디터 그룹에 표시됩니다. 이 경우 뷰는 열려 있는 다른 에디터 탭처럼 작동합니다. 즉, VS 코드 파일 탐색기 보기의 열린 에디터에 표시됩니다.
뷰 모드에서는 뷰어가 VS 코드 측면 보기로 표시됩니다. 뷰를 다른 VS 코드 패널로 이동할 수도 있습니다. 뷰어의 권장 위치는 에디터의 하단 창에서 VS Code출력 뷰의 오른쪽에 있습니다.
