Node.js 디버깅 시리즈 소스 코드 위치 지정 및 디버깅 [기본]_javascript 기술

먼저 첫 번째 문제부터 다루겠습니다. 1. 기사 하단에서 이 함수가 호출하는 권장 함수 소스 코드를 확인하세요
실제로는 매우 간단합니다. 돋보기를 클릭하여 추천 항목을 선택하기만 하면 됩니다.

이 votePost(cb_entryId,'Digg')는 추천버튼에 의해 호출되는 함수입니다. 아주 간단하지 않나요?

두 번째 질문은 함수가 위치한 파일 위치를 찾는 것입니다.
사실 아주 간단합니다. 물론 콘솔에 익숙하지 않은 친구들은 어떻게 보는지 모를 수도 있습니다.
콘솔에 votePost를 입력하고 Enter 키를 누릅니다.

함수 소스 코드가 굵게 표시되어 있고, 오른쪽 하단에 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:1 링크가 있습니다. 이것은 무엇을 의미합니까?
다음 v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1은 단순히 무시됩니다.

ps: 이것이 무엇인지 알고 싶다면 실제로는 버전 번호입니다. 기능은 캐싱을 방지하기 위한 것입니다. 자세한 내용은 온라인에서 검색하세요.
blog-common.js:1 이것이 바로 그 의미입니다. .
blog-common.js는 이 기능이 위치한 js 파일입니다
1은 코드의 줄 번호입니다.

이 링크를 클릭하면 소스 패널로 바로 이동합니다. 이것은 나중에 소개할 소스 코드 패널입니다.

그런데 모든 코드가 한 줄에 있는데 어떻게 바꿔야 할까요? 4946자가 모두 한 줄에 압축되어 있습니다. .
Chrome은 코드 서식 지정 기능을 제공합니다. 코드 서식을 지정하려면 아래의 예쁜 인쇄 버튼을 클릭하세요.

포맷이 완료되면 코드가 매우 아름다워질 것입니다. 읽을 수 있는지, 이해할 수 있는지는 또 다른 문제입니다.
이해가 되지 않는다면 코드가 jquery.min.js 파일과 같은 UglifyJS나 Google의 Closure 등의 도구로 컴파일된 것일 수도 있습니다.
당신의 레벨이 너무 낮아서 마스터가 작성한 코드를 당분간 이해할 수 없을 수도 있습니다. 그러면 당신은 힘을 키우기 위해 열심히 노력할 수밖에 없습니다.
포맷 후 함수 위치를 찾을 수 없다면 걱정하지 마십시오. 왜 당황합니까?
지금 바로 콘솔 패널로 돌아가세요.

blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:91을 발견하게 되어 기쁩니다
줄 번호가 91로 변경되었습니다. 이제 이 링크를 클릭하면 해당 형식의 위치로 이동합니다. 정말 편리하지 않나요? .

마지막 질문은 기능을 무효화하도록 수정하는 것입니다. 가장 간단하고, 이전 것보다 훨씬 간단하지만, 조작 방법을 모르시는 분들이 많아서 여기서 설명하겠습니다.
우선 추천 함수가 호출하는 함수가 votePost(cb_entryId,'Digg')라는 것을 알고 있으며, 이는 html에 직접 작성하고 onclick을 통해 바인딩합니다.
그러면 이 함수는 전역 함수이고 어디에서나 호출될 수 있습니다. 그렇다면 이것이 무엇을 의미할까요?
이는 전역 변수처럼 수정할 수 있다는 뜻입니다. 어디에서나 수정할 수 있으므로 전역 함수도 동일해야 합니다.
따라서 이를 빈 함수로 직접 수정할 수 있습니다.
votePost = function () {}; 또는 votePost = $.noop; 둘 다 작동합니다. $.noop은 편의를 위해 jQuery에서 제공하는 빈 함수입니다.

이제 votePost는 빈 기능이므로 추천 버튼을 클릭해도 아무 일도 일어나지 않습니다.
물론, 페이지를 새로고침하면 다시 적용됩니다. 단지 페이지의 변경 사항을 디버깅하는 것일 뿐입니다. 블로그 파크의 소스 코드를 변경하지 않으면 영구적으로 적용하는 것은 불가능합니다.
따라서 디버깅이란 오류의 원인을 찾아 수정한 후 테스트하는 과정을 의미하며, 틀리면 새로 고침하여 다시 수정하므로 실제 파일을 수정할 필요가 없습니다. 복구할 수 없게 만듭니다.

오늘은 여기까지입니다. 실제로 디버깅할 수 있는 직접 전역 함수는 거의 없습니다. 이제 jQuery가 널리 사용되고 다양한 클릭, 켜기 및 기타 이벤트 바인딩으로 인해 소스 코드 위치 지정이 매우 번거로워지기 때문입니다.
다행히 이전에 이 문제를 좀 더 자세히 분석한 기사가 있었습니다. 자세한 내용은 "jQuery 이벤트 소스 코드 위치 지정 문제에 대한 간략한 토론"
을 참조하세요. 다른 프레임워크에 익숙하지 않아서 분석하지는 않았지만 아이디어는 실제로 비슷하고 이벤트 관리 메커니즘이 있을 것입니다.

오늘은 지식 포인트가 많지 않지만 스스로 통합해야 합니다. 그렇지 않으면 즉시 잊어버릴 것입니다.

방과후 연습:
1. votePost 기능이 어떻게 구현되고 추천되는지 분석해 보세요.
2. votePost의 동적 디버깅 및 분석. (중단점 지식과 결합되어야 함)

내일은 중단점과 동적 디버깅에 대해 이야기할 예정입니다. 적절한 주제를 찾지 못해서 그냥 동적 디버깅이 필요한 적절한 것이 있으면 댓글을 남겨주세요. .