VS Code & Chrome 디버거로 JavaScript 프로젝트를 디버깅합니다

vs 코드 및 크롬 디버거를 사용한 마스터 JavaScript 디버깅 : 포괄적 인 가이드

JavaScript 디버깅에

에 의존하는 데 지쳤습니까? 이 기사는 Visual Studio Code (VS Code)와 Chrome Debugger Extension을 사용하여 강력한 디버깅 기술을 소개하여 디버깅 워크 플로를 변환합니다.

console.log()

없는 세상을 상상해보십시오. 디버깅은 악몽이 될 것입니다!

는 빠른 수정을 제공하지만 복잡한 문제는 번거롭게됩니다. 디버깅 도구는 우수한 대안을 제공합니다. 이 안내서는 Chrome DevTools와의 원활한 통합을 위해 VS Code의 통합 디버거와 Debugger를 사용합니다. 주요 장점 :

간소화 된 디버깅,

Reliance를 제거합니다

특정 지점에서 실행을 일시 중지하기위한 정확한 중단 점 변수 상태 및 단계별 코드 실행의 세부 검사 사용자 정의 가능 console.log() 대상 디버깅을위한 구성 VS 코드 디버깅 패널 내에서 효과적인 중단 점 관리 및 표현 시청. 테스트 실패를 분리하고 해결하기위한 원활한 모카 테스트 디버깅. 크롬 디버거를 사용한 클라이언트 측 JavaScript 디버깅 console.log() 전제 조건 :

현대 JavaScript 이해 node.js 비주얼 스튜디오 코드 <ows> 크롬 브라우저 <strong> 프로젝트 (실습 연습을 위해이 프로젝트를 복제) </strong> 프로젝트 설정 : </ows>

• 저장소를 복제하십시오 vs 코드에서 프로젝트를 엽니 다 의 종속성 설치 : console.log()
• vs 코드의 디버깅 : 단계별 가이드
• 디버그하자
:
• launch.json 중단 점 설정 :
라인 번호 옆의 거터를 클릭하여 중단 점 (빨간색 도트)을 설정합니다.
Debugger 발사 :
• VS 코드 활동 막대에서 디버그 아이콘 (버그 아이콘)을 클릭하십시오.

구성
3. : 구성 기어 아이콘을 클릭하여 launch.json를 작성하십시오. 디버그 : 로 구성하십시오 launch.json places.js
디버깅 시작 : "시작 장소"를 선택하고 F5를 누르십시오 (또는 재생 버튼을 클릭).

npm install
npm install -g mocha

4. 디버그 컨트롤 :
디버그 도구 모음 컨트롤 사용 : 계속, 단계를 밟고, 단계를 밟고, 단계를 밟고, 다시 시작하고, 정지하십시오.

변수 검사 : 변수를 통해 값을 보거나 디버그 패널의 "변수"및 "시계"섹션을 사용하십시오.

버그 식별 및 수정 :

스테핑 및 검사를 통해 (조기 길이 증가 및 잘못된 계수 조건)의 버그를 식별하십시오. 그에 따라 코드를 수정하십시오

5. 디버깅 모카 테스트 : mocha 구성 추가 : 디버그 패널에서 드롭 다운을 클릭하고 "구성 추가"를 선택하십시오. "Mocha Tests"를 선택하십시오.

:
7. 에서 중단 점을 설정하십시오. 테스트 파일에 중단 점을 추가하십시오.

   디버깅 시작 : "Mocha Tests"를 선택하고 디버깅을 시작하십시오. 테스트를 통해 변수를 검사하여 나머지 문제를 식별하고 수정하십시오. 테스트 간 배열을 재설정하려면 후크를 추가해야합니다. places.js

   Chrome Debugger를 사용하여 클라이언트 측 코드를 디버깅하는

확장 설치 :

vs 코드 마켓 플레이스에서 "Chrome 용 Debugger"확장 설치.

구성 :
1. 크롬 구성을 추가하십시오 :

서버 시작 :

express 서버를 실행하십시오 ()

디버깅 시작 : "크롬 발사"를 선택하고 디버깅을 시작하십시오. 디버거가 크롬 인스턴스에 부착됩니다

2. 클라이언트 측 코드 디버그 클라이언트 측 코드 : 클라이언트 측 JavaScript ()에서

   브레이크 포인트 설정, 코드를 통과하고 변수를 검사하여 클라이언트 측 버그를 식별하고 수정하십시오 (예 : 부정확 한 선택기, 누락 된 ID). placesTest.js 요약 :

   이 안내서는 효과적인 JavaScript 디버깅을위한 VS 코드 및 크롬 디버거의 전력을 보여줍니다. 이러한 기술을 마스터하면 디버깅 효율성을 크게 향상시키고 고품질 코드를 작성할 수 있습니다. 조건부 중단 점과 같은 고급 기능에 대한 VS 코드 디버깅 문서를 탐색하십시오. 告别 , 拥抱高效调试！

위 내용은 VS Code & Chrome 디버거로 JavaScript 프로젝트를 디버깅합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!