어떻게 JS console.log()기술 을 사용 하여 작업 효율 을 높 입 니까?

콘 솔.log(message)의 사용법 이 간단 하 다 는 것 을 알 고 있 습 니 다.매개 변수 message 를 콘 솔 에 인쇄 하 는 것 을 의미 합 니 다.
console.log('전단 소지')
//전단 소지
const myAge = 28
console.log(myAge) // 28
본 고 는 주로 5 가지 유용 한 기 교 를 소개 하 는데,console.log()를 사용 할 때 업무 효율 을 높 일 수 있 도록 도와 준다.
1.전체 이름 변수 인쇄
콘 솔 에서 여러 변 수 를 인쇄 하면 수량 이 비교적 많은 상황 에서 우 리 는 어떤 변수 가 어떤 값 에 대응 하 는 지 구별 하기 어렵다.
function sum(a, b) {
console.log(b);
return a + b;
}
sum(1, 2);
sum(4, 5);
상술 한 코드 를 실행 한 후에 우 리 는 일련의 숫자 만 볼 수 있다.
값 과 변수 간 의 관 계 를 표시 하려 면 괄호 로 변 수 를 싸 도 됩 니 다:{b}:
2.고급 포맷
콘 솔 에 어떤 것 을 인쇄 하 는 가장 흔 한 방법 은 console.log()를 간단하게 사용 하 는 것 입 니 다.
console.log('전단 소지')//전단 소지
때때로 우 리 는 여러 변 수 를 포함 하 는 정 보 를 원할 수도 있다.다행히도 console.log()는%s,%i 등 설명 자 를 사용 하여 sprintf()방식 으로 문자열 을 포맷 할 수 있 습 니 다.
const user='전단 소지';
const attempts = 5;
console.log('%s 로그 인 실패%i 회',user,attempts);
//전단 소지 로그 인 실패 5 회
%s 와%i 는 user 와 attempts 의 값 으로 대 체 됩 니 다.설명자%s 는 문자열 로,%i 는 숫자 로 변 환 됩 니 다.
다음은 설명자 로 사용 할 수 있 는 목록 입 니 다.
설명자
역할.
%s
요소 문자열 로 변환
%d 혹은%i
원소 가 정수 로 변환 되다
%f
요소 가 부동 소수점 으로 변환 됨
%o
요 소 는 가장 효과 적 인 형식 으로 표 시 됩 니 다.
%O
요 소 는 가장 효과 적 인 형식 으로 표 시 됩 니 다.
%c
제 공 된 css 적용
3.스타일 이 있 는 인쇄 스타일
브 라 우 저 컨트롤 러 는 인쇄 된 메시지 에 스타일 을 적용 할 수 있 도록 합 니 다.%c 설명 자 를 해당 하 는 css 스타일 과 함께 사용 할 수 있 습 니 다.다음 과 같 습 니 다.
console.log('%c Big message', 'font-size: 36px; font-weight: bold');
설명자%c 적용 CSS 스타일'font-size:36px;font-weight: bold'
4.대화 식 전시
로그 스타일 화 는 호스트 의 콘 솔 에 의존 합 니 다.Chrome 과 Firefox 같은 브 라 우 저 는 대상 과 배열 의 상호작용 을 제공 하고 Node 콘 솔 은 텍스트 로 출력 합 니 다.
Chrome 이 일반 대상,배열,DOM 트 리 를 어떻게 인쇄 하 는 지 살 펴 보고 이 요소 들 과 펼 치고 접 으 며 상호작용 을 할 수 있 습 니 다.
4.1 Objects

const myObject = {
 name: 'John Smith',
 profession: 'agent'
};
console.log(myObject);

대상 속성 목록 을 펼 치고 접 을 수 있 으 며 대상 의 원형 도 볼 수 있 습 니 다.
4.2 Arrays
const characters = ['Neo', 'Morpheus', 'John Smith'];
console.log(characters);
4.3 DOM 트 리 구조
우 리 는 콘 솔 에 표 시 된 DOM 요소 와 직접 상호작용 을 할 수 있다.
console.log(document.getElementById('root'));
Chrome 콘 솔 에서 DOM 요 소 를 확장 할 수 있 습 니 다.
4.4 인 터 랙 티 브 내장 메시지
%o 설명자(값 이 올 바른 인쇄 형식 과 연 결 됨)는 텍스트 메시지 에 배열,대상,DOM 요소 와 일반 텍스트 를 삽입 하여 상호작용 을 잃 지 않 습 니 다.

const myObject = {
 name: 'John Smith',
 profession: 'agent'
};

console.log('Neo, be aware of %o', myObject);

콘 솔 에서 볼 때 my Object 배열 은 문자열 로 바 뀌 지 않 고 상호작용 을 유지 합 니 다.
5.Node 콘 솔 에서 대상 인쇄
Node 의 log 는 일반 텍스트 로 출력 합 니 다.단,Node 의 console.log()는 심층 포 함 된 대상 을 표시 하지 않 습 니 다.3 급 대상 은[Object]로 표 시 됩 니 다.

const myObject = {
 propA: {
  propB: {
   propC: {
    propD: 'hello'
   }
  }
 }
};

console.log(myObject);

스 크 립 트 를 실행 할 때 propc 의 대상 을[Object]로 인쇄 합 니 다.

전체 대상 구 조 를 보 려 면 jsON.stringify()를 사용 할 수 있 습 니 다.

const myObject = {
 propA: {
  propB: {
   propC: {
    propD: 'hello'
   }
  }
 }
};

console.log(jsON.stringify(myObject, null, 2));

JSON.stringify(my Object,null,2)는 이 대상 의 JSON 표현 형식 을 되 돌려 주 고 세 번 째 매개 변수 2 는 빈 칸 에 들 여 쓰기 크기 를 설정 합 니 다.

이 다섯 가지 기술 이 console.log()를 사용 하여 더욱 효율 적 인 체험 을 할 수 있 기 를 바 랍 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.