자바스크립트 스크립트 디버깅 경험_javascript 스킬

JavaScript 프로그래밍에 대해 더 많이 배우면서 JavaScript가 제공하는 불투명한 오류 메시지를 이해하기 시작할 것입니다. 흔히 저지르는 실수를 이해하고 나면 이를 방지하는 방법을 빨리 알 수 있으므로 오류가 점점 더 적은 코드를 작성할 수 있습니다.

프로그래밍은 실제로 시간이 지남에 따라 계속해서 빠르게 발전하는 기술입니다. 그러나 아무리 능숙해지더라도 여전히 코드를 디버깅하는 데 시간을 투자해야 합니다. 숙제를 해본 적이 있거나 JavaScript로 프로그래밍한 경험이 있다면 디버깅에 상당한 시간이 소요된다는 것을 알 수 있습니다. 이는 정상적인 현상입니다. 이는 프로그래머가 해야 할 일 중 하나일 뿐입니다. 실제로 수많은 연구에 따르면 프로그래머는 코드의 버그를 해결하는 데 평균 50%의 시간을 소비합니다.
핵심은 프로그램을 효과적으로 디버그하는 방법을 배우는 것입니다. 프로그램이 제대로 실행되지 않는 이유를 파악하는 데 도움이 되거나 애초에 버그가 있는 코드 작성을 방지하는 데 도움이 되는 몇 가지 팁이 있습니다.
1. 다양한 방법으로 변수를 인쇄합니다
2. 보기 흔한 실수를 조심하세요
　3. 코딩하기 전에 생각하세요
　--------- ----- ----------------
JavaScript가 실수를 포착하지 못하는 경우 코드를 살펴봐도 오류를 찾을 수 없으며 때로는 변수를 인쇄하는 것이 도움이 될 수 있습니다. 가장 간단한 방법은 다음과 같이 경고()를 사용하는 것입니다.
// theGreeting은 getName을 사용하여 이름을 가져온 다음
// 이름이 무엇인지에 따라 하나 또는 두 개의 경고 상자를 표시합니다.
// 함수 getName ()
　{
　 var first_name = 프롬프트("이름이 무엇입니까?","")
　 var last_name = 프롬프트("성이 무엇입니까?",""); the_name = first_name " " last_name;
　 Alert("in getName, the_name은 " the_name); ------------ ----------오류 발견------------- --------------- ------------
1. 일반적인 프로그램 오류
대부분의 오류는 지루한 구문 오류입니다. 이러한 따옴표, 중괄호 및 괄호를 닫는 것을 기억하는 데는 시간이 오래 걸릴 수 있지만 다행히 JavaScript의 자동 오류 감지기는 이러한 오류의 대부분을 포착합니다. 브라우저가 더욱 정교해짐에 따라 JavaScript 오류 감지기가 계속해서 개선되고 있지만 일부 오류는 여전히 빠져나갈 수 있습니다. 주의해야 할 몇 가지 일반적인 실수는 다음과 같습니다.
2. 혼란스러운 변수 또는 함수 이름
변수 및 함수 이름을 대문자 및 복수형으로 사용하여 발생하는 오류는 짜증나게 자주 나타나며 때로는 JavaScript 오류 감지기가 이를 포착하지 못하는 경우도 있습니다. 변수와 함수에 대한 명명 규칙을 확립하고 고수함으로써 이러한 골칫거리를 크게 줄일 수 있습니다. 예를 들어 변수를 모두 소문자로 정의하고, 공백을 밑줄로 바꾸고(my_variable, the_data, an_example_variable), 함수에 내장 기호를 사용합니다(addThreeNumbers(), writeError() 등). 나는 해당 변수가 복수형인지 아닌지를 항상 잊어버리기 때문에 복수형 사용을 피합니다.
3. 실수로 예약어를 사용한 경우
일부 단어는 이미 JavaScript에서 사용하고 있기 때문에 변수 이름으로 사용할 수 없습니다. 예를 들어 "if"라는 변수는 실제로 JavaScript의 일부이기 때문에 정의할 수 없습니다. "if"를 사용하면 모든 종류의 문제에 직면하게 됩니다. "if"라는 이름의 변수에 열중할 때 "document"라는 이름의 변수를 사용하고 싶은 유혹이 듭니다. 불행히도 "문서"는 JavaScript 개체입니다. 자주 발생하는 또 다른 문제는 변수 이름을 "name"으로 지정하는 것입니다(양식 요소에는 "names" 속성이 있음). 변수 이름을 "name"으로 지정한다고 해서 항상 문제가 발생하는 것은 아닙니다. 단지 가끔(그리고 더 혼란스러울 수도 있음) "name" 변수를 사용하지 말아야 하는 이유입니다.
안타깝게도 브라우저마다 예약어가 다르기 때문에 어떤 단어를 피해야 할지 알 수 있는 방법이 없습니다. 가장 안전한 방법은 이미 JavaScript의 일부이고 HTML에서 사용되는 단어를 사용하지 않는 것입니다. 변수에 문제가 있고 무엇이 잘못되었는지 알 수 없는 경우 변수 이름을 변경해 보세요. 성공했다면 예약어를 피했을 수도 있습니다.
4. 논리적 판단을 내릴 때 두 개의 등호를 사용하는 것을 잊지 마세요.
일부 브라우저에서는 이 오류를 포착할 수 있지만 일부 브라우저에서는 포착하지 못합니다. 이는 매우 흔한 실수이지만, 브라우저가 이를 지적하지 못하면 발견하기 어렵습니다. 다음은 이 오류의 예입니다.
　var the_name = 프롬프트("이름이 무엇입니까?", "")
　if (the_name = "the Monkey")
　{
　alert(" hello Monkey!");
　} else {
Alert("hello stranger.");
　}
이 코드는 현재 위치에 관계없이 "hello Monkey!" 경고 대화 상자를 생성합니다. 프롬프트 What's knocking - 이것은 우리가 원하는 것이 아닙니다. 그 이유는 if-then 문에 등호가 하나만 있기 때문입니다. 이는 JavaScript에게 한 항목이 다른 항목과 동일해지기를 원한다는 것을 알려줍니다. 프롬프트에 "로봇 로비"를 입력했다고 가정해 보겠습니다. 처음에 변수 the_name의 값은 "로봇 로봇 로비"이지만 if 문은 the_name을 "원숭이"로 설정하려고 JavaScript에 알립니다. 따라서 JavaScript는 명령을 실행하고 if-then 문에 "true" 메시지를 보내어 매번 "hello Monkey!"를 표시하는 경고 대화 상자를 표시합니다. 이 교활한 실수는 당신을 미치게 만들 수 있으므로 두 개의 등호를 조심해서 사용하십시오.
5. 실수로 변수를 인용했거나 문자열을 인용하는 것을 잊었습니다
나는 때때로이 문제에 직면합니다. JavaScript가 변수와 문자열을 구별하는 유일한 방법은 문자열에는 따옴표가 있고 변수에는 따옴표가 없다는 것입니다. 아래에는 명백한 오류가 있습니다.
var the_name = 'koko the gorilla';
Alert("the_name은 매우 행복합니다.")

the_name은 변수이지만 프로그램은 "the_name님이 매우 행복합니다."라는 경고 대화 상자가 나타납니다. 이는 JavaScript가 따옴표로 묶인 내용을 보면 더 이상 고려하지 않기 때문입니다. 따라서 the_name을 따옴표로 묶으면 JavaScript가 메모리에서 해당 항목을 찾는 것을 방지할 수 있습니다. 다음은 이러한 유형의 오류에 대한 덜 명확한 확장입니다.
Function wakeMeIn3()
{
var the_message = "Wake up! Hey! Hey! WAKE UP!!!!"; Alert(the_message);", 3000);
　}
　여기서 문제는 JavaScript에 3초 후에 Alert(the_message)를 실행하도록 지시한다는 것입니다. 그러나 3초 후에는 함수를 종료했기 때문에 the_message가 더 이상 존재하지 않습니다. 이 문제는 다음과 같이 해결할 수 있습니다:
function wakeMeIn3()
{
var the_message = "Wake up!"
setTimeout("alert('" the_message "');", 3000) ;
　}
the_message를 따옴표 밖에 넣으면 "alert('Wakeup!');" 명령이 setTimeout에 의해 예약되며 원하는 결과를 얻을 수 있습니다. 이는 코드에 문제를 일으킬 수 있는 디버깅하기 어려운 버그 중 일부일 뿐입니다. 일단 발견되면 이를 교정할 수 있는 더 좋은 방법과 더 나쁜 방법이 있습니다. 당신은 내 경험과 실수로부터 이익을 얻을 수 있기 때문에 운이 좋습니다.
　------오류 지우기------------- ----------
오류를 찾는 것은 때로 어렵기는 하지만 첫 번째 단계일 뿐입니다. 그런 다음 오류를 지워야 합니다. 오류를 지울 때 수행해야 할 작업은 다음과 같습니다.

먼저 프로그램 사본을 만드세요.
일부 오류는 지우기가 어렵습니다. 사실, 때로는 버그를 제거할 때 전체 프로그램이 중단되는 경우가 있습니다. 작은 버그 하나가 당신을 미치게 만듭니다. 디버그를 시작하기 전에 프로그램을 저장하는 것이 버그가 사용자를 이용하지 않도록 하는 가장 좋은 방법입니다.
한 번에 하나씩 오류 수정
오류가 여러 개 있다는 것을 안다면 하나를 수정하고 결과를 확인한 후 다음 작업을 시작해야 합니다. 작업을 확인하지 않고 한 번에 많은 오류를 수정하면 더 많은 오류가 발생할 뿐입니다.
혼동되는 오류에 주의하세요
오류가 있다는 것을 알지만 실제로 그 이유를 모르는 경우가 있습니다. 어떤 이유로 "index"라는 변수가 있다고 가정해 보겠습니다. "index"는 항상 예상보다 1이 적습니다. 두 가지 중 하나를 수행할 수 있습니다. 잠시 동안 앉아서 크기가 작아진 이유를 알아내거나 "인덱스"를 사용하기 전에 1을 더하고 계속 진행하세요. 후자의 접근 방식을 난독화 프로그래밍이라고 합니다. 테이프에 붕대를 감고 있는 동안 "도대체 왜 인덱스 3이 아닌 2가 있지? 음... 지금 작동하도록 만들고 나중에 수정하겠습니다."라고 생각하기 시작합니다.
난독화된 프로그래밍은 단기적으로는 작동할 수 있지만 장기적으로는 파멸을 볼 수 있습니다. 실제로 버그를 정리할 수 있을 정도로 코드를 완전히 이해하지 못하면 해당 버그가 다시 나타나 여러분을 괴롭힐 것입니다. . 그것은 여러분이 고칠 수 없는 또 다른 이상한 버그로 나타나거나, 다음 불쌍한 영혼이 여러분의 코드를 읽을 때 이해하기가 극도로 어렵다는 것을 알게 될 것입니다.
작은 버그 찾기
때로는 코드를 잘라내어 붙여넣는 기능이 프로그래머에게 좋지 않은 경우가 있습니다. 일반적으로 함수에 일부 JavaScript 코드를 작성한 다음 이를 잘라내어 다른 함수에 붙여넣습니다. 첫 번째 기능에 문제가 있었다면 이제는 두 기능 모두에 문제가 있는 것입니다. 코드를 잘라내어 붙여넣으면 안 된다는 말은 아닙니다. 하지만 버그에는 증식하는 방식이 있으므로 하나의 버그를 발견하면 그와 유사한 다른 버그를 찾아야 합니다. (또는 여러 버전을 만들기 전에 무엇을 기대해야 하는지 정확히 알아두십시오.) JavaScript 코드에서 변수 이름 철자 오류가 여러 번 발생합니다. 한 곳에서 teh_name 대신 the_name 철자를 잘못 입력하면 다른 곳에서 찾을 가능성이 있습니다. . 실수.
다른 모든 방법이 실패하는 경우
거기 앉아 오류를 바라보고 무슨 일이 일어나고 있는지 알 수 없는 경우(또는 오류가 전혀 표시되지 않지만 프로그램이 오류가 있다는 것을 알고 있음) 제대로 실행되지 않음), 컴퓨터에서 멀리 떨어져 있는 것이 좋습니다. 가서 책을 읽고, 모퉁이를 산책하거나, 맛있는 음료를 마시십시오. 무엇이든 하십시오. 그러나 프로그램이나 문제에 대해 생각하지 마십시오. 이 기술은 어떤 상황에서는 "양조"라고 불리며 매우 효과적입니다. 잠시 휴식을 취한 후 다시 실수를 찾아보세요. 더욱 선명한 사진을 얻으실 수 있습니다. 양조는 정신적 혼란에서 벗어나기 때문에 효과가 있습니다. 잘못된 길로 너무 멀리 가면 돌이킬 수 없는 경우가 있습니다. 이 경우 새 경로를 만드는 것이 가장 좋습니다. 이것이 화나는 일이라는 것을 알지만 효과가 있습니다. 진짜!
위의 방법이 성공하지 못할 경우...
다른 사람들에게 도움을 요청하세요. 때때로 당신의 생각은 고정관념이 되며, 그것을 다르게 바라보아야만 문제에 대한 통찰력을 얻을 수 있습니다. 구조화된 프로그래밍 환경에서 프로그래머는 정기적으로 서로의 코드를 검토합니다. 이를 적절하게 "코드 검토"라고 하며 오류를 제거하는 데 도움이 될 뿐만 아니라 더 나은 코드를 만드는 데에도 도움이 됩니다. 다른 사람에게 JavaScript 코드를 보여주는 것을 두려워하지 마십시오. 그러면 더 나은 JavaScript 프로그래머가 될 것입니다.
　
　 하지만 오류를 제거하는 가장 좋은 방법은...
　 우선 오류 없는 코드를 작성하세요.
　------오류 없는 코드 만들기------------ ---------------
프로그래밍을 잘하는 비결은 프로그램이 컴퓨터를 위한 것이 아니라 사람을 위해 작성되었다는 것입니다. 다른 사람이 귀하의 JavaScript를 읽을 수 있다는 것을 이해할 수 있다면 더 깔끔한 코드를 작성할 수 있습니다. 코드가 명확할수록 실수할 가능성이 줄어듭니다. 영리한 코드는 아름답지만 버그를 만드는 것은 이 영리한 코드입니다. 가장 좋은 경험 법칙은 Keep It Simple, Sweetie의 약자인 KISS입니다. 또 다른 유용한 기술은 코드를 작성하기 전에 주석을 달는 것입니다. 이는 행동하기 전에 생각하게 만듭니다. 댓글이 작성되면 그 아래에 코드를 작성할 수 있습니다.
다음은 이런 방식으로 함수를 작성하는 예입니다.
1단계: 주석 작성
2단계: 코드 채우기
주석을 먼저 작성하는 전략은 주석을 먼저 작성하도록 강요하는 것이 아닙니다. 코드 작성 생각하고 코딩 프로세스를 더 쉽게 만듭니다. 작업을 작고 코딩하기 쉬운 조각으로 나누면 문제가 에베레스트 산이 아니라 기분 좋게 구불구불한 언덕처럼 보일 것입니다.
마지막으로... 항상 각 문장을 세미콜론으로 끝내세요.
꼭 필요한 것은 아니지만, 해당 줄 뒤에 코드가 발생하지 않도록 각 문을 세미콜론으로 끝내는 습관을 들여야 합니다. 세미콜론을 잊어버리면 다음 좋은 코드 줄에서 갑자기 오류가 발생합니다. 더 나은 이유가 없는 한 변수를 "var"로 초기화하십시오. 변수를 지역화하기 위해 "var"를 사용하면 한 함수를 관련되지 않은 다른 함수와 혼동할 가능성이 줄어듭니다.
자, 이제 코딩 방법을 알았으니
JavaScript를 빠르게 실행하는 방법을 배워 보겠습니다. >>
　------------------------------- ----- ---
속도에 따라 JavaScript 코드 최적화
1. 루프 내 작업 부하 제한
2. if- 사용자 정의 then-else 문을 가능성이 가장 낮은 시퀀스
3. 반복 표현 최소화