- 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
AWS EC2 인스턴스에 MySql 설치  (0) 2019.02.13
HTTP 상태 코드  (0) 2019.02.12
Posted by 코덴스

댓글을 달아 주세요