Console.log ()을 넘어서서 - 디버깅 기술을 레벨 업하십시오-JS 튜토리얼-php.cn

Beyond Console.log() – Level up Your Debugging Skills 브라우저 개발자 도구는 단순한

보다 훨씬 높으며 강력한 기능은 개발 효율성을 크게 향상시킬 수 있습니다. 이 기사에서는 워크 플로우를 최적화하는 데 도움이되는 몇 가지 알려진 실용 팁을 탐색합니다.

<code>console.log() 코어 포인트

로그의 특정 변경 사항을 찾지 않고도 스크립트 변경을 실시간으로 모니터링하려면 콘솔의 실시간 표현식을 사용하십시오. 콘솔을 사용하여 현재 문서를 직접 작동시키고,

를 사용하여 마지막 명령의 결과를 얻고,

에서 확인 된 요소의 스택에 액세스하십시오.

더 강력한 스크립트 편집 환경을 위해 콘솔에서 "소스"패널로 전환하여 멀티 라인 스크립팅 및 웹 페이지와의 복잡한 상호 작용을 지원합니다.

단축키 (예 : Ctrl Shift P)를 사용하여 명령 메뉴를 통해 개발자 도구에 빠르게 액세스하여 디버깅 프로세스를 단순화합니다. <code>$_ 작업 공간을 설정하여 디버깅 및 개발의 원활한 통합, 브라우저 개발자 도구의 변경 사항을 소스 코드에 직접 동기화합니다. <code><code> 강력한 편집 기능과 실시간 사이트 디버깅을 결합한 VS 코드 확장의 DevTools를 통해 브라우저 개발자 도구와 Visual Studio 코드를 통합합니다.

안락 지대에서 벗어나

개발자는 종종 효율성 이득을 제한 할 수있는 워크 플로우를 고정하는 데 사용됩니다. 일반적인 프로세스는 다음과 같습니다. 편집기에 코드를 쓰고 저장하고 브라우저로 전환하여로드 한 다음 개발자 도구를 사용하여 CSS를 조정하고 크기 및 모바일 시뮬레이션 테스트를 수행합니다. 라인 번호 및 디버깅 정보와 밀접한 관련이있는 문을 추가하여 디버깅.

이 방법은 비효율적이고 혼란 스럽습니다. 브라우저 도구는 최종 제품에 속하지 않는 디버깅 정보로 채워져있어 다른 사람들이 이해하기 어려울뿐만 아니라 초보자 개발자에게 문제가 발생합니다. 우리는 개발자 도구의 기능의 작은 부분 만 사용했으며 효율성을 향상시킬 수있는 기회를 놓쳤습니다.

이 기사는 시각적 스튜디오 코드에 크롬 브라우저 개발자 도구와 실제 기능을 소개합니다. 먼저, 콘솔에 뛰어 들어 봅시다.

고급 콘솔 기술

우리는 디버깅 코드에

를 추가하는 데 익숙합니다. 그러나 이것은 때때로 비효율적이며 원래 형식 데이터는 이해하기 어렵습니다. 다음 팁은 Github에서 얻을 수 있으며 개발자 도구가 열리는 브라우저에서 볼 수 있습니다. (또는 Codepen에서 온라인 데모를 확인하십시오) 먼저, 로그에 곱슬 브레이스를 추가하여 변수 값을 인쇄 할뿐만 아니라 쉽게 추적 할 수있는 변수 이름도 표시됩니다.

형식 로그

백분율 부호로 시작하여 형식 지정자를 사용하면 특정 값을 다른 형식으로 기록 할 수 있습니다.

: 정수로 기록 <code>%s
: 확장 가능한 dom 요소 %i로 기록하십시오 : 확장 가능한 JavaScript 객체 레코드 <code>%d

이 지정자들은 교체 순서와 매개 변수의 혼합으로 사용할 수 있습니다.

유형 변환도 수행 할 수 있습니다 <code>%f 지정자는 CSS 스타일 로그 메시지를 허용합니다 :

그룹 로그

쉽게 확장하고 붕괴하려면 그룹 로그 : <code>%o

기본적으로 그룹을 확장하지 않고 그룹을 중첩하고 사용할 수 있습니다. <code>%O

로그 필터링

let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}

로그인 후 복사

및

를 사용하여 콘솔 사이드 바 또는 레벨 선택기를 사용하여 메시지를 필터링하여 많은 수의 로그에서 특정 정보를 찾을 수 있습니다.

console.log('%ix %s developer', 10, 'console');
// 10x console developer

로그인 후 복사

<<>

<🎜 🎜> <<> 기타 유용한 콘솔 방법 <code>%c

<🎜 🎜> <<> 및

console.log('%i', 12.34455241234324234); // 12

로그인 후 복사

메소드는 메소드 호출 또는 함수 실행의 횟수를 계산할 수 있습니다.

<🎜 🎜> <<> 메소드는 스크립트 실행 시간을 측정 할 수 있습니다 <🎜 🎜> <<> 데이터 컨텐츠와 유형을 표시하고 는 노드의 XML 표현을 표시하고

는 정렬 가능한 테이블에 JSON 데이터를 표시합니다.

<code>console.group() <<> 로그를 실시간 표현식으로 바꾸십시오

<<> 자주 변화하는 값을 모니터링하는 것은 비효율적입니다. 실시간 표현식은이 문제를 해결할 수 있습니다. 개발자 도구에서 눈 버튼을 활성화하고 콘솔 위에 값이 표시되는 유효한 JavaScript 표현식을 입력하십시오.

console.log('%cPay attention to me','color:firebrick;font-size:40px')

로그인 후 복사

예를 들어 를 입력하면

를 입력하면 표현식이 페이지에 현재 활성화 된 요소가 표시됩니다. Beyond Console.log() – Level up Your Debugging Skills 실시간 표현식은 내구성이 뛰어나며 특정 도메인 이름 또는 사이트와 관련이 없습니다. 오류를 피하기 위해 디버깅이 완료된 후 제거해야합니다.