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에 대한 지침입니다.
- 터미널을 엽니다.
- 프로젝트 디렉터리로 이동합니다.
npm run start:inspect
를 사용하여 로컬 개발 서버를 시작합니다.- 디버거가 수신 중인지 확인하려면 터미널 출력에서 "Debugger listening(디버거 수신 중)" 메시지를 찾습니다.
- Chrome을 열고 chrome://inspect라는 URL을 입력합니다.
- Open Dedicated Devtools For Node(Node의 전용 DevTools 열기)를 클릭합니다.
- 새 창에서 DevTools가 열립니다.
- 디버거가 연결되었는지 확인하려면 터미널 출력에서 "Debugger Attached(디버거 연결됨)" 메시지를 찾습니다.
- 중단점을 설정하고
debugger
문을 추가하는 등의 작업을 수행합니다. - Chrome의 로컬 개발 서버에서 페이지를 로드합니다.
- 디버깅 전용 창을 사용합니다.
이제 서버 측 코드의 실행을 추적할 수 있습니다.
DevTools의 중단점을 이용한 디버깅에 대한 자세한 내용은 Google의 다음 가이드를 참조하십시오. JavaScript 디버깅.
- Visual Studio Code에서 프로젝트 파일을 엽니다.
- 메뉴 모음에서 Terminal(터미널) > New Terminal(새 터미널)을 클릭합니다.
npm run start:inspect
를 사용하여 로컬 개발 서버를 시작합니다.- 명령 팔레트를 엽니다. Windows의 바로가기:
Ctrl
+Shift
+P
. Mac의 바로가기:Command
+Shift
+P
. - 다음 명령을 입력합니다. “Debug: Attach to Node Process.”
- Node 프로세스의 목록이 표시됩니다. 목록의 첫 번째 항목을 선택합니다.
- 디버거가 연결되었는지 확인하려면 터미널 출력에서 "Debugger Attached(디버거 연결됨)" 메시지를 찾습니다.
- 중단점을 설정하고 디버거 문을 추가하는 등의 작업을 수행합니다.
- 웹 브라우저에서 로컬 개발 서버의 페이지를 로드합니다.
- Visual Studio Code의 통합 디버거를 디버깅에 사용합니다.
이제 Visual Studio Code에서 서버 측 코드의 실행을 추적할 수 있습니다.
Node 프로세스를 반복적으로 연결할 필요가 없도록 명령 팔레트를 열고 "Debug: Toggle Auto Attach"를 입력합니다. 설정을 Always(항상)로 토글하고 Visual Studio Code 터미널에서 로컬 개발 서버를 다시 시작합니다.