[VS Code Extension] Debugger for Chrome 사용법

    - Visual Studio Code Extension

    - 자바스크립트 디버깅 툴

https://github.com/Microsoft/vscode-chrome-debug


//======
* Extension 설치
    - View -> Extension
        Debugger for Chrome


//=====
* Extension 설정
    - Debug -> Open Configurations
        - .vscode\launch.json 파일 수정

//=====
{
    "name": "Launch localhost",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost/js/compare.htm",
    "webRoot": "${workspaceFolder}/js/compare.html"
},
{
    "name": "Launch index.html",
    "type": "chrome",
    "request": "launch",
    "file": "${workspaceFolder}/index.html"
},
{
    "name": "Attach Chrome",
    "type": "chrome",
    "request": "attach",
    "port": 9229,
    "url": "http://localhost/js/compare.htm",
    "webRoot": "${workspaceFolder}/js/compare.htm"
},


//==============
* Chrome 설정
    - 크롬 아이콘 우클릭 -> 속성 -> 대상
         --remote-debugging-port=9229  추가
   

* 브레이크 포인트 설정
    - *.js 파일 소스에서 F9

    - 크롬에서 해당 url 로드

//==========
    - 예)
<button type="button" onclick="test1();"> btn1
<script src="debug.js"></script>

    - debug.js 파일
function test1()
{
    var t1=1;   
    t1++;

    t1++;
}