Console.log ()을 넘어서서 - 디버깅 기술을 레벨 업하십시오

브라우저 개발자 도구는 단순한

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

<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')

예를 들어 를 입력하면

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

실시간 표현식은 스크립트 데이터 변경을 모니터링하는 데 이상적입니다. 특히 마우스 위치와 같은 값을 자주 변경하는 데 사용됩니다.

콘솔을 사용하여 현재 문서를 작동하십시오 콘솔은 JavaScript를 작성하고 실행하고 자동 완성 기능을 사용하여 현재 문서의 사용 가능한 메소드와 속성을 이해하는 대체입니다. <code>console.groupCollapsed() 콘솔은 또한 많은 편리한 방법과 바로 가기를 제공합니다.

: 마지막 명령의 결과를 저장하십시오.
• <code>$_ ~ : 가장 최근에 확인 된 요소 스택.
• <code><code> 및 : 각각 및 <code>$(). <code>$$() <code>document.querySelector() : xpath를 사용하여 dom 요소를 선택하십시오. <code>document.querySelectorAll()
: 내용을 클립 보드에 복사하십시오.
• <code>$x() : 콘솔을 지 웁니다.
• : 노드에 대한 모든 이벤트 리스너를 나열하십시오. <code>copy()
: 노드에서 이벤트를 모니터링하고 기록합니다.
• <code>clear() : 메소드를 호출 할 때 로그 항목을 만듭니다.
• 콘솔에서 소스 패널까지 콘솔의 단일 라인 환경은 코드 쓰기를 제한합니다. 멀티 라인 스크립트는 Shift Enter를 사용하여 작성할 수 있습니다. 소스 패널은보다 강력한 스크립트 편집 환경을 제공합니다. <code>getEventListeners(node) 개발자 도구 명령 메뉴
명령 메뉴 (Ctrl Shift P 또는 CMD Shift P)를 통해 키보드를 통해 모든 개발자 도구 기능에 액세스 할 수 있습니다.
• <code>monitorEvents(node, events) 코드 스 니펫
코드 스 니펫은 문서와 상호 작용하는 스크립트를 저장하는 편리한 방법입니다. 그들은 현재 오픈 브라우저 문서와 콘솔에 액세스 할 수있는 편리한 방법을 가지고 있습니다.
• 적용 범위 <code>monitor(method)
Overwrite는 원격 파일의 로컬 사본입니다. 브라우저 개발자 도구는 원격 파일을 로컬 카피로 교체하여 웹 사이트 스타일 시트를보다 쉽게 ​​편집하거나 성능 테스트를 수행 할 수 있습니다.

작업 공간 : 동기 개발 및 디버깅 작업

작업 공간을 사용하면 개발자 도구에 프로젝트 폴더를 추가하여 개발자 도구와 편집기 동기화 할 수 있습니다.

vs 코드 확장에 대한 DevTools

Code Extension의 DevTools는 Visual Studio Code를 브라우저 개발자 도구와 통합하여 강력한 편집 기능과 실시간 사이트 디버깅을 결합합니다.

다음 단계

더 효과적인 디버깅 방법 인 중단 점 디버깅 사용을 배우는 것이 좋습니다. JavaScript 디버깅 기술 faq

(원본 텍스트의 FAQ 부분은 여기서는 여기에서 생략됩니다. 콘텐츠 의이 부분은 기사의 주요 주제와 거의 관련이없고 길다. 🎜>

위 내용은 Console.log ()을 넘어서서 - 디버깅 기술을 레벨 업하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!