Chrome 브라우저에서 JavaScript 파일 디버깅

Google Chrome developer tools 를 이용하여 js - javascript 파일을 디버깅하자. 

방법1) html 파일을 생성하고, 분석 대상 js 파일을 로드하게 한 다음 디버깅하기

 

방법2) Sources 탭 Snippets 에 코드 내용을 추가하고 디버깅하기

F8로 Resume 하고, 실시간으로 Scope와 Call Stack 내용 확인한다. 혹은 코드에 debugger; 코드를 추가하여 breakpoint 를 설정할 수 있다. Run (Control + Enter) 실행하면 BreakPoint에 걸린다. 

var _0x4506 = ['log', 'Hello\x20World!']; 
(function(_0x2b6f80, _0x495e5f) { 
    var _0x25032d = function(_0x45c759) { 
        while (--_0x45c759) { 
            _0x2b6f80['push'](_0x2b6f80['shift']()); 
        } 
    }; 
    _0x25032d(++_0x495e5f); 
}(_0x4506, 0xe8)); 
var _0x5b32 = function(_0x35d301, _0x3f03be) { 
    _0x35d301 = _0x35d301 - 0x0; 
    var _0x340e5e = _0x4506[_0x35d301]; 
    debugger; 
    return _0x340e5e; 
}; 
function hi() { 
    console[_0x5b32('0x0')](_0x5b32('0x1')); 
} 
hi();