1. 브레이크 포인트 디버깅이란 무엇입니까? 어렵습니까?
브레이크 포인트 디버깅은 실제로 복잡한 것이 아닙니다. 나가는 통화가 없음에 대한 간단한 이해는 브라우저, 오픈 소스를 열고 JS 파일을 찾고 줄 번호를 클릭하는 것입니다. 운영이 매우 간단 해 보이지만 실제로 많은 사람들이 실제로 혼란스러워하는 것은 포인트를 어디에서 깰 수 있습니까? (먼저 Chrome 브라우저의 중단 점을 예로 들어 Breakpoint 스크린 샷을 보자)
단계를 기억하십니까?
크롬 브라우저로 페이지를 열어 → F12를 눌러 개발자 도구 → 오픈 소스 → 디버그 할 JS 코드 파일 열기 → 줄 번호를 클릭하십시오! 타격에 대한 처녀 중단 점을 축하합니다, 하하 ~~
2. 브레이크 포인트를 적절하게 맞추는 방법은 무엇입니까?
중단 점의 작동은 매우 간단합니다. 핵심 문제는 코드 문제를 해결하기 위해 중단 점을 누르는 방법입니다. 이해할 모범을 계속 알려 드리겠습니다. 더 이상 고민하지 않고 위의 그림 :
위의 그림과 같이 더 많이로드하는 함수를 구현하고 있지만 더 많은 기능을로드하는 데 문제가 있습니다. 클릭하면 데이터가로드되지 않습니다. 현재 우리는 어떻게 생각해야합니까? (답을 다른 줄에 쓰면 첫 번째 반응이 무엇인지 알 수 있습니다)
내 마음에 처음으로 온 것은 내 클릭이 성공했는지 여부였습니다. 클릭 이벤트의 메소드가 실행 중입니까? 좋아,이 질문에 대한 답을 알고 싶다면 즉시 중단 점을 치십시오. 중단 점은 어디에 있습니까? 먼저 생각해보십시오.
다음 사진 :
당신은 그것을 생각 했습니까? 클릭이 성공적인지 알고 싶기 때문에 코드의 클릭 이벤트에서 중단 점을 추가하고 있습니다. 클릭 메소드의 함수가 라인 226의 선택기가 아닌 실행되기 때문에 226 행에 추가하지 마십시오. 중단 점이 이제 적용되었으므로 어떻게해야합니까? 직접 생각해보십시오 ~
위의 그림을 계속하십시오.
물론 우리는 돌아가서 더 많은로드 버튼을 클릭했습니다. 왜? 이마. . . 이것을 묻는다면, 더 많은 버튼을 클릭하지 않고이 이모티콘을 사용해보십시오. 클릭 이벤트를 트리거하는 방법은 무엇입니까? 클릭 이벤트를 트리거하지 않고 클릭 이벤트에서 기능을 실행하는 방법은 무엇입니까? 활발한. . 하지만 모든 사람이 그런 낮은 질문을하지 않을 것이라고 믿습니다 ~ 나는 말도 안되는 말을하지 않을 것입니다 ~
주제를 계속하십시오. 위의 그림은 더 많은 버튼을 클릭 한 후 상황입니다. 왼쪽의 페이지가 반투명 레이어로 덮여 있음을 알 수 있습니다. 페이지 위에는 일련의 영어와 두 개의 버튼이 있습니다. 오른쪽에있는 코드의 227 줄은 배경색으로 추가되었습니다. 이 상황은 버튼의 의미와 기능이 무엇을하든 관계없이 발생합니다. 이 사진에서 어떤 정보를 얻었습니까? 그것에 대해 계속 생각하십시오 ~
위의 상황이 발생하면 클릭 이벤트의 기능이 호출되었음을 의미하며 클릭 이벤트가 발효됩니다. 그런 다음이 문제를 일으킨 첫 번째 "범죄 용의자"는 배제됩니다.
추가하려면 :
위의 상황이 발생하지 않으면 어떻게됩니까? 그것은 클릭 이벤트가 발효되지 않았다는 것을 의미합니까? 클릭 이벤트가 적용되지 않은 원인은 무엇입니까? 모두가 그것에 대해 생각합니다 ~
다중 선택기 오류, 구문 오류, 선택된 요소 등과 같은 클릭 이벤트가 적용되지 않는 이유는 여러 가지가 있습니다.이를 해결하는 방법은 무엇입니까?
선택기가 잘못되었습니다. 나중에 콘솔 부분의 내용을 계속 볼 수 있습니다. 모든 사람들이 그것을 다루는 방법을 알고 있다고 생각합니다.
구문 오류가 조심스럽게 확인하십시오. 바이두에서 익숙하지 않은 문법을 비교할 수 있습니다.
선택된 요소는 나중에 생성됩니다. 처리하는 가장 쉬운 방법은 .on () 메소드를 사용하는 것입니다. 이것은 이벤트 대표단으로 처리됩니다. 자세한 내용은 Baidu를 사용할 수 있습니다.
그렇다면 다음에 "범죄 용의자"의 신원은 어디에 잠겨 있습니까?
우리는 내부의 이벤트에주의를 돌리고 클릭 이벤트가 트리거되므로 다음 문제는 그 내부의 기능 문제입니다. 왜 그런지 물어보고 싶다면? 두부 한 조각을주세요. . .
예를 들어, 나는 당신에게 펜을주고 글을 쓰라고 요청할 것입니다. 그런 다음 종이에 단어를 쓰고 단어가 나오지 않는다는 것을 알게됩니다. 왜? 당신은 내가 그것을 썼다고 말했지만 종이에 여전히 흠집이있었습니다. 펜에 잉크가 없거나 팁이 고장 났을 수 있습니까? 이 예제는 클릭 하중의 원리입니다. 쓰기 동작은 클릭 작업이며 내부 기능은 잉크 또는 펜 팁입니다. 당신은 이해합니까 ~
다음으로, 우리는 세 문장이 포함 된 클릭 이벤트의 내용을 분석합니다. 첫 번째 문장은 I 자체로 자라는 변수, 두 번째 문장은 버튼에 I 태그를 추가하는 것이며 세 번째 문장은 데이터를 요청하는 방법을 호출하는 것입니다.
이 세 문장의 역할을 통해, 우리는 의심의 더 큰 부분을 세 번째 문장에, 첫 번째와 두 번째 문장에서 작은 부분을 배치 할 수 있습니다. 어떤 사람들은 두 번째 문장이 어떻게 의심 스러울 수 있습니까? 그의 기능은 단지 데이터에 전혀 영향을 미치지 않는 레이블을 추가하는 것입니다. 실제로이 문장은 데이터에 영향을 미치지 않지만 엄격한 고려 사항을 위해서는 여전히 실수를 저지르면 세미콜론이 부족한 경우 어떻게해야합니까? 아니면 문장 안에 상징이 잘못 되었습니까? 종종, 우리 시간을 많이 낭비하는 것은 이런 종류의 작은 문제입니다.
자, "범죄 용의자"를 더 잠그려면 위의 그림에 나타나는 두 아이콘 중 하나 인 도구를 소개하겠습니다. 아래 그림을 참조하십시오.
이 작은 아이콘의 기능을 "문장으로 실행"또는 "단계별로 실행"이라고합니다. 이것은 내가 개인적으로 이해하는 이름입니다. 즉, 클릭 할 때마다 JS 문은 나중에 문장을 실행하고 바로 가기 키 F10도 있습니다. 다음 그림은 클릭 한 후 효과를 보여줍니다.
이 버튼을 두 번 클릭했거나 F10 바로 가기 키를 사용했으며 JS 코드는 227 행에서 229 행으로 실행되었으므로 "State-by-Step"또는 "Step By-Step"이라고 불렀습니다. 이 기능은 매우 실용적이며 대부분의 디버깅에 사용됩니다.
너무 늦었 어, 내일 계속 쓸게요, 좋은 쇼가 아직오고 있습니다 ~
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ---
좋아, 계속 쓰십시오!
위의 소개는 "문장 별 실행"버튼을 두 번 클릭했으며 코드는 227 행에서 229 행까지 실행되었음을 보여줍니다. 이것이 무엇을 의미한다고 생각하십니까? 문법적 관점에서 처음 두 문장이 문제가되지 않다는 것을 의미합니까? 따라서 처음 두 문장이 의심을 제거한다는 의미입니까? 나는 그것을 보지 못한다.
우리 모두 알다시피, 더 많이로드하는 것은 다음 페이지의 함수이며, 가장 핵심은 백그라운드로 전달되는 페이지 번호 값입니다. 더 많은 버튼을 한 번 클릭 할 때마다 페이지 번호 값이 1 씩 증가해야합니다. 따라서 다음 페이지의 데이터가 나오지 않으면 페이지 번호 값, 즉 [I 변수]에 문제가있을 수 있습니까 (다음은 Unified Name I입니까?)? 그렇다면 페이지 번호에 문제가 있는지 문제를 해결하는 방법은 무엇입니까? 모두가 먼저 생각합니다.
다음은 페이지 번호 I의 실제 출력 값을 보는 두 가지 방법입니다.] 위의 그림입니다.
첫 번째 유형 :
작동 단계는 다음과 같습니다.
1. 여전히 라인 227 → 2를 클릭하십시오. 더 많은 버튼을 클릭하십시오 → 3. "문장으로 실행 명령문"버튼을 한 번 클릭하면 JS 코드가 228 → 4 행으로 실행됩니다. 마우스를 사용하여 i ++를 선택한다는 의미는 무엇입니까? 위의 그림에서 결과.
두 번째 유형 :
이 방법은 실제로 I의 값이 콘솔에서 출력된다는 것을 제외하고는 첫 번째 방법과 유사합니다. 3 단계 → 4로 실행하려는 첫 번째 방법 만 따라야합니다. 소스 → 5와 같은 레벨의 콘솔을 엽니 다. I → 6을 입력하십시오. Enter enter 키를 누르십시오.
위의 두 번째 방법에는 콘솔이 언급됩니다. 우리는 그것을 콘솔이나 다른 것을 부를 수 있습니다. 이것은 중요하지 않습니다. 콘솔은 매우 강력한 기능을 가지고 있습니다. 디버깅 프로세스 중에는 특정 변수의 값이 출력되는 내용 또는 선택기 [$ ". Div")를 사용하여 원하는 요소를 선택하는지 여부를 콘솔에 인쇄 할 수 있는지 종종 알아야합니다. 물론 첫 번째 방법을 직접 사용할 수도 있습니다.
콘솔에서 선택하려는 요소를 보여 드리겠습니다. 위의 그림 ~
선택한 요소를 얻으려면 콘솔에 $ (this)를 입력하십시오. 예, 클릭 한 객체입니다. 더 많은 버튼 요소를로드하십시오.
여기서는 콘솔 콘솔에 대한 이해를 알려 드리겠습니다. 이것은 브라우저 자체가 JS를 실행하는 사람을 구문 분석하는 데 사용되는 JS 파서입니다. 그러나 브라우저를 통해 개발자는 콘솔을 통한 디버깅 프로세스 중에 JS의 작동 및 출력을 제어 할 수 있습니다. 위의 두 가지 방법을 통해 사용하기가 매우 쉽다고 생각할 수도 있지만, 나는 당신에게 상기시키고 싶거나 일부 초보자가 더 많이 접할 가능성이 더 높은 혼란입니다.
혼란스러운 1 : 중단 점이 없으면 콘솔에 I를 입력하면 콘솔이 오류를보고합니다.
이것은 초보자에게 일반적인 문제가되어야합니다. 포인트를 깨지 않고 콘솔에서 변수 값을 직접 출력 할 수없는 이유는 무엇입니까? 개인적으로, 나는 현재로서는 지역 변수라는 것을 이해합니다. 중단 점이 설정되지 않으면 브라우저는 모든 JS를 구문 분석합니다. 콘솔은 로컬 변수에 액세스 할 수 없지만 전역 변수에만 액세스 할 수 있습니다. 따라서 콘솔은 정의되지 않은 오류를보고하지만 JS가 중단 점에 부딪히면 콘솔이 로컬 변수가 위치한 기능으로 구문 분석하고 현재에 액세스 할 수 있습니다.
혼란 2 : 콘솔에서 왜 $ ( ". xxx")로 직접 인쇄 할 수있는 이유는 무엇입니까?
매우 간단합니다. 콘솔 자체는 JS 파서이고 $ ( ". xxx")는 JS 문이므로 자연스럽게 콘솔은이 문장을 구문 분석하고 결과를 출력 할 수 있습니다.
"문장 별 실행"버튼 및 콘솔의 사용을 도입 한 후 마지막으로 위의 그림을 소개합니다.
이 버튼을 "Process Execution"버튼으로 호출합니다.이 버튼은 "명령형 실행"버튼과 다릅니다. "프로세스 실행"버튼은 메소드가 여러 JS 파일을 호출 할 때 종종 사용됩니다. 관련된 JS 코드는 비교적 길기 때문에이 버튼이 사용됩니다.
위에:
위의 그림에서 227 행에서 중단 점을 만든 다음 "문장으로 실행 명령문"버튼을 라인 229로 계속 클릭한다고 가정 해 봅시다. 다음 그림에서 JS를 입력합니다.
Zepto 라이브러리 파일의 내용입니다. 볼 좋은 것은 없습니다. 달리기가 매우 복잡합니다. 우리는 항상 "문장 별 실행"버튼을 사용할 수 없으므로 대부분의 하루를 누르고 있으며 도서관 파일에서 여전히 돌고 있음을 알게 될 것입니다. . . 현재 무엇을해야합니까? 그런 다음 "프로세스별로 실행"버튼으로 무대에 올라갈 시간입니다.
위에:
227 행에서 중단 점을 설정하는 것 외에도 237 행에서 중단 점을 누르십시오. 229 행으로 실행되면 "프로세스 별 실행"버튼을 직접 클릭하십시오. JS가 라이브러리 파일을 직접 건너 뛰고 237 행으로 달렸다는 것을 알게 될 것입니다. 직접 사용하여 경험할 수 있습니다.
최종 요약 :
이 기사에서는 주로 "Sentence-by-Serial Execution"버튼, "프로세스 별 실행"버튼, 콘솔 콘솔 및 버그를 디버깅 할 때 아이디어의 세 가지 도구를 소개합니다. 도구의 사용을 반복하지 않을 것입니다. 사용법을 알고 있습니다. 더 합리적으로 사용하는 방법은 많은 연습을 통해 요약하고 개선해야합니다 ~
실제로이 기사에서 주로 이야기하고 싶은 것은 버그를 디버깅하는 방법이지만, 내가 선택한 예제에는 너무 많은 것들이 포함되기 때문입니다. . . 나는 모든 것의 내용이 너무 길고 모든 사람들이 그것을 읽는 데 관심이 없다는 것을 두려워했습니다. 그래서 나는 단순히 당신에게 그것을 설명 할 부분을 선택했습니다. 당신이 무엇이든 얻었는지 궁금합니다. 디버깅에 많은 것을 쓴 세 문장을 보지 마십시오. 실제 프로젝트에서 저처럼 실제로 그렇게한다면 스크립트를 작성하는 것보다 버그를 디버깅하는 데 시간이 오래 걸릴 것입니다. . . 실제 상황에서, 우리는 처음으로 문제를 일으키고, 마음 속의 문제를 확인하고, 가장 가능성이 높은 지점을 찾아야합니다. 가장 중요한 점을 빠르게 찾을 수 없다면 가장 번거롭지 만 신뢰할 수있는 방법을 사용하여 "문장 별 실행"버튼을 사용하여 문제와 관련된 전체 JS를 하나씩 실행할 수 있습니다. 실행 과정에서 우리는 또한 우리의 생각을 명확히하고 각 변수의 올바른 값과 선택기가 선택한 요소에주의를 기울여야합니다. 일반적으로 말하면,이 작업을 한 번 수행하면 버그가 거의 해결됩니다.
그래서 나는 버그를 디버깅한다는 우리의 아이디어가 다음과 같아야한다고 개인적으로 생각합니다. 첫째, JS가 성공적으로 실행되는지 여부; 둘째, JS가 논리 문제, 가변 문제, 매개 변수 문제 등이 있는지 여부; 마지막으로 위의 문제가 없으면 다양한 기호를주의 깊게 확인하십시오. . .
OK ~ 그게 중단 점에 관한 모든 것입니다 ~ 이해하지 못하면 아래에 메시지를 남길 수 있습니다. ~ 프론트 엔드에 대해 이해하지 못하거나 혼란스러워하는 지식 포인트가 있으면 아래 메시지를 남길 수도 있습니다. 시간이 있으면 메시지에 문서를 계속 쓸 것입니다 ~