VSCode를 사용하여 브라우저에서 JS 코드를 디버그하는 방법

VSCode를 사용하여 브라우저에서 JS 코드를 디버깅하는 방법은 무엇입니까? 다음 기사에서는 VSCode를 사용하여 웹 페이지의 JS 코드를 디버깅하는 방법을 소개합니다. 도움이 되기를 바랍니다.

코드만 보는 것보다 실제 코드 실행 경로와 각 변수의 변화를 확인할 수 있는 디버거와 함께 보는 것을 추천합니다. 큰 코드 섹션을 뛰어넘을 수도 있고 특정 논리 부분을 단계별로 실행할 수도 있습니다. [추천 학습: "vscode tutorial"]

Javascript 코드에는 주로 두 가지 실행 환경이 있습니다. 하나는 Node.js이고 다른 하나는 브라우저입니다. 일반적으로 Node.js에서 실행되는 JS 코드를 디버그하려면 VSCode의 디버거를 사용하고, 브라우저에서 실행되는 JS 코드를 디버그하려면 Chrome devtool을 사용하겠습니다. 어느 날 VSCode가 브라우저에서 JS 코드를 디버깅할 수도 있다는 사실을 알게 되었는데, 정말 좋았습니다.

정확히 얼마나 향기가 나나요? 살펴 보겠습니다.

프로젝트의 루트 디렉터리에 VSCode의 디버깅 구성을 저장하는 .vscode/launch.json 파일이 있습니다.

디버깅 크롬 구성을 추가하려면 구성 추가 버튼을 클릭합니다.

구성은 다음과 같습니다.

url은 로컬 개발 서버를 실행하고 여기에 주소를 입력할 수 있습니다.

그런 다음 디버그를 클릭하여 실행합니다.

VSCode는 Chrome 브라우저를 시작하여 웹 페이지를 로드하고 중단점에서 중지합니다. 호출 스택, 범위 변수 등이 왼쪽 패널에 표시됩니다.

가장 낮은 레벨은 물론 웹팩의 입구입니다. 웹팩의 런타임 부분을 한 단계로 디버그할 수 있습니다.

ReactDOM.render 등의 렌더링부터 하위 구성 요소로의 렌더링까지의 과정과 중간에 어떤 작업이 이루어지는지 살펴볼 수도 있습니다.

또는 구성 요소의 후크 값이 어떻게 변경되는지 살펴보세요(후크 값은 구성 요소의 FiberNode에 있는 memerizedState 속성에 저장됨).

웹팩을 보고 디버그할 수 있습니다. 런타임 코드 또는 디버그 React 소스 코드 또는 비즈니스 코드는 매우 편리합니다.

아마도 이것이 Chrome devtools에서도 가능하다고 말씀하실 것입니다. 특별한 점이 있나요?

실제로 Chrome devtools도 동일한 작업을 수행할 수 있지만 VSCode에는 웹 페이지 코드 디버깅에 대한 두 가지 주요 이점이 있습니다.

1. 편집기에서 코드에 중단점을 지정할 수 있고 디버깅하는 동안 코드를 변경할 수도 있습니다. .

2. Node.js 코드 디버깅과 웹페이지 코드 디버깅에 동일한 도구를 사용하면 경험을 재사용할 수 있고 일관성이 유지됩니다.

첫 번째 점에 관해서는 크롬 개발 도구의 소스는 실제로 코드를 수정하고 저장할 수 있지만 결국 전문적인 편집기가 아니며 코드 작성에 사용하는 것이 더 어색합니다. 저는 개인적으로 코드를 동시에 디버깅하고 수정하는 데 더 익숙하며 이 점에서는 VSCode가 승리합니다.

우리는 일반적으로 Node.js를 디버깅할 때 VSCode를 사용하지만 웹 페이지를 디버깅할 때도 VSCode를 사용할 수 있습니다. 따라서 도구에 익숙하다면 Chrome 개발자 도구 사용 방법과 디버깅 방법을 배울 필요가 없습니다. VSCode를 사용하는 것이 더 좋습니다. 제가 매일 사용하는 편집기가 더 편리하고 이 점에서는 VSCode가 승리합니다.

그런데 프로필 정보를 보고 싶으면 어떡하지? 즉, 각 함수의 시간 소모가 코드 성능 분석에 중요합니다.

VSCode 디버거도 다음을 지원합니다.

왼쪽의 버튼을 클릭하면 일정 시간 동안 시간이 많이 걸리는 정보를 기록할 수 있습니다. 수동으로 중지하거나 고정 시간을 지정하거나 중단점을 지정할 수 있습니다. 특정 코드의 실행 프로세스를 선택하여 프로필 정보를 기록하는 방법입니다.

각 기능을 실행하는 데 걸리는 시간을 기록하는 xxx.cpuprofile 파일을 프로젝트 루트 디렉터리에 저장합니다. 이는 특정 코드 레이어에 소요되는 시간을 레이어별로 분석하여 문제를 찾아 성능을 최적화할 수 있습니다.

vscode-js-profile-flame의 VSCode 확장을 설치하면 Flame 그래프 표시로 전환할 수도 있습니다.

플레임 다이어그램을 이해하지 못하는 학생들도 있을 수 있습니다. 설명해 드리겠습니다.

특정 함수의 실행 경로에는 호출 스택이 있다는 것을 알 수 있는데, 어떤 함수가 한 줄씩 호출되는지 알 수 있습니다.

실제로 이 함수에 의해 호출되는 함수는 하나만 있는 것이 아니라 여러 개가 있을 수 있습니다.

호출 스택은 특정 함수에 대한 하나의 실행 경로만 저장하는 반면 Flame 그래프는 모든 실행을 저장합니다. 경로.

Flame 그래프에서 다음과 같은 분기점을 볼 수 있습니다.

실제로 실행 프로세스는 다음과 같습니다.

질문 계산:

함수 A는 총 50ms가 소요되며, 함수 B를 호출하는 데 10ms가 걸리고, 함수 C를 호출하는 데 20ms가 걸립니다. 질문: 함수 A의 나머지 논리에는 몇 ms가 걸리나요?

분명히 50 - 10 - 20= 20ms로 계산할 수 있습니다. 어쩌면 함수 D가 너무 오래 걸린다고 생각할 수도 있습니다. 그런 다음 특정 코드를 살펴보고 최적화할 수 있는지 확인하세요. 또 시간이 많이 걸립니다.

프로필 성과 분석은 이렇게 간단합니다. 간단한 덧셈과 뺄셈이요.

플레임 그래프의 각 상자 너비에는 시간 소모도 반영되므로 더욱 직관적입니다.

JS 엔진은 이벤트 루프를 사용하여 JS 코드를 지속적으로 실행합니다. Flame 그래프는 모든 코드의 실행 시간을 반영하므로 각 이벤트 루프 코드 실행에 걸리는 시간을 확인할 수 있습니다.

각 스트립의 너비는 각 루프의 시간 소모를 나타냅니다. 물론 렌더링을 방해하지 않도록 얇을수록 좋습니다. 따라서 성능 최적화 목표는 Flame 그래프를 더 두껍지 않고 작고 얇은 막대로 바꾸는 것입니다.

주제로 돌아가서, Chrome devtools의 성능에 비해 VSCode의 CPU 프로필과 Flame 그래프는 실제로 더 간단하고 사용하기 쉬우며 대부분의 요구 사항을 충족할 수 있습니다.

렌더링이나 메모리 정보를 보고 싶지 않다면 VSCode가 지원하지 않기 때문에 크롬 개발자 도구를 이용하면 될 것 같아요. JS 코드 디버깅은 프로필 정보와 Flame 그래프를 보면 VSCode면 충분할 것 같아요.

어쨌든 VSCode는 웹페이지에서 JS 코드를 디버깅하는 데 매우 유용하다고 생각하는데, 어떻게 생각하시나요?

원본 주소: https://juejin.cn/post/7010768454458277924

작성자: zxg_God Said Did There Be Light

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 영상을 방문하세요! !

위 내용은 VSCode를 사용하여 브라우저에서 JS 코드를 디버그하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!