이미 UI 구조가 다 만들어진 프로젝트에서 스크립트 작업을 하려는데 웬걸!!
크롬 개발자모드(F12)에서 내가 선언해 놓은 스크립트에 debug가 걸리지 않습니다.
선언해 놓은 스크립트들은 동작하는데 말이죠..
그런데 잘보니 스크립트가 동적으로 불려져서 내가 선언해놓은 스크립트에서 에러를 찾지 않고있습니다. ( ↓ )
동적스크립트로 불려질 수 밖에 없는 구조적인 문제를 해결하지 못하니 옆에계신 선임님과 자수씨의 도움으로 내 원래의 스크립트에서 디버그가 걸리도록 방법을 알아 봤습니다.
방법1 : 클래스를 만들고 해당 클래스가 정의되지 않았을 경우에만 클래스를 불러온다.
### javascript
var Class = {
// javascript
}
this['UI'] = Class;// 또는 this.UI = Class;
if (typeof this['UI'] == 'undefined') {
this['UI'] = Class;
}
예제 소스
### javascript
(function($) {
var Class = {
initComponentOnce: function initComponentOnce() {
$(document).on('loggerOnload','.test', function(){
console.log("initComponentOnce() onload Trigger");
});
},
mailAdminConfig : {
onload: function(){
console.log("mailAdminConfig.onload");
},
getTree : function(){
console.log("mailAdminConfig.getTree");
}
}
}
if (typeof this['testUI'] == 'undefined') {
this['testUI'] = {};
}
this['testUI']['_ma'] = Class;
if (typeof this['testUI']['_ma'] == 'undefined') {
this['testUI']['_ma'] = Class;
}
})(jQuery);
이 방법을 사용 하기 전에 만들어져있던 스크립트가 아래처럼 되어있었습니다.
var abab = {
cdcd : function(){
}
}
var abab = 이 부분을 abab : 으로 바꾸면 UI.abab로 접근이 가능합니다.
기존 메소드들의 접근을 바꾸기 어렵고, 변경작업이 크기 때문에 단지 디버그만 걸고 싶다면 방법2가 빠릅니다!!
방법 2 : 강제로 디버그 걸리게 밑에 한줄 추가한다.
작성한 스크립트파일 맨 밑에 이거 한줄 추가하면 됩니다.
//# sourceURL= 디버그 걸고 싶은 파일명.js
이 내용은 아래 주소를 클릭하면 자세한 내용으로 확인 할 수 있습니다 (영어주의!!)
https://developer.chrome.com/devtools/docs/javascript-debugging