- 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++;
}

반응형

'Code > Web' 카테고리의 다른 글

Microsoft CDN  (0) 2019.03.08
[AWS] EBS 디스크 용량 늘리기  (0) 2019.02.24
[VS Code Extension] Debugger for Chrome 사용법  (0) 2019.02.16
Git 서비스 사이트 비교  (0) 2019.02.16
HTTP 상태 코드  (0) 2019.02.12
bootstrap.css 없이 glyphicons 아이콘 사용하기  (0) 2019.02.11
Posted by codens codens

댓글을 달아 주세요