IE 8로 JavaScript를 디버그하는 방법

Question

IE 8로 JavaScript를 어떻게 디버그 할 수 있습니까?

IE 8로 업데이트 한 후 Visual Studio를 사용한 JavaScript Debbuging은 작동하지 않습니다.

Answer 1

오늘 우리는 이제 IE 8에 통합 된 개발자 도구 바 플러그인으로 JavaScript를 디버그 할 수 있음을 발견했습니다.

• 딸깍 하는 소리 ▼ 도구 도구 모음에서 탭의 오른쪽에 있습니다.
• 고르다 개발자 도구. 개발자 도구 대화가 열려야합니다.
• 클릭하십시오 스크립트 대화의 탭.
• 클릭하십시오 디버깅을 시작하십시오 단추.

Professional Browsers의 Debuggers와 유사하게 Watch, Breakpoint, Call Stack 등을 참조하십시오.

문을 사용할 수도 있습니다 debugger; JavaScript 코드에서 중단 점을 설정합니다.

Answer 2

IE8 개발자 도구 모음 디버깅에 대한 자세한 정보를 얻을 수 있습니다. jscript 디버깅 또는 개발자 도구를 사용하여 스크립트 디버깅.

Answer 3

이렇게하면 코드를 밟거나 오류를 중단하는 데 도움이되지 않지만 모든 브라우저에서 프로젝트에 동일한 디버그 콘솔을 얻는 유용한 방법입니다.

myLog = function() {
    if (!myLog._div) { myLog.createDiv(); }

    var logEntry = document.createElement('span');
    for (var i=0; i < arguments.length; i++) {
        logEntry.innerHTML += myLog.toJson(arguments[i]) + '<br />';
    }
    logEntry.innerHTML += '<br />';

    myLog._div.appendChild(logEntry);
}
myLog.createDiv = function() {
    myLog._div = document.body.appendChild(document.createElement('div'));
    var props = {
        position:'absolute', top:'10px', right:'10px', background:'#333', border:'5px solid #333', 
        color: 'white', width: '400px', height: '300px', overflow: 'auto', fontFamily: 'courier new',
        fontSize: '11px', whiteSpace: 'nowrap'
    }
    for (var key in props) { myLog._div.style[key] = props[key]; }
}
myLog.toJSON = function(obj) {
    if (typeof window.uneval == 'function') { return uneval(obj); }
    if (typeof obj == 'object') {
        if (!obj) { return 'null'; }
        var list = [];
        if (obj instanceof Array) {
            for (var i=0;i < obj.length;i++) { list.push(this.toJson(obj[i])); }
            return '[' + list.join(',') + ']';
        } else {
            for (var prop in obj) { list.push('"' + prop + '":' + this.toJson(obj[prop])); }
            return '{' + list.join(',') + '}';
        }
    } else if (typeof obj == 'string') {
        return '"' + obj.replace(/(["'])/g, '\\$1') + '"';
    } else {
        return new String(obj);
    }
}

myLog('log statement');
myLog('logging an object', { name: 'Marcus', likes: 'js' });

이것은 꽤 서둘러 모여서 약간 조잡하지만 그럼에도 불구하고 유용하고 쉽게 개선 할 수 있습니다!

Answer 4

나는 이것을 Marcus Westin의 답장에 댓글로 추가하기를 바랐지만 링크를 찾을 수 없습니다. 더 많은 평판이 필요할까요?

---

어쨌든, 감사합니다.이 코드 스 니펫이 IE의 빠른 디버깅에 유용하다는 것을 알았습니다. 나는 문제를 해결하는 문제를 해결하기 위해 약간의 조정을 만들었고, 자동으로 아래로 스크롤하고 고정 포지셔닝을 사용하여 뷰포트에 나타납니다. 누구나 유용하다고 생각되는 경우 내 버전은 다음과 같습니다.

myLog = function() {

    var _div = null;

    this.toJson = function(obj) {

        if (typeof window.uneval == 'function') { return uneval(obj); }
        if (typeof obj == 'object') {
            if (!obj) { return 'null'; }
            var list = [];
            if (obj instanceof Array) {
                    for (var i=0;i < obj.length;i++) { list.push(this.toJson(obj[i])); }
                    return '[' + list.join(',') + ']';
            } else {
                    for (var prop in obj) { list.push('"' + prop + '":' + this.toJson(obj[prop])); }
                    return '{' + list.join(',') + '}';
            }
        } else if (typeof obj == 'string') {
            return '"' + obj.replace(/(["'])/g, '\\$1') + '"';
        } else {
            return new String(obj);
        }

    };

    this.createDiv = function() {

        myLog._div = document.body.appendChild(document.createElement('div'));

        var props = {
            position:'fixed', top:'10px', right:'10px', background:'#333', border:'5px solid #333', 
            color: 'white', width: '400px', height: '300px', overflow: 'auto', fontFamily: 'courier new',
            fontSize: '11px', whiteSpace: 'nowrap'
        }

        for (var key in props) { myLog._div.style[key] = props[key]; }

    };


    if (!myLog._div) { this.createDiv(); }

    var logEntry = document.createElement('span');

    for (var i=0; i < arguments.length; i++) {
        logEntry.innerHTML += this.toJson(arguments[i]) + '<br />';
    }

    logEntry.innerHTML += '<br />';

    myLog._div.appendChild(logEntry);

    // Scroll automatically to the bottom
    myLog._div.scrollTop = myLog._div.scrollHeight;

}