내 JavaScript 코드를 어떻게 디버깅 할 수 있습니까? [닫은]
답변:
Firebug 는 이러한 목적으로 가장 많이 사용되는 도구 중 하나입니다.
모든 최신 브라우저에는 기본 제공 JavaScript 디버깅 응용 프로그램의 일부 형식이 함께 제공됩니다. 이에 대한 자세한 내용은 관련 기술 웹 페이지에서 다룹니다. JavaScript 디버깅에 대한 개인적 선호 는 Firefox의 Firebug 입니다. 나는 Firebug가 다른 어떤 것보다 낫다고 말하는 것이 아닙니다. 그것은 당신의 개인적인 선호도에 달려 있으며 어쨌든 모든 브라우저에서 당신의 사이트를 테스트해야 할 것입니다. (개인적으로 가장 먼저 선택하는 것은 항상 Firebug입니다).
Firebug를 예로 들어 아래에서 몇 가지 고급 솔루션을 다룰 것입니다 .
Firefox
Firefox에는 자체 내장 된 JavaScript 디버깅 도구가 함께 제공되지만 Firebug 애드온을 설치하는 것이 좋습니다 . 이것은 편리한 기본 버전을 기반으로 몇 가지 추가 기능을 제공합니다. 여기서는 Firebug에 대해서만 이야기하겠습니다.
Firebug가 설치되면 아래와 같이 액세스 할 수 있습니다.
먼저 요소를 마우스 오른쪽 버튼으로 클릭하면 Firebug로 요소를 검사 할 수 있습니다 .
이것을 클릭하면 브라우저 하단에 Firebug 창이 열립니다 :
Firebug는 여러 기능을 제공하지만 우리가 관심을 갖는 것은 스크립트 탭입니다. 스크립트 탭을 클릭하면 다음 창이 열립니다.
분명히 디버깅하려면 reload 를 클릭해야합니다 .
이제 중단 점 을 추가하려는 JavaScript 코드의 왼쪽에있는 줄을 클릭하여 중단 점 을 추가 할 수 있습니다 .
중단 점에 도달하면 다음과 같이 표시됩니다.
감시 변수를 추가 하고 일반적으로 최신 디버깅 도구에서 기대하는 모든 작업을 수행 할 수도 있습니다 .
Firebug에서 제공하는 다양한 옵션에 대한 자세한 내용은 Firebug FAQ를 확인하십시오 .
크롬
Chrome에는 또한 자체적으로 내장 된 자바 스크립트 디버깅 옵션이 있으며 이는 매우 유사한 방식으로 작동하며 오른쪽 클릭, 요소 검사 등 입니다. Chrome 개발자 도구를 살펴보세요 . 일반적으로 Chrome에서 Firebug보다 스택 추적 이 더 좋습니다.
인터넷 익스플로러
.NET 에서 개발하고 웹 개발 환경을 사용하여 Visual Studio를 사용하는 경우 중단 점 등을 배치하여 JavaScript 코드를 직접 디버깅 할 수 있습니다. JavaScript 코드는 C # 또는 VB.NET 코드를 디버깅하는 것과 똑같이 보입니다 .
이 기능이없는 경우 Internet Explorer는 위에 표시된 모든 도구도 제공합니다. 성가 시게도 오른쪽 클릭 으로 Chrome 또는 Firefox의 요소 기능을 검사 하는 대신 F12 키 를 눌러 개발자 도구에 액세스 할 수 있습니다 . 이 질문 은 대부분의 요점을 다룹니다.
- Internet Explorer 8 (개발자 도구- F12). 다른 것은 Internet Explorer 땅에서 두 번째 비율입니다.
- Firefox 및 Firebug . F12표시하려면 누르십시오 .
- Safari (메뉴 표시 줄, 환경 설정 -> 고급 -> 개발 메뉴 표시 줄 표시)
- Google Chrome JavaScript 콘솔 ( F12또는 ( Ctrl+ Shift+ J)). 대부분 Safari와 동일한 브라우저이지만 Safari가 더 나은 IMHO입니다.
- Opera ( 도구 -> 고급 -> 개발자 도구 )
JavaScript 코드를 디버깅하기 위한 디버거 키워드가 JavaScript에 있습니다. 디버거를 넣으십시오 . JavaScript 코드의 스 니펫. 이 시점에서 JavaScript 코드 디버깅이 자동으로 시작됩니다.
예를 들면 :
이것이 test.js 파일 이라고 가정 하십시오.
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();
- 브라우저가 디버거가 활성화 된 개발자 옵션에서 웹 페이지를 실행하면 자동으로 디버거 에서 디버깅을 시작합니다 . 포인트.
- 브라우저에서 개발자 창을 열어야합니다.
나는 오래된 좋은 printf접근법 (언제든지 잘 작동 할 고대 기술)을 사용합니다.
마술을 보아라 %o.
console.log("this is %o, event is %o, host is %s", this, e, location.host);%oJS 객체의 클릭 가능하고 딥 브라우징 가능하고 예쁘게 인쇄 된 내용을 덤프 합니다. %s기록 용으로 만 표시되었습니다.
이:
console.log("%s", new Error().stack);new Error()호출 지점에 대한 Java와 유사한 스택 추적을 제공합니다 ( 파일 경로 및 줄 번호 포함 !!).
모두 %o와 new Error().stack크롬과 파이어 폭스에서 사용할 수 있습니다.
이러한 강력한 도구를 사용하여 JS에서 무엇이 잘못되었는지 가정하고 디버그 출력을 입력하고 ( if데이터 양을 줄이기 위해 명령문을 감싸는 것을 잊지 마십시오 ) 가정을 확인하십시오. 문제를 수정하거나 새로운 가정을하거나 더 많은 디버그 출력을 비트 문제에 추가합니다.
스택 추적에도 다음을 사용하십시오.
console.trace();콘솔 이라고 말하면
해피 해킹!
Firebug 및 IE Debugger로 시작하십시오.
하지만 JavaScript의 디버거에주의하십시오. 때때로 그들은 디버그하려는 오류 중 일부를 일으킬 정도로 환경에 영향을 미칩니다.
예 :
Internet Explorer의 경우 일반적으로 점진적인 속도 저하이며 일종의 메모리 누수 유형 거래입니다. 30 분 정도 후에 다시 시작해야합니다. 상당히 규칙적인 것 같습니다.
Firebug의 경우 아마도 1 년이 넘었을 것이므로 이전 버전 일 수 있습니다. 결과적으로 세부 사항을 기억하지 못했지만 기본적으로 코드가 올바르게 실행되지 않았고 잠시 디버깅을 시도한 후 Firebug를 비활성화하고 코드가 제대로 작동했습니다.
alert(msg);"나는 단지 무슨 일이 일어나고 있는지 알고 싶다"시나리오에서 작동 하지만 ... 모든 개발자는 당신이 빠져 나갈 수없는 (매우 크거나 끝없는) 루프에 빠지게되는 경우에 직면했습니다.
개발 중에 매우 직접적으로 디버그 옵션을 원할 경우 문제를 해결할 수있는 디버그 옵션을 사용하는 것이 좋습니다. (PS Opera, Safari? 및 Chrome? 모두 기본 대화 상자에서이 기능을 사용할 수 있습니다.)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}위의 내용을 사용하면 Enter/를 누르면 Ok각 메시지를 건너 뛸 수 있지만 Escape/를 누르면 Cancel멋지게 나눌 수있는 팝업 디버깅의 큰 루프에 들어갈 수 있습니다.
Fiddler , Firebug 및 Visual Studio와 같은 몇 가지 도구를 사용합니다 . Internet Explorer 8에 좋은 기본 제공 디버거가 있다고 들었습니다.
Internet Explorer 8이 나올 때까지 Firebug 를 사용 했습니다. 나는 Internet Explorer의 열렬한 팬은 아니지만 정말 멋진 디버거가 포함 된 내장 된 개발자 도구에 시간을 보낸 후 다른 것을 사용하는 것은 무의미 해 보입니다. 나는 마이크로 소프트에게 내 모자를 기울여야한다. 그들은이 도구에 대해 환상적인 일을했다.
YUI Logger를 확인할 수도 있습니다 . HTML에 몇 개의 태그를 포함하기 만하면됩니다. 그것은 다소 필수적인 Firebug에 대한 유용한 추가입니다.
Firebug 및 브라우저 네이티브 개발자 확장 외에도 JetBrains WebStorm IDE에는 Firefox 및 Chrome (확장 필요)에 대한 원격 디버그 지원이 내장되어 있습니다.
또한 다음을 지원합니다.
무료로 테스트 할 수있는 옵션은 30 개 평가판 또는 Early Access 버전을 사용하는 것 입니다.
Visual Studio를 사용하는 경우 debugger;디버깅하려는 코드 위에 놓기 만하면 됩니다. 실행하는 동안 컨트롤은 해당 위치에서 일시 중지되며 여기에서 단계별로 디버그 할 수 있습니다.
대부분의 답변과 마찬가지로 실제로는 다음과 같은 사항에 따라 다릅니다. 디버깅으로 무엇을 달성하려고합니까? 기본 개발, 성능 문제 수정? 기본 개발의 경우 이전의 모든 답변이 충분합니다.
특히 성능 테스트를 위해 Firebug를 권장합니다. 시간 측면에서 가장 비용이 많이 드는 방법을 프로파일 링 할 수 있다는 것은 내가 작업 한 여러 프로젝트에서 매우 중요했습니다. 클라이언트 측 라이브러리가 점점 더 강력 해지고 일반적으로 클라이언트 측에 더 많은 책임이 부여됨에 따라 이러한 유형의 디버깅 및 프로파일 링은 더욱 유용해질 것입니다.
Firebug 콘솔 API : http://getfirebug.com/console.html
누르면F12 웹 개발자를 신속하게 브라우저를 떠나지 않고 자바 스크립트 코드를 디버깅 할 수 있습니다. 모든 Windows 설치에 내장되어 있습니다.
에서 인터넷 익스플로러 11 , F12 도구 등의 중단 점, 시계와 지역 변수보기, 메시지 및 즉시 코드 실행을위한 콘솔로 디버깅 도구를 제공합니다.