출처 :&nbsp;<a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps?hl=ko" target="_blank" class="tx-link">https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps?hl=ko</a> 웹 개발을 하다보면 $.load 함수를 사용해서 동적으로 페이지를 넣는 경우가 종종있다. 이 때 크롬으로 디버깅 할려면 어떻게 해야하나 고민이었는데,이렇게 하니까 되더라 밑에 //# sourceURL=blah 이부분이 핵심이다.debugger; 라고 적은 부분은 코드상에서 breakpoint를 설정할 수 있도록 해준다. <div class="txc-textbox" style="border-style: solid; border-width: 1px; border-color: rgb(254, 254, 184); background-color: rgb(254, 254, 184); padding: 10px;">&lt;script type="text/javascript" th:inline="javascript"&gt;

&nbsp;&nbsp;&nbsp; /*&lt;![CDATA[*/

&nbsp;

&nbsp;&nbsp;&nbsp; function alram(msg)
{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(msg);&nbsp; &nbsp; &nbsp; &nbsp; debugger;

&nbsp;&nbsp;&nbsp; }

&nbsp;

&nbsp;&nbsp;&nbsp; //#
sourceURL=foo.coffee

&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; /*]]&gt;*/

<img src='/api/file/11EB0D04EE92B3CD97400242AC110002' style = 'max-width:100%;height:auto;' /> 속이 다 시원하네..

크롬에서 동적 로드된 자바스크립트 디버깅 하기 dynamic load javascript