Home-theater-designers
웹 브라우저 콘솔은 프런트 엔드 응용 프로그램을 디버깅하는 데 가장 광범위하게 사용되는 도구 중 하나입니다. 콘솔 API는 개발자에게 오류 및 로그 메시지를 처리할 수 있는 기능을 제공합니다.
console.log() 아마도 콘솔 API에서 가장 일반적으로 사용되는 방법이지만 워크플로에서 사용할 수 있는 다른 방법도 있습니다. 이 가이드에서는 디버깅 워크플로를 개선하는 데 사용할 수 있는 다양한 웹 브라우저 콘솔 방법을 보여줍니다.
로깅이 중요한 이유는 무엇입니까?
웹 브라우저 콘솔에 로깅하는 것은 프런트 엔드 또는 JavaScript 기반 응용 프로그램을 디버깅하는 가장 좋은 방법 중 하나입니다.
관련 항목: 학습할 가치가 있는 6가지 JavaScript 프레임워크
대부분의 최신 웹 브라우저는 콘솔 API를 지원하므로 개발자가 쉽게 사용할 수 있습니다. 콘솔 개체는 브라우저의 디버깅 콘솔에 대한 액세스를 제공합니다. 구현은 브라우저마다 다를 수 있지만 대부분의 방법은 모든 최신 브라우저에서 작동합니다.
팁 : 브라우저 콘솔은 이 가이드에서 설명하는 모든 코드를 실행할 수 있습니다. 누르다 F12 키보드에서 을 눌러 Chrome 또는 Firefox에서 브라우저 개발자 도구를 엽니다.
문자열 메시지 로깅
가장 일반적인 콘솔 방법 중 하나는 console.log() . 단순히 문자열 메시지 또는 일부 값을 웹 콘솔에 출력합니다. 단순 값 또는 문자열 메시지의 경우 console.log() 방법은 아마도 사용하기에 가장 좋은 옵션일 것입니다.
휴대전화에서 Xbox One으로 전송
출력하려면 헬로월드 메시지가 표시되면 다음을 사용할 수 있습니다.
console.log(`Hello World`); 또 다른 특별한 기능은 console.log() 메서드는 DOM 요소의 출력 또는 웹사이트의 일부 구조를 인쇄하는 기능입니다. 예를 들어 body 요소의 구조를 출력하고 그 안에 있는 모든 것은 다음을 사용합니다.
console.log(document.body) 출력은 HTML 트리로서의 DOM 요소 모음입니다.
대화형 JavaScript 개체 로깅
NS console.dir() 메소드는 JavaScript 객체의 대화형 속성을 로깅하는 데 사용됩니다. 예를 들어 웹 페이지에서 DOM 요소를 보는 데 사용할 수 있습니다.
의 전형적인 출력 console.dir() 메서드는 JSON 형식으로 지정된 JavaScript 개체의 모든 속성으로 구성됩니다. HTML 페이지 본문에 있는 모든 요소의 속성을 인쇄하려면 아래 방법을 사용하십시오.
console.dir(document.body) 표현식 평가
단위 테스트의 assert 메소드에 익숙할 것입니다. console.assert() 방법은 비슷한 방식으로 작동합니다. 사용 console.assert() 표현식이나 조건을 평가하는 방법.
assert 메서드가 실패하면 콘솔은 오류 메시지를 출력합니다. 그렇지 않으면 아무 것도 인쇄하지 않습니다. 아래 코드를 사용하여 사람의 나이가 18세 이상인지 평가하십시오.
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); 위의 주장은 실패하고 그에 따라 오류 메시지가 인쇄됩니다.
테이블에 데이터 로깅
사용 console.table() 데이터를 표 형식으로 표시하는 방법입니다. 테이블 형식으로 표시하기에 좋은 후보에는 배열 또는 개체 데이터가 포함됩니다.
메모 : Firefox와 같은 일부 브라우저는 console.table() 방법.
다음과 같은 자동차 객체 배열이 있다고 가정합니다.
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] 아래 방법을 사용하여 위의 배열을 테이블에 표시할 수 있습니다.
console.table(cars); 범주별 메시지 로깅
웹 브라우저 콘솔 메시지는 주로 오류, 경고 및 정보의 세 그룹으로 분류됩니다.
오류
다음을 사용하여 콘솔에 오류 메시지를 구체적으로 인쇄하려면 console.error() 방법을 사용하면 오류 관련 메시지가 빨간색 글꼴로 표시됩니다.
console.error('error message'); 경고
경고를 인쇄하려면 다음을 사용하십시오. 대부분의 시나리오와 마찬가지로 경고 메시지는 주황색으로 표시됩니다.
console.warn('warning message');정보
일반 정보를 콘솔에 인쇄하려면 다음을 사용하십시오. console.info() 방법:
console.info('general info message') 메시지가 적절하게 분류되면 브라우저 콘솔에서 메시지를 쉽게 필터링하거나 찾을 수 있습니다.
프로그램 흐름 추적
사용 console.trace() 프로그램 흐름 또는 실행의 스택 추적을 인쇄하는 방법입니다. 이것은 프로그램에서 함수가 실행되는 순서를 인쇄하기 때문에 디버깅에 매우 유용한 기능입니다.
보기 위해 console.trace() 메서드가 실행되면 아래에 따라 세 가지 함수를 만들고 함수 중 하나에 스택 추적을 배치할 수 있습니다.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}브라우저 콘솔에서 호출 또는 트리거 functionOne() 스택이기 때문에 LIFO(Last In First Out Order)로 인쇄된 함수 호출의 스택 추적을 얻을 수 있습니다.
타이밍 프로그램 실행
프로그램에서 작업을 실행하는 데 걸리는 시간을 측정하려면 다음을 사용할 수 있습니다. console.time() 방법. console.time() 일반적으로 다음과 함께 사용됩니다. console.timeEnd() 후자가 타이머를 종료하는 데 사용되는 방법입니다.
웹페이지당 최대 10,000개의 타이머를 실행할 수 있으므로 타이머에 적절한 레이블을 지정하는 것이 중요합니다.
for 루프가 1에서 50,000까지의 숫자를 통과하는 데 걸리는 시간을 측정하려면 다음과 같이 타이머를 사용할 수 있습니다.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
계산
NS console.count() 메서드는 프로그램에서 함수 또는 일부 코드가 호출된 횟수를 추적하는 데 사용됩니다. 예를 들어 다음과 같이 for 루프가 실행된 횟수를 추적할 수 있습니다.
for(i=0; i<4; i++ ){
console.count();
}로그 메시지 그룹화
타이머 방식과 마찬가지로 콘솔.그룹() , 그리고 console.group종료() 방법은 일반적으로 쌍으로 사용됩니다.
그룹 방법을 사용하면 로그 메시지를 더 잘 구성할 수 있습니다. 예를 들어 다음과 같이 경고 레이블이 있는 경고 메시지 그룹을 만들 수 있습니다.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()경고 그룹 내의 두 메시지는 아래 출력과 같이 시각적으로 분류됩니다.
콘솔 지우기
마지막으로 다음은 브라우저 콘솔에서 로그 메시지를 지울 수 있는 몇 가지 방법입니다.
사용 console.clear() 다음과 같은 방법.
console.clear() 브라우저 키보드 단축키를 사용하여 브라우저 콘솔을 지울 수도 있습니다.
구글 크롬 : Ctrl + L
파이어폭스 : Ctrl + Shift + L
브라우저 콘솔 최대한 활용하기
이 가이드에서는 프런트 엔드 응용 프로그램을 디버그하는 데 도움이 되는 다양한 웹 브라우저 콘솔 방법을 보여주었습니다. 콘솔 API는 매우 가볍고 배우기 쉬우며 대부분의 최신 브라우저에서 널리 지원됩니다.
Mac에서 Xbox One 컨트롤러를 사용하는 방법
다음 프로젝트에서 CAPTCHA 유효성 검사를 수행하고 새로운 디버깅 기술을 테스트해 보세요!
공유하다 공유하다 트위터 이메일 HTML, CSS 및 JavaScript를 사용하여 CAPTCHA 유효성 검사 양식 만들기CAPTCHA 인증으로 웹사이트를 보호하세요.
다음 읽기 관련 항목- 프로그램 작성
- 웹 개발
- 자바스크립트
Mwiza는 직업별로 소프트웨어를 개발하고 Linux 및 프론트 엔드 프로그래밍에 대해 광범위하게 글을 씁니다. 그의 관심사 중 일부는 역사, 경제, 정치 및 엔터프라이즈 아키텍처를 포함합니다.
Mwiza Kumwenda가 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.