프런트 엔드 오류 디버깅

머리말

이 글은 프론트엔드 개발 과정에서 발생하는 일반적인 오류와 오류 포지셔닝, 그리고 저자의 경험인 일반적인 디버깅 방법을 주로 소개합니다.

1. HTTP 오류 상태 코드

영혼 고문: 404의 원인을 찾는 데 얼마나 걸렸습니까?

4xx 오류

1. 
   모두가 404가 잘못된 링크라는 것을 알고 있지만 404에는 적어도 네 가지 이유가 있습니다. (
   1) 링크를 인터페이스 문서와 비교하십시오. 프런트 엔드가 잘못 작성되었거나 인터페이스 문서가 잘못 작성되었습니다. 단어의 대문자화, 공간의 두 가지 측면
   (2), 백엔드가 배포되지 않음
   (3), nginx가 프록시로 구성되지 않거나 프런트 엔드가 로컬로 구성되지 않음
   (4), post 및 get이 잘못 사용됨, 게시 요청을 호출하기 위해 get 메서드를 사용하면 405를 보고할 수도 있습니다. 서버 구성을 참조하세요.
2. 401———로그인하지 않음
3. 403———계정에 권한이 없습니다.
4. 400
   매개변수 오류 유형이 너무 많습니다. 다음은 가장 일반적인
   (1), 매개변수 누락
   (2), 필드 이름 오타
   (3), 매개변수 값이 잘못됨(예: 날짜 형식에 타임스탬프가 필요하지만 문자열이 주어진
   (4), 인터페이스 문서가 잘못되었습니다
   (5), 중국어 디코딩 및 인코딩은
   오류를 발생시키지 않습니다
   (1), 백엔드에 연결되지 않은 몇 가지 추가 매개 변수가 전달됩니다
   (2) get에서 요청한 번호는 문자열이나 숫자로 나누지 않음
5. 405———이 방법은 허용되지 않습니다. 포스트에서 흔히 발생하고 오류가 발생합니다.
6. 415———헤더가 잘못되었습니다. 가장 일반적인 것은 contentType이 잘못되었다는 것입니다.

5xx 오류

1. 500——서버 예외
   (1) 인터페이스가 신뢰할 수 있으면 서버가 비정상입니다.
   (2) 인터페이스가 신뢰할 수 없으면 프런트 엔드 매개 변수 오류일 수 있습니다
   . 어느 것이든 서버 로그에 따라 다릅니다.
2. 502——게이트웨이 오류, 서버가 실행 중이 아니거나 시간이 초과되었을 수 있습니다.
3. 504———서버 시간 초과, 서버 네트워크 연결 해제 또는 시간 초과 설정이 너무 짧음

200 그러나 반환을 보지 못했습니다

(1) 수신된 파일이 표시되지 않을 수 있습니다. (일반적으로 깨진 문자가 많이 수신됩니다.)
(2) 서버가 중단되고 시간이 초과됩니다
. (3) 브라우저가 너무 많은 콘텐츠를 수신할 수 없습니다. 우편 배달부로 시도할 수 있습니다.

2, js 일반적인 오류

js 네 가지 오류 유형

1. RangeError
   로 설정한 값이 해당 범위를 초과하는 경우 기본적으로 js의 내장 메소드를 이용한 파라미터 오류이며, 버그를 찾을 수 없는 경우 현재 페이지에서 사용하는 js의 내장 메소드를 찾는다.
2. ReferenceError
   참조 유형 오류, 기본적으로 정의되지 않음
3. SyntaxError
   는 문법적 오류로 단순한 경우 오류 메시지를 직접 읽어보면 답을 알 수 있고 어려울 경우 SyntaxError가 보고되며 프롬프트가 없을 경우 편집기의 구문 검사를 통해 빠르게 찾을 수 있습니다. .
4. TypeError
   유형 오류, 기본적으로 정의되지 않음

js 일반적인 오류

5. 잡히지 않은 TypeError: 정의되지 않은 '' 속성을 읽을 수 없습니다.
   개체가 존재하지 않습니다. 오류 보고서 문제를 해결하는 것이 좋습니다. 해당 코드 스니펫을 확인하십시오.
   백엔드가 null 값을 반환할 때 프런트엔드가 반환 값 유형을 확인하지 않는 것이 더 일반적입니다.
   정의되지 않은 오류도 있습니다:
   (1), TypeError: 'undefined' is not an object ---- 이전 버전의 Safari에서만 볼 수 있으며 이제 어떤 것이 있는지 모르겠습니다
   (2), TypeError : 정의되지 않은 '길이' 속성을 읽을 수 없음 ----대상이 배열 또는 문자열이 아님
   (3), Uncaught TypeError: 정의되지 않은 … 속성을 설정할 수 없음
   (4), ReferenceError: … 정의되지 않음 ----- 정의되지 않음 또는 범위
   (5) 내에서 찾을 수 없음, TypeError: 'null' is not an object----이전 버전의 Safari에서 보고된 오류는 실제로 정의되지 않음
6. (알 수 없음):
   도메인 간 스크립트 오류가 일반적이며, 서버에서 화이트리스트를 열거나 프록시를 구성합니다.
7. TypeError: ...는 정의되지 않은 함수를 호출하는 함수가 아니며
   , 이는 종종 고차 함수의 부주의한 작성으로 인해 발생합니다.
8. Uncaught RangeError: 최대 호출 스택
   오버플로
   (1), 재귀 무한 루프
   (2), JSON.stringify, JSON.parse 입력 매개변수가 너무 커서 주기가 너무 많습니다.
9. 포착되지 않은 예외: ReferenceError: Cannot assign to 'this'
   함수 또는 this 키워드의 반환 값에 값을 할당하는 것과 같이 할당할 수 없는 변수에 값을 할당합니다.
10. Uncaught TypeError: 원형 구조를 JSON으로 변환
    JSON.stringify
11. Unexpected token <,; 및 Unexpected identifier는
    문법적으로 올바르지 않습니다. 일부 브라우저 버전에서는 쉼표가 누락된 경우 메시지를 표시하고 Unexpected identifier를 직접 메시지로 표시합니다. 어떤 줄인지 묻지 않으면 찾기가 어렵습니다. 당신 편집기의 구문 검사를 사용해 볼 수 있습니다.
12. Uncaught SyntaxError: Identifier ''가 이미 반복적으로 선언되었습니다.
    let으로 선언된 변수를 선언합니다.
13. Uncaught TypeError: 상수 변수에 할당
    const로 선언된 변수 수정
14. vue 및 react와 같은 플러그인에 의해 발생하는 오류는
    영어만 이해하고 이해하지 못하는 경우 온라인으로 확인하십시오.

셋, js 디버깅 방법

여러 브라우저 디버깅 방법

1. alert는
   골동품 수준의 디버깅 방법으로 현재 휴대폰에서 중단점 디버깅에 사용되지만 앱에서 금지할 수 있습니다. (Tucao: 고대에 남아있는 오래된 자바가 사용할 수 있는 프론트엔드 지식이 아직 남아 있습니다)
2. 
   모두가 console.log() 및 debugger 를 알고 있으므로 많이 말하지 않겠습니다.
3. Dom 중단점 디버깅
   개발 과정에서 때때로 다음과 같은 문제가 발생합니다: 페이지의 DOM 요소가 변경되었지만 어떤 스크립트가 변경했는지 알 수 없습니다.jquery
   시대에 가끔 사용되며 기본적으로 vue 및 react를 사용합니다. 디버깅할 때만 소스 코드를 볼 수 있기 때문에 온라인에서 볼 수 없습니다. 구식입니다. 간단히 언급하십시오.
   사용 방법: 요소를 마우스 오른쪽 버튼으로 클릭 -> 중단 -> 속성 수정 -> 속성 트리거 변경
   
4. XHR Breakpoints는
   호출하는 인터페이스의 코드가 어디에 있는지 알 수 있다.많이 사용되지는 않는다.현재는 기본적으로 axios와 같은 플러그인의 소스 코드로 간다.자체적으로 패키징된 xhr만 사용할 수 있다.사용 방법: console
   소스->XHR 중단점->+ 기호 -> 링크 입력
   
5. 
   이벤트별 버그를 찾기 위한 이벤트 리스너 중단점
   애플리케이션 시나리오: 예를 들어 본문이 클릭 이벤트에 바인딩되고 클릭 이벤트가 충돌하지만 어떤 코드가 바인딩되었는지 알 수 없습니다(예: 플러그인 코드는 이벤트가 발생한 위치를 볼 수 없으며 이를 사용하여 이벤트를 수신하는 파일을 찾은 다음 해당 플러그인의 문서 또는 소스 코드로 이동할 수 있습니다. .
   

일반적으로 사용되는 몇 가지 개인 포지셔닝 방법

1. 직접 작성한 코드는 문제를 한눈에 볼 수 있습니다.
2. 오류 메시지를 기반으로 해당 오류 줄을 직접 찾은 다음 단계별로 디버그(console.log 또는 debugger)
3. 어떤 줄로 가야할지 힌트는 없지만 다음과 같은 키워드가 있습니다. 정의되지 않은 속성 ''을 읽을 수 없으며
   해당 파일 또는 폴더를 검색한 다음 단계별 디버그
4. 키워드가 없고, 코드가 압축되어 a is not defined라는 프롬프트가
   pc단에서 로컬 환경으로 재생산됩니다. 나중에 모바일 끝)
5. 프롬프트 정보가 명확하지 않음(예: 스크립트 오류)
   1. 각 노드에서 디버거 또는 console.log()를 재생하여 실행되지 않는 위치를 확인합니다.
   2. trycatch를 사용하여 세그먼트별로 코드 세그먼트를 래핑하고 오류를 인쇄합니다. 코드에 커플링이 없으므로 코드를 직접 분할할 수도 있습니다. 주석 처리할 수도 있습니다.

스크립트 오류

휴대폰에서 디버깅을 할 때 간혹 '스크립트 오류'가 뜨고 그 외 정보가 없습니다. 이것은 실제로 일부 브라우저가 스크립트 리소스 로딩을 구현하는 곳으로 동일 출처 정책에 의해 판단됩니다.동일 출처가 아닌 리소스인 경우 errorMessage는 "스크립트 오류"로 작성됩니다. 해결 방법

:

1. 브라우저 문제이므로 다른 브라우저로 변경하시는 것이 좋으며, 모든 브라우저에 이러한 제한이 있는 것은 아니며, 휴대폰 변경을 선택하실 수 있습니다.
2. 스크립트의 crossorigin 속성을 사용하여 아래 단계에 따라 구성합니다.
   1. 스크립트의 crossorigin 속성을 추가합니다
   . 2. 서버를 구성하고 정적 리소스 Javascript의 응답을 Access-Control-Allow-Origin으로 설정합니다.

4. 모바일 단말기 디버깅

모바일 디버깅 도구

1. Google 에뮬레이터 로컬 디버깅, 모두 이해
   
2. 모바일 디버깅 아티팩트 vconsole 및 Eruda
   Eruda는 사용하기가 더 쉽습니다.

<!--eruda-->
<script src="eruda.min.js"></script>
<!--vconsole-->
<script src="vconsole.min.js"></script>
<script>
        var vConsole = new window.VConsole();
        eruda.init();
</script>

3. 
   패킷 캡처 도구 사용: Charles와 Fiddler와 같은 저자는 당시 회사에서 Mac을 발행했기 때문에 Charles만 사용했고 Mac은 Charles를 더 많이 사용했으며 Windows를 사용하는 동료는 Fiddler를 사용하는 것을 선호합니다.이 두 소프트웨어는 서로 다른 시스템과 호환되며, 하나를
4. 센트리 오류 모니터링과 같은 오류 모니터링 플러그인 사용
   웹 사이트 https://sentry.io/에서
   오류 로그를 플랫폼에 업로드 오류 모니터링이 매우 편리함
   단점은 사용자 정보 수집으로 간주된다는 것입니다. 개인화 된 배포이므로 나쁘지 않게 사용하십시오.
5. 호환성 테스트 플랫폼
   휴대 전화의 호환성 테스트는 일반적으로 타사에서 수행하지만 적용 범위도 제한적입니다.일부 사용자가 구형 휴대 전화 모델을 가지고 있지만 회사에 해당 휴대 전화가 없는 경우 이 온라인으로 이동할 수 있습니다. 휴대폰 렌탈 플랫폼(Jugui)
   내가 사용한 플랫폼 중 하나: Yuntest https://www.testin.cn/business/landing/test_machine.htm
6. Mac 및 iPhone 연결 디버깅

h5와 앱의 공동 디버깅에서 여러 오류

1. 앱이 프런트 엔드 코드를 호출할 수 없습니다.
   코드가 창 개체에 있는지 확인하세요.
2. 사진, 블루투스, 포지셔닝 등을 찍지 못했습니다.
   앱에 권한이 없을 수 있습니다.
3. 키보드가 뜨고
   페이지 하단에 앱 설정 문제를 커버합니다 Android나 ios를 찾아서 해결하면 됩니다 프런트엔드에서 해결할 방법이 없습니다 주된 이유는 모델이 너무 많아서 조정하다. 앱이 퍼블리싱이 안되면 정말 처리하고싶은데 포커스를 이용해서 모니터링하고 하단에 패딩을 추가해서 위로 올리면 되고 동시에 하단으로 스크롤을 내려야함
4. 키보드가 뜨고 입력창의 커서가 원래 위치로 돌아오지 않는 현상
   이는 프론트엔드에 속하는 호환성 문제로 해결해야 할 부분 모니터 포커스, 블러, 제어 페이지 스크롤링
5. 
   연결 해제 후 다시 연결하려면 인터페이스를 가로채도록 로그인 시간 초과를 설정해야 합니다.
6. 초기 페이지로 돌아가서 종료할 수 없거나 돌아가서 페이지를 직접 종료하면
   앱 개발에서 설정하도록 하십시오. 모두 자신의 잘못입니다. 또는 로그아웃 방법을 제공하도록 요청할 수 있습니다. Android 및 iOS는 모두 webView.goBack/webView.canGoBack입니다.
   또 다른 솔루션은 Vue 라우팅과 같이 직접 라우팅 제어 세트를 만드는 것입니다. 라우팅 원칙은 다음과 같습니다.
7. 라우팅을 제어하고 history.go(), location.replace() 및 기타 제어 방법을 사용하십시오. 그렇지 않으면 페이지가 항상 되돌아갈 수 없습니다.

마침내

1. 못찾는 버그는 없고 참을성 없는 사람만 있을 뿐
2. 할 수 있는지 물어보십시오. 한 시간 안에 답을 찾을 수 없으면 누군가에게 물어보십시오.
3. 해결할 수 없는 문제를 해결하는 사람들