당신은 무엇을 찾고 있습니까?
복잡한 웹 응용 프로그램을 작성하면 계획대로 작동하지 않는다는 사실을 접했을 것입니다. 코드에서 버그를 찾고 인터넷에서 문제 해결에 대한 도움을 찾는 데 몇 시간과 시간을 보냈습니다. 이 문서에서는 웹 응용 프로그램을 디버깅하는 몇 가지 효과적인 기술을 설명하여 디버깅의 고통을 크게 줄이고 문제를 감지하는 시간을 단축합니다.
콘솔.로그
첫째,일반적으로 사용되는 자바 스크립트 메소드 콘솔.로그. 지정된 변수를 사용하여 코드에 메서드를 삽입할 수 있습니다. 코드를 실행하는 동안 응용 프로그램은 콘솔의 메서드 내에 지정된 변수의 값을 반환합니다. 프로그램이 예상 값을 반환하는지 확인하는 가장 쉬운 방법입니다.
불행히도 이것은 매우 효과적인 디버깅 방법이 아닙니다. 이러한 접근 방식은 콘솔을 삽입하지 않는 한 코드 실행의 진행 상황을 볼 수 없습니다.몇 줄마다 로그,하지만 콘솔에 던져진 데이터의 양을 읽을 수 없을 것입니다 그리고 우리는 단지 코드에 혼란을 만들 것입니다.)또한 응용 프로그램이 코드를 실행하는 동안 오류를 발생시키지 않는 한 전달 된 변수 만 반환합니다.
팁 번호 1
콘솔이 많은 경우.로그는 이름을 문자열에 넣고 다음 변수(예:콘솔)를 넣습니다.로그(‘변수’,변수).
크롬 개발자 도구(소스 탭)
웹 응용 프로그램을 디버깅하기 위한 보다 효율적인 방법은 크롬 개발자 도구와 소스 탭을 사용하는 것입니다. 소스 탭에서 디버깅을 시작하기 전에 노드 _모듈을 블랙 권투에 추가해야 합니다. 이 규칙을 추가하면 중단점을 통과할 때 외부 패키지의 파일이 표시되지 않으므로 디버깅이 어려워집니다. 우리는 크롬에서 설정을 열어야합니다.
블랙 권투에 노드 _모듈을 추가하면 소스 탭으로 이동할 수 있습니다. 의 당신이 실시간으로 함수의 과정을 수행 할 가정 해 봅시다,및 출력을 확인. 소스 탭에서 소스 파일 이름을 입력합니다. 그런 다음 관심있는 코드 줄에 중단 점을 넣어,당신과 당신은 당신의 브라우저에서 프로세스를 실행을 시작할 수 있습니다. 선택한 줄이 처리를 시작하면 브라우저가 코드 실행을 중지합니다. 아래 스크린 샷을 참조하십시오.
보시다시피 브라우저가 중지된 현재 코드 줄에는 파란색 배경이 있습니다. 오른쪽에,우리의 명령 센터가 위치한 바있다. 우리의 짧은 소개는 여기 있습니다.
컨트롤
막대 상단에 컨트롤 섹션이 있습니다. 중요한 요소에 초점을 맞추자. 첫 번째 다시 시작 컨트롤은 실행 중인 코드의 범위 내에서 표시된 다음 중단점으로 이동합니다. 다음 함수 호출에 대한 두 번째 제어 단계는 실행 중인 코드의 다음 줄로 이동합니다. 마지막 비활성 중단점 컨트롤은 선택한 중단점을 비활성화합니다. 많은 중단점을 선택했을 때 유용한 컨트롤이며 모든 중단점에서 일시 중지하지 않고 잠시 동안 응용 프로그램을 클릭하는 것으로 돌아가고 싶습니다.
범위
아래에 범위 섹션이 있습니다. 우리는 몇 가지 유형의 범위를 가지고 있습니다:로컬(현재 수행 된 함수)및 우리가 속한 범위(예:현재 수행 된 함수 또는 구성 요소의 부모)에 따라 클로저. 이러한 각 범위에서 브라우저는 우리에게 발생하는 모든 변수를 보여줍니다.
중단점
마지막으로 설명한 섹션은 중단점입니다. 그것은 어떤 중단 점 및 어떤 파일이 표시되는지 보여줍니다. 확인란을 사용하여 쉽게 비활성화하고 다시 활성화 할 수 있습니다.
팁 번호. 2-5
- 불변을 사용하는 경우.프로젝트에 불변을 설치합니다.개체 포맷터 플러그인 및 브라우저 설정에서 활성화하십시오. 이렇게하면 불변 객체의 디버깅을 크게 단순화 할 수 있습니다.
- 불변을 사용하지 않는 경우.크롬에 대한 디버거를 설치하고 구성하는 것이 좋습니다.플러그인 형식 지정). 디버깅을 더욱 단순화하고 더 빠른 코드 변경을 허용합니다.
- 소스 탭에 로컬 파일이 표시되지 않으면 프로젝트의 소스 맵을 확인합니다.
- 브라우저가 중단점에서 중지되면 콘솔에서도 변수에 액세스할 수 있습니다.
리액트 개발자 도구
리액트 개발자 도구도 유용한 솔루션입니다. 이러한 도구를 사용하면 프로젝트의 반응 트리 구조,구성 요소의 상태 및 소품을 쉽게 볼 수 있습니다. 페이지에서 검사할 요소 선택 기능은 특히 전체 프로젝트를 모를 때 강력합니다. 그것은 당신이 업데이트해야 할 구성 요소를 찾을 수 있습니다.
팁 번호 6
뷰를 사용하는 경우.제이,당신은 뷰를 사용할 수 있습니다.개발자 도구. 확장자는 유사한 기능을 가지고 있으며 부엑스(반응에서 돌아 오는 것과 동등한 기능)에 액세스 할 수 있습니다.
돌아 오는 개발자 도구
프로젝트에서 돌아 오는 것을 사용하는 경우,돌아 오는 개발자 도구는-이 있어야합니다. 이러한 솔루션을 사용하면 작업,상태 변경,페이로드의 전체 흐름을 추적하고 각 작업이 수행 된 후 현재 저장소를 볼 수 있습니다. 우리가 가정 한대로 무언가가 작동하지 않고 코드에서 모든 것이 잘 보인다면 어떤 페이로드로 어떤 행동이 파견되는지 고려해 볼 가치가 있습니다. 때로는 위의 작업에서 상수를 복사하고 값을 변경하지 않고 이름을 변경 한 다음 완전히 다른 것을 호출하는 것과 같은 간단한 실수가 있습니다. 다음은 가장 중요한 돌아 오는 개발자 도구 기능을 보여주는 지프입니다.
팁 번호. 7
응용 프로그램에서 많은 작업을 실행하는 경우 해당 작업을 처리하기에 메모리가 부족하여 확장이 제대로 작동하지 않을 수 있습니다. 확장 옵션(이 경우 최대 옵션)에서 구성을 시도 할 수 있습니다.)
피들러
마지막으로 소개하고 싶은 도구는 피들러입니다. 이 도구는 네트워크 트래픽을 관리하기 위해 만들어졌습니다. 프로덕션 버그가 있고 프로덕션 데이터를 로컬로 디버깅하기 위해 낮은 환경에 복사 할 수없는 경우 매우 유용합니다. 이러한 상황에서,로컬 환경에서 생산 데이터에 액세스 할 수 있도록,우리는 자동 응답 탭에서 트래픽을 설정. 페이지를 열 때,대신 서버에서 제이에스 파일을 다운로드,피들러는 우리의 로컬로 구축 된 생산 파일을 연결. 추가 디버깅은 크롬 개발 도구 소스 탭에서 수행됩니다. 다음은 트래픽을 로컬 파일로 리디렉션하는 설정이 포함된 스크린샷입니다. 이 프로그램은 또한 모의 엔드 포인트를 허용합니다.
팁 번호 8
끝점 모의를 쉽고 빠르게 만들려면 모의 달 프로그램을 사용할 수 있습니다.
웹 응용 프로그램의 애자일 디버깅 요약
우리 중 많은 사람들에게 웹 응용 프로그램을 디버깅하는 프로세스는 컴퓨터 앞에서 오랜 시간과 긴 시간과 관련이 있습니다. 그러나,이 과정을 단축 하 고 올바른 도구 및 노하우를 사용 하는 경우 더 쾌적 한 만들 수 있습니다. 종종 그들은 당신의 손끝에 무료로 있습니다. 우리는 당신과 함께 우리가 매일 사용하는 가장 중요하고 유용한 도구를 공유했습니다.