Debugging

코어 저장소에 기여할 때나, 로더 또는 플러그인을 작성할 때, 아니면 복잡한 프로젝트를 작업할 때도 디버깅 도구가 워크 플로에서 중심이 될 수 있습니다. 규모가 큰 프로젝트에서의 느린 성능이나 도움이 되지 않는 트레이스백이 문제라면, 다음의 유틸리티를 사용하여 문제를 보다 수월하게 파악할 수 있습니다.

• Node와 CLI를 통해 제공되는 stats 데이터.
• Chrome DevTools 및 최신 Node.js 버전.

Stats

이 데이터를 수동으로 조사하거나, 도구를 사용하여 데이터를 처리할 때도 stats 데이터는 빌드 이슈 디버깅에 매우 유용할 수 있습니다. 이 내용을 설명하는 페이지가 있으므로 여기서 자세히 설명하지는 않지만, 다음 정보를 찾는 데 사용할 수 있습니다.

• 모든 모듈의 내용.
• 모든 청크에 포함된 모듈.
• 모듈 별 컴파일 및 통계 분석.
• 빌드 오류 및 경고.
• 모듈 간의 관계.
• 그리고 더 많은 것들..

또한 공식 분석 도구 및 다양한 도구가 이 데이터를 분석하고 여러 방법으로 시각화합니다.

DevTools

console 문은 간단한 시나리오에서는 잘 작동하지만 때로는 더 강력한 솔루션이 필요합니다. 대부분의 프런트엔드 개발자가 이미 알고 있듯이 Chrome DevTools는 웹 애플리케이션을 디버깅할 때 생명의 은인 같은 역할을 합니다. 하지만 거기서 멈추지 않고 더 나아갈 수 있습니다. Node v6.3.0+부터 개발자는 내장된 --inspect 플래그를 사용하여 DevTools에서 Node 프로그램을 디버깅할 수 있습니다.

node --inspect로 webpack을 호출하여 시작합니다.

npm scripts(예를 들어 npm run build)를 실행할 수 없으므로, 전체 node_modules 경로를 지정해야 합니다.

node --inspect ./node_modules/webpack/bin/webpack.js

이는 다음과 같이 출력될 것입니다.

Debugger listening on ws://127.0.0.1:9229/c624201a-250f-416e-a018-300bbec7be2c
For help see https://nodejs.org/en/docs/inspector

이제 브라우저에서 chrome://inspect로 이동하면 Remote Target 헤더 내에 검사 한 활성 스크립트가 표시됩니다. 각 스크립트 하단의 "inspect" 링크를 클릭하여 전용 디버거를 열거나 Open dedicated DevTools for Node 링크를 클릭하여 자동으로 연결되는 세션을 시작할 수 있습니다. 매번 DevTools 탭을 자동으로 여는 편리한 Chrome 플러그인인 NiM 확장 프로그램도 확인해 보세요. 스크립트를 --inspect할 때마다 DevTools 탭을 자동으로 실행하는 유용한 크롬 플러그인입니다.

스크립트의 첫 번째 문에서 중단하는 --inspect-brk 플래그 사용을 추천합니다. 이를 통해 소스를 확인하여 중단점을 설정하고, 원하는 대로 빌드를 시작 또는 중지할 수 있습니다. 또한 여전히 스크립트에 인수를 전달할 수 있다는 점을 잊지 마세요. 예를 들어 설정 파일이 여러 개인 경우--config webpack.prod.js를 전달하여 디버깅할 설정을 지정할 수 있습니다.