VSCode, Su Shuang의 디버깅 Vue 및 React 코드 구성 방법!

Vue 및 React 코드 디버깅을 더 즐겁게 만드는 방법은 무엇입니까? 다음 글에서는 VSCode 구성과 Su Shuang의 Vue 및 React 코드 디버깅 방법을 소개합니다. 모두에게 도움이 되길 바랍니다!

프론트엔드 개발자로서 저는 기본적으로 Vue/React 코드를 매일 디버깅해야 합니다. 모두가 어떻게 디버깅하는지 모르겠지만 여러 가지 유형이 있는 것 같습니다.

• 디버깅 없음, 그냥 살펴보세요. 문제를 찾으려면 코드에서
• console.log 로그 인쇄
• Chrome Devtools 디버거를 사용하여 디버깅
• VSCode 디버거를 사용하여 디버깅

디버깅 방법에 따라 효율성과 경험이 다릅니다. 이제는 기본적으로 VSCode 디버거를 사용하여 디버깅합니다. 효율성이 매우 좋고 경험이 풍부하며 재미 있습니다. [추천 학습: "vscode 입문 튜토리얼"]

아마도 많은 학생들이 아직 VSCode를 사용하여 웹 페이지를 디버깅하는 방법을 모르고 있을 것입니다. 이 글에서 소개하겠습니다.

React와 Vue를 각각 살펴보겠습니다.

VSCode를 사용하여 React 코드 디버깅

create-react-app을 사용하여 다음 구성 요소가 포함된 데모 프로젝트를 만들었습니다.

개발 서버 실행:

브라우저에 표시되는 인터페이스는 다음과 같습니다.

VSCode로 디버깅하는 방법은 무엇인가요?

루트 디렉터리에 .vscode/launch.json 구성 파일을 추가합니다.

디버깅 구성을 생성합니다. 유형은 chrome이고 디버깅 URL이 개발 서버의 주소임을 지정합니다.

반응 코드에 두 개의 중단점을 넣습니다.

그런 다음 실행을 클릭합니다.

보세요, XDM, 문제가 발생했습니다! 호출 스택, 현재 환경 변수 등이 있습니다.

중단점을 해제하고 계속해서 내려갑니다.

다음을 클릭하면 해당 이벤트 개체를 얻을 수도 있습니다.

정말 편리하지 않나요!

그리고 비즈니스 작성에 지쳤고 반응 소스 코드를 살펴보고 싶을 때 호출 스택의 특정 프레임을 클릭하면 다음을 확인할 수 있습니다.

예를 들어, renderWithHooks 메서드는 렌더링 중에 호출되며, 내부의 workInProgress 객체는 현재 파이버 노드이고 memorizedState 속성은 후크가 값을 저장하는 위치입니다.

VSCode를 사용하여 React 코드를 디버깅한 후에는 비즈니스 코드를 디버깅하거나 소스 코드를 살펴보는 경험이 매우 즐겁습니다.

Vue를 살펴보겠습니다.

Vue 코드를 디버그하려면 VSCode를 사용하세요

Vue 디버깅은 좀 더 까다로울 수 있으며, 위 내용을 기반으로 몇 가지 추가 경로 매핑을 수행해야 합니다.

React에서는 jsx와 tsx를 직접 작성하는데, 이는 컴파일된 js 파일에 일대일로 대응하지만 Vue에서는 그렇지 않습니다. Vue에서는 SFC(단일 파일 구성 요소) 형식으로 파일을 작성하므로 vue- 로더를 사용하여 여러 파일로 나누기 때문에 소스 코드 위치에 맞게 경로를 별도로 매핑해야 합니다.

즉, 디버깅 구성에 추가 sourceMapPathOverrides가 있습니다.

어떻게 매핑할까요?

소스 코드에 디버거를 추가하고 브라우저에서 현재 매핑된 경로를 확인할 수 있습니다.

여기는 webpack://test-vue-debug/src/App.vue?11c4 매핑 경로입니다. 매핑되었나요?

분명히 다음과 같이 로컬 경로에 매핑됩니다.

workspaceRoot는 vscode에서 제공하는 환경 변수로, 이러한 매핑 후에는 주소가 로컬이 되지 않습니다. 파일? 그런 다음 중단점이 로컬 파일에 적용됩니다.

여기 경로를 보면 분명히 프로젝트 아래의 파일에 매핑됩니다.

하지만 매핑할 때 마지막에 해시가 있습니다. 이 해시가 변경되면 어떻게 해야 하나요?

이 경로는 실제로 webpack이 소스맵을 생성할 때의 파일 경로입니다. output.devtoolModuleFilenameTemplate을 통해 구성할 수 있습니다.

사용 가능한 변수에 대한 문서를 볼 수 있으므로 생략하겠습니다. 확장하지 마세요(한 번 보세요):

예를 들어 경로를 다음과 같이 구성하면:

디버깅하는 동안 파일 경로는 다음과 같습니다.

걱정하지 마세요. 접두사에 대해서는 다음 부분을 살펴보십시오. 해시되었습니까? 그런 다음 로컬 파일에 매핑합니다.

이런 식으로 다시 매핑되고 vscode의 중단점은 적용:

원하는 대로 Vue 비즈니스 코드를 디버깅하든 Vue 소스 코드를 보든 멋진 경험이 될 것입니다.

요약

프런트엔드 엔지니어로서 Vue 및 React 코드 디버깅은 매일 수행해야 하는 작업입니다. 디버깅 방법이 다르면 경험과 효율성도 다릅니다. 그래서 저는 VSCode를 사용하여 웹 페이지를 디버깅하는 데 일반적으로 사용되는 방법을 소개하고 싶습니다.

React 디버깅은 비교적 간단합니다. Vue 디버깅은 더 번거롭습니다. 경로에 해시가 있으면 생성된 경로의 구성을 변경해야 합니다. 그런 다음 다시 매핑합니다(단, 한 번만 구성하면 됩니다).

VSCode를 사용하여 React/Vue 코드를 디버깅하는 것은 비즈니스 코드를 디버깅하든 소스 코드를 보든 매우 편리합니다. 시도해 볼 수도 있습니다. 디버깅이 매우 즐거워질 것입니다.

VSCode에 대한 자세한 내용을 보려면

vscode 튜토리얼

을 방문하세요! !

위 내용은 VSCode, Su Shuang의 디버깅 Vue 및 React 코드 구성 방법!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!