콘솔 명령 안내서

웹 브라우저 개발자 콘솔은 강력한 디버깅 도구로 간단한 오류 리포터에서 포괄적 인 로깅 시스템으로 발전합니다. 네트워크 활동, 보안 문제 등을 추적하고 JavaScript가 console 객체를 통해 디버깅 정보를 출력하도록 허용합니다. 브라우저에서 크게 일관되지만 미묘한 시각적 및 기능적 차이가 있습니다. 이 안내서는 Firefox 및 Chrome에 중점을두고 Chromium 기반 가장자리는 Chrome과 유사하게 작동합니다. Whatwg 사양은 자세한 내용을 제공합니다.

빠른 탐색

• 로깅 기본 사항
• 콘솔 청산
• 일반적인 벌목 방법
• 문자열 서식
• 스타일링 출력
• 주장
• 계산 발생
• 특성 검사
• 그룹화 출력
• 테이블 출력
• 타이밍 작업
• 스택 추적
• debugger 디버깅
• 추가 콘솔 유틸리티

console.log() 로 로깅

console 객체 자체를 검사하여 시작하십시오.

 Console.log (콘솔);

이것은 객체의 속성, 대부분 기능을 보여줍니다. 예를 들어, Chrome에는 "메모리"속성이 포함되어 있고 Firefox는 "이름"속성을 제공합니다. 이러한 차이는 일반적으로 미미합니다.

콘솔 지우기 : console.clear()

혼란스러운 콘솔은 디버깅을 방해합니다. 사용:

 Console.clear ();

이것은 콘솔 출력을 지우고 확인 메시지를 표시합니다 (예 : "콘솔이 지워졌습니다").

공통 로깅 함수 : debug() , error() , info() , log() , warn()

5 가지 기능은 비슷해 보이지만 브라우저 별 개선 사항을 제공합니다.

 console.debug ();
console.error ();
console.info ();
console.log ();
console.warn ();

이러한 기능은 색상 코딩 및 아이콘 사용과 관련하여 크롬 및 파이어 폭스에서 약간 다르고 제공된 세부 수준 (예 : 오류 스택 추적). 브라우저는 각 로그 유형의 가시성을 제어하기위한 필터링 옵션을 제공합니다.

이러한 기능은 다양한 JavaScript 데이터 유형 (문자열, 숫자, 객체, 배열)을 인수로 받아들입니다. 여러 인수가 인라인으로 표시됩니다.

문자열 대체

향상된 로깅에는 명확한 출력을위한 문자열 대체가 포함됩니다.

 console.log ( '이것은 문자열입니다 : %s', 'String');
Console.log ( '이것은 숫자 : %i', 42);
console.log ( '이것은 객체입니다 : %o', {object : 'object'});

지원되는 치환 유형에는 %s (string), %i (정수), %o (개체) 등이 포함됩니다. 템플릿 리터럴은보다 간결한 대안을 제공합니다.

 console.log (`이것은 문자열입니다 : $ { 'string'}`);
console.log (`이것은 숫자입니다 : $ {42}`);
console.log (`이것은 객체입니다 : $ {{object : 'object'}}`);

유연한 형식을 위해 두 방법을 모두 결합 할 수 있습니다.

스타일링 콘솔 출력

가독성을 높이기 위해 CSS 스타일을 적용하십시오.

 console.log ( '%c this는 큰 빨간색 텍스트', '색상 : 빨간색; font-size : 30px;');

작은 브라우저 별 렌더링 차이가 발생할 수 있습니다. 다중 %c 자리 표시자는 단일 로그 명령문 내에서 다양한 스타일을 허용합니다. 변수는 코드 조직을 개선하여 스타일을 저장하고 재사용하는 데 사용될 수 있습니다.

어설 션 : console.assert()

console.assert() 부울 상태를 취합니다. false 인 경우 오류 메시지를 출력합니다. 그렇지 않으면 아무것도하지 않습니다. 이것은 조건부 오류 로깅을 단순화합니다.

 값 = 10하자;
console.assert (값 <p> Chrome은 실패한 어설 션에 대한 스택 흔적을 제공하지만 Firefox는 그렇지 않습니다.</p><h3> 계산 발생 : <code>count()</code> 및 <code>countReset()</code>
</h3><p> <code>console.count()</code> 사용하여 기능 호출 또는 이벤트 발생을 추적합니다. 선택적 레이블은 별도의 카운트를 허용합니다.</p><pre class="brush:php;toolbar:false"> console.count ( 'myfunction');
console.count ( 'myfunction');
Console.count ( '다른 기능');

console.countReset() 특정 카운터를 재설정합니다. 리셋이 시각적으로 표시되는 방식에는 브라우저 별 차이가 있습니다.

개체 검사 : dir() 및 dirxml()

console.dir() 트리와 같은 구조로 객체 속성을 표시하는 반면 console.dirxml() XML/HTML 요소를위한 것입니다. Firefox는 둘 다 console.log() 의 별칭으로 취급합니다. Chrome 's console.dir() DOM 요소를 검사하여 자세한 속성 정보를 제공하는 데 특히 유용합니다.

그룹화 출력 : group() , groupCollapsed() , groupEnd()

console.group() 사용하여 콘솔 출력을 구성하십시오. console.groupCollapsed() 처음에 그룹을 무너 뜨립니다. console.groupEnd() 그룹을 닫습니다. 중첩이 지원됩니다. 스타일링은 그룹 레이블에 적용 할 수 있습니다.

테이블 출력 : console.table()

console.table() 사용하여 표 형식의 디스플레이 어레이 및 객체. 객체의 배열은 열 헤더로 키로 렌더링됩니다. 복잡한 데이터 구조 (배열, 배열 값이있는 객체)는보다 정교한 테이블을 초래합니다. 브라우저 차이는 테이블 내에서 중첩 된 객체를 처리하는 방법에 존재합니다.

타이밍 작업 : time() , timeLog() , timeEnd()

console.time() , console.timeLog() 및 console.timeEnd() 사용하여 코드 실행 시간을 측정하십시오. console.timeLog() 중간 타이밍 업데이트를 제공합니다. 출력 서식의 작은 브라우저 별 차이가 있습니다.

스택 추적 : console.trace()

스택 추적을 생성하여 특정 로그 문의 원점을 정확히 찾아냅니다.

debugger 디버깅

debugger 문은 실행을 중단하고 해당 라인에서 디버거를 엽니 다. 이것은 console 객체 방법이 아니라 콘솔과 통합 된 강력한 디버깅 도구입니다.

추가 콘솔 유틸리티

여러 브라우저 별 유틸리티가 있습니다.

• $0 , $1 등 : 검사관에서 선택한 DOM 요소에 액세스하기위한 바로 가기.
• $('element') , $$('elements') : document.querySelector() 및 document.querySelectorAll() 의 바로 가기.
• $x('xpath') : xpath 표현식 평가자.
• clear() : 메시지없이 콘솔을 지 웁니다.
• getEventListeners(object) : DOM 요소에 첨부 된 이벤트 리스너를 나열합니다 (Chrome 만 해당).

이 포괄적 인 가이드는 효과적인 디버깅 및 개발을위한 브라우저 콘솔 명령을 활용하기위한 강력한 토대를 제공합니다. 추가 탐색은 추가 브라우저 관련 기능 및 기능을 보여줍니다.

위 내용은 콘솔 명령 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!