PWA Kit 앱 디버깅

버그와 성능 병목 현상은 웹 앱 개발에서 피할 수 없는 문제입니다. PWA Kit를 사용하면 앱을 면밀히 검사하는 다양한 도구와 기술로 이러한 문제의 근본 원인을 파악할 수 있습니다.

이 가이드의 보다 구체적인 조언을 따르기 전에 다음과 같은 일반적인 문제 해결 단계를 먼저 시도해보십시오.

• 로컬 개발 서버를 시작하기 전에 지원되는 버전의 Node를 실행 중인지 다시 확인합니다(시작하기 가이드 참조).
• 개발 서버가 아직 실행 중이며, 다른 프로세스가 포트를 점유하고 있지 않은지 확인합니다.
• 코드를 변경한 후 브라우저를 다시 로드하기 전에 터미널에 HTTP development server listening 메시지가 표시되는지 확인합니다.
• 브라우저 콘솔과 터미널 모두에서 오류를 찾습니다.
• 브라우저의 개발자 도구를 사용하여 네트워크 오류 응답을 찾습니다. (Chrome의 DevTools에서 Network(네트워크) 탭으로 이동합니다.)
• 구문 오류 및 오타를 쉽게 찾을 수 있도록 코드 포맷터와 린터를 실행합니다. 구성 파일은 Retail React App에서 Prettier(코드 포맷터)와 ESLint(린터) 모두에 제공됩니다.
• 컴퓨터의 바이러스 백신 및 방화벽 설정에서 코드 실행을 방해하거나 네트워크 요청을 차단하는 항목이 있는지 확인합니다.
• 성능 문제를 찾고 분석하려면 Chrome의 DevTools에서 프로파일러를 사용합니다. 자세한 내용은 Google의 다음 가이드를 참조하십시오. Analyze Runtime Performance(런타임 성능 분석). 또한 Chrome용 React 개발자 도구 확장을 설치하여 구성 요소 수준에서 유사한 정보를 볼 수 있는 다른 프로파일러 탭을 표시할 수 있습니다.

커머스 앱이 지원하는 URL에 추가하여 서버 측 코드의 문제를 디버깅하는 데 사용할 수 있는 두 가지 특수한 쿼리 매개변수가 있습니다.

__server_only 쿼리 매개변수는 hydration 프로세스를 중지하여 페이지가 서버 측 렌더링 후에 표시되는 것과 동일하게 브라우저에 표시되도록 합니다. 검색 엔진은 이 버전의 페이지를 크롤링하므로, 서버의 렌더링된 페이지 버전을 보면 서버 측 렌더링 문제뿐만 아니라 SEO 문제까지 해결하는 데 도움이 됩니다.

__pretty_print 쿼리 매개변수는 읽기 쉽도록 __PRELOADED_STATE__ 오브젝트에 서식을 추가합니다. 이 오브젝트는 hydration이 시작되기 전에 앱의 상태에 대한 스냅샷을 제공하므로 올바른 값이 포함되어 있는지 확인할 수 있어 디버깅에 도움이 됩니다. 오브젝트의 컨텐츠를 보려면 앱을 로드하고 페이지의 소스를 확인하고 __PRELOADED_STATE__를 검색합니다.

__PRELOADED_STATE__ 오브젝트는 앱이 서버 측에서 실행될 때 처음에 요청했던 페이지의 HTML 소스 내에 있는 <script> 태그에 포함되어 있습니다. __PRELOADED_STATE__ 오브젝트에는 getProps 함수에서 반환되는 직렬화된 값(_app 구성요소 및 페이지 구성요소에 연결된 getProps 버전 포함)이 포함되어 있습니다.

기본적으로 앱 서버는 터미널에 콘솔 메시지를 표시하지만, 다른 경우에는 사용자가 코드 실행을 볼 수 없습니다. 이러한 제한으로 인해 서버 측(또는 로컬 머신)에서 페이지를 렌더링하는 코드를 디버깅하기가 어려울 수 있습니다.

디버깅을 개선하기 위해, 디버거가 연결할 수 있는 노드에서 검사기 프로세스를 실행하는 대체 명령을 사용하여 로컬 개발 서버를 시작할 수 있습니다. (자세한 내용은 Node 설명서를 참조하십시오.)

많이 사용되는 여러 가지 브라우저 및 텍스트 편집기에 포함된 디버거를 노드의 검사기 프로세스에 연결할 수 있습니다. 다음은 Google Chrome 및 Visual Studio Code에 대한 지침입니다.

1. 터미널을 엽니다.
2. 프로젝트 디렉터리로 이동합니다.
3. npm run start:inspect를 사용하여 로컬 개발 서버를 시작합니다.
4. 디버거가 수신 중인지 확인하려면 터미널 출력에서 "Debugger listening(디버거 수신 중)" 메시지를 찾습니다.
5. Chrome을 열고 chrome://inspect라는 URL을 입력합니다.
6. Open Dedicated Devtools For Node(Node의 전용 DevTools 열기)를 클릭합니다.
7. 새 창에서 DevTools가 열립니다.
8. 디버거가 연결되었는지 확인하려면 터미널 출력에서 "Debugger Attached(디버거 연결됨)" 메시지를 찾습니다.
9. 중단점을 설정하고 debugger 문을 추가하는 등의 작업을 수행합니다.
10. Chrome의 로컬 개발 서버에서 페이지를 로드합니다.
11. 디버깅 전용 창을 사용합니다.

이제 서버 측 코드의 실행을 추적할 수 있습니다.

DevTools의 중단점을 이용한 디버깅에 대한 자세한 내용은 Google의 다음 가이드를 참조하십시오. JavaScript 디버깅.

1. Visual Studio Code에서 프로젝트 파일을 엽니다.
2. 메뉴 모음에서 Terminal(터미널) > New Terminal(새 터미널)을 클릭합니다.
3. npm run start:inspect를 사용하여 로컬 개발 서버를 시작합니다.
4. 명령 팔레트를 엽니다. Windows의 바로가기: Ctrl + Shift + P. Mac의 바로가기: Command + Shift + P.
5. 다음 명령을 입력합니다. “Debug: Attach to Node Process.”
6. Node 프로세스의 목록이 표시됩니다. 목록의 첫 번째 항목을 선택합니다.
7. 디버거가 연결되었는지 확인하려면 터미널 출력에서 "Debugger Attached(디버거 연결됨)" 메시지를 찾습니다.
8. 중단점을 설정하고 디버거 문을 추가하는 등의 작업을 수행합니다.
9. 웹 브라우저에서 로컬 개발 서버의 페이지를 로드합니다.
10. Visual Studio Code의 통합 디버거를 디버깅에 사용합니다.

이제 Visual Studio Code에서 서버 측 코드의 실행을 추적할 수 있습니다.