출처 : https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps?hl=ko
웹 개발을 하다보면 $.load 함수를 사용해서 동적으로 페이지를 넣는 경우가 종종있다.
이 때 크롬으로 디버깅 할려면 어떻게 해야하나 고민이었는데,
이렇게 하니까 되더라
밑에 //# sourceURL=blah 이부분이 핵심이다.
debugger; 라고 적은 부분은 코드상에서 breakpoint를 설정할 수 있도록 해준다.
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
function alram(msg) {
alert(msg);
debugger;
}
//# sourceURL=foo.coffee
/*]]>*/
</script>
이렇게 하고 디버깅툴을 띄우면 다음 화면에서 처럼 확인이 가능하다.
속이 다 시원하네..
