이전 기사는 JS 디버깅 시리즈에 대한 몇 가지 기본 지식을 소개했습니다. 이번에는 Bridbled Code Brothers가 JS 브레이크 포인트 및 동적 디버깅 방법을 가져 왔습니다. 필요한 친구는 그것을 참조 할 수 있습니다.
수업 후 연습 어제 1. 투표 기지 기능이 권장되는대로 어떻게 구현되는지 분석하십시오.
실제로, 우리는 소스 코드를 보았습니다. 소스 코드를 읽으면 구현 방법을 알 수 있습니다.
함수 votepost (n, t, i) {i || (i =! 1); var r = {blogapp : currentBlogapp, postId : n, voteType : t, isabandoned : i}; $ ( "#digg_tips"). css ( "color", "red"). html ( "commit ..."); $ .ajax ({url : "/mvc/vote/voteblogpost.aspx", type : "post", datatype : "json", contenttype : "application/json; charset = utf-8", data : json.stringify (r), success (n) {if (n.issuccess) { " + t. "_count"; R.Isabandoned. html? (n.status == 500? $ ( "#digg_tips"). html ( "죄송합니다! 오류가 발생했습니다! [email protected]") : $ ( "#digg_tips"). html (n.responsetext))}); }거의 이와 같습니다.
추신 : Chrome 콘솔에서 포맷 한 후 결과와 약간 다릅니다.
이 온라인 서식 도구를 시도 할 수도 있습니다. 효과는 비슷합니다 : 온라인 JavaScript Beautiful
코드를 간단히 읽은 후에는이 기능에 3 개의 매개 변수가 있다는 것을 대략 알 수 있습니다. 첫 번째는 기사 ID 인 PostID이고 두 번째는 권장 사항 (DIGG) 또는 야당 (BURY)입니다.
그러나 세 번째는 사용되지 않았으며 기본값은 False입니다.
아래를 내려다 보면 #digg_tips에서 "제출 ..."문자열을 표시 한 다음 Ajax를 통해 데이터를 백그라운드에 제출합니다.
데이터를 반환 한 후 n.issuccess가 true 인 경우 (#digg_count) 또는 반대 (#bury_count)의 해당 카운트 ID에서 +1이됩니다.
그러나 iSabandoned의 값이 참이면 -1.
그런 다음 세 번째 매개 변수가 추천 또는 이의 제기를 취소하는 데 사용된다고 추측 할 수 있습니다. 간단히 말해, 추천을 클릭했지만 지금 추천하고 싶지는 않습니다. 권장 사항을 취소하는 효과를 달성하기 위해 True True 매개 변수를 전달할 수 있습니다.
나중에 테스트합시다.
다음으로 서버에서 반환 한 N.Message 정보는 #digg_tips에 표시됩니다.
Ajax에서 오류가 발생하면 500입니다. "죄송합니다! 오류가 발생했습니다! [email protected]으로 피드백을 받으십시오."다른 상태가 직접 서버에 오류 메시지를 반환합니다.
이것은 일반적인 과정입니다.이 기능은 간단하기 때문에 한 눈에 볼 수 있습니다.
새로운 친구들이 물었을 수도 있습니다. currentBlogapp, n, t, i가 어떤 가치인지 어떻게 알 수 있습니까?
그런 다음 다음 단계와 동적 디버깅으로 가자. 동적 디버깅은 컴파일 된 프로젝트에 매우 유용한 방법입니다.
먼저 VotePost 소스 코드를 찾으십시오.
너무 쉽게 소스 코드를 찾았습니다.
다음으로 숫자 92를 클릭하고 중단 점 작동을 수행합니다.
91 행의 중단 점은 무엇입니까?
91 행은 함수 선언 부분이므로 중단 점을 설정할 수 없으므로 기능에 의해 실행될 코드에서 중단 점을 설정할 수 있습니다.
91 행의 줄 수가 파란색으로 변한 것을 보고이 장소에 중단 점이 있음을 나타냅니다. 동시에 오른쪽의 중단 점 열에서 다운 된 중단 점을 볼 수 있습니다.
브레이크 포인트 열은 모든 중단 점을 관리하여 해당 브레이크 포인트 위치로 쉽게 리디렉션 할 수 있으며 향후 사용될 것입니다.
중단 점 설정을 완료 했으므로 권장 사항을 클릭합니다. . (권장 사항을 속이는 것처럼 느껴지지만 실제로 그렇게 생각하지 않았습니다. 방금 연습 할 버튼을 찾았습니다.)
추천 버튼을 클릭하면 마술이 일어났습니다. 추천 함수를 실행하는 대신 콘솔의 소스 패널에서 방금 내린 중단 점으로 이동했습니다.
이제 오른쪽의 스코프 변수 열에서 현재 변수를 볼 수있을뿐만 아니라 마우스를 변수의 값을 보려면 마우스를 직접 변수로 이동시킵니다.
스코프 변수 열에는 현재 범위와 상위 스코프 및 클로저가 표시됩니다.
매우 편리하지 않습니까? . (스코프 변수는 처음으로 클로저를 배우고있을 때 많은 도움이되었습니다.)
다음 단계로 가서 F10을 3 번 눌러 이와 같은 것을 보자.
F10을 누를 때마다 성명서를 실행합니다. 지금 막 3 번 누르면 $ ( "#digg_tips"). css ( "color", "red"). html ( "제출 ...")을 실행합니다.
따라서 #digg_tips가 페이지 제출에 단어를 표시하는 것을 볼 수 있습니다.
그러나 F10을 다시 누르면 Ajax 내부에서 콜백 함수에 들어가지 않고 계속 계속 실행된다는 것을 알았습니다.
이것은 혼란스러운 질문이며, 나는 그것에 집중하고 싶습니다.
이와 같은 콜백 함수, 특히 비동기식의 경우 콜백 함수 내부의 다음 중단 점이 필요합니다.
그래서 우리는 96 행에서 중단 점을 설정할 수 있습니다. 이제 권장 사항을 클릭하고 92 행에서 여전히 중지 할 수 있습니다. F8을 누르고 Ajax 콜백 함수에서 나눌 수 있습니다.
이제 콜백 데이터를 디버깅 할 수 있으며 오른쪽의 범위 변수에는 추가 폐쇄가 있음을 알 수 있습니다.
지금 이해할 수 없다면 그냥 통과하십시오. 이 일은 많은 시간에 소개되어야하며 몇 마디로 만 설명 할 수 없습니다. 어쨌든, 콘솔은 매우 강력합니다.
폐쇄를 보면서 Ajax의 리턴 데이터 N도 볼 수 있습니다. 내 issuccess 속성은 거짓이며 "자신의 컨텐츠를 추천 할 수 없다"는 메시지를 반환하기 때문에 성공하지 못했다는 것은 분명합니다.
그다지 흥미롭지 않습니까? 다이나믹 디버깅으로 버그를 쉽게 찾을 수 있습니까?
다음으로 세 번째 매개 변수를 실험 해 봅시다.
우리는 VotePost (cb_entryid, 'digg', true)를 입력합니다. Enter를 누릅니다.
또한 92 행의 중단 점에서 중단 되었으므로이 부분에서 디버그하지 않고 F8의 AJAX 콜백 함수를 직접 입력합니다.
여기서 우리는 세 번째 매개 변수가 true 일 때 권장 사항이 실제로 취소된다는 것을 분명히 알 수 있습니다. 동시에, 추천 번호가 실제로 -1임을 알 수 있습니다.
이번에는 두 개의 바로 가기 키 F10과 F8을 사용했습니다. 우리는 내일 세부적으로 소개 할 것입니다. 오늘 우리는 먼저 기본 디버깅을 배울 것입니다.
수업 후 운동 : (난이도 개선)
1. 아래의 의견은 댓글 제출 버튼을 확인하고 그의 이벤트를 찾으십시오. (jQuery 바운드)
2.이 제출 의견 이벤트의 실행 프로세스를 동적으로 디버깅하십시오.
이 연습을 모르는 경우 자세한 분석을 위해 "jQuery 이벤트 소스 코드 포지셔닝 문제에 대한 간단한 대화"를 읽어 보는 것이 좋습니다.
이 기사는 다음과 같습니다. Blog Garden Blogger의 Barbled 기사. http://www.cnblogs.com/52cik/