[컴][웹] closure compiler 로 compiled javascript code 를 debugging 하는 방법

closure library 이용해서 javascript 를 compile 하게 되면, obfuscation 과 함께 minimize 를 해준다. 그런데 이런 것들이 debugging 을 어렵게 한다. 그래서 개인적으로 사용할 일이 있어서 찾아봤더니 ref. 1 에 좋은 내용이 있었다.

source map

source map 을 이용하는 방법이다. 이 source map 의 내용이 무엇인지는 찾아보지 않아서 무슨 내용이 적혀있는지 잘 모르겠다. 그런데 이 녀석을 이용하면, chrome inspector 에서 minimized 된 javascript 를 원상태로 debugging 할 수 있게 된다.


일단 source map 을 이용하기 위해서는 다음 2가지를 알아 보자.

1. source map 만드는 법
2. source map 사용법

source map 만드는 법

ref.1 이나 ref.2 에서 closure compiler 를 이용해서 source map 을 만드는 법을 알 수 있다.

d:\..\ui>java -jar ..\..\..\closure-library\compiler.jar --js onfile.js --create_source_map .\onfile-map --js_output_file  onfile-compiled.js

참고로 여러개의 file 을 하고 싶은 경우가 있을 수 있다. 그럴때는 closurebuilder.py 의

• --output_mode = script 

를 이용하자. 이녀석을 이용하면 여러가지 파일을 하나의 script 로 넣어준다. 이렇게 만들어진 파일을 가지고 source map 과 compiled javascript file 을 만들어 내면 된다.

..\closure-library\closure\bin\build\closurebuilder.py --root=..\closure-library\ --root=.\ --namespace="vips.ui.VipsBox" --output_mode=script > ./%output%

참고로 이 script 로 만든 파일을 그냥 script tag 를 이용해서 사용할 수도 있다. 이 때 goog.provide() 에서 Error 를 발생시킨다. 그래서 아래 처럼 주석처리를 해줘야 한다. 그러면 별 문제없이 사용할 수 있다.

goog.provide = function(name) {
...
  if (!COMPILED) {
    if (goog.isProvided_(name)) {
      //throw Error('Namespace "' + name + '" already declared.');
    }

source map 사용법

사용법은 ref.1 에서 알 수 있다. chrome inspector 에서 사용하는 방법이 나온다. 방법은 간단하다. compiled 된 javascript file 의 맨 끝에 아래 부분을 추가해 주면 된다. 그리고 compiled javascript file 을 사용하면 된다.

//@ sourceMappingURL=/path/to/onfile-map

참고로 source map 과 함께 source map 을 만들 때 사용했던 file 이 있어야 한다. source map file 에 보면

"sources":["vips-ui-onfile.js"], 

이런 식으로 파일을 알려주고 있다.

Reference

1. http://blog.4psa.com/debug-compiled-javascript-code-with-ease/
2. Closure Inspector Guide (DEPRECATED), Closure Library Homepage