Debugging JavaScript Tanpa Server di Chrome Dengan VS Code

Umumnya kalau mau debug JavaScript app harus melalui localhost dan siapin server, ya.. setidaknya buat nge-load file html nya. Tapi bagaimana kalau project-nya sederhana yang isinya hanya index.html & file2 JS dan tidak membutuhkan server?

Caranya ternyata mudah. Tinggal tambahkan script di file launch.json-nya VS Code seperti di bawah ini:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch index.html",
    "file": "${workspaceFolder}/index.html",
    "runtimeArgs": [
        "--disable-web-security",
        "--user-data-dir=C:\\ChromeDev"
    ],
    "preLaunchTask": "npm: clean-chrome"
}

Nah gimana kalau mau jalankan chrome tapi butuh argument khusus? Gampang juga kok ternyata, tinggal tambahin aja di option “runtimeArgs”. Jadinya seperti di bawah ini:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch index.html",
    "file": "${workspaceFolder}/index.html",
    "runtimeArgs": [
        "--disable-web-security",
        "--user-data-dir=C:\\ChromeDev"
    }
}

Terus bagaimana kalau butuh menjalankan sebuah task script npm dahulu sebelum menjalankan debugger? Tinggal ditambahkan aja option “preLaunchTask”, yang jadinya kurang lebih seperti ini:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch index.html",
    "file": "${workspaceFolder}/index.html",
    "runtimeArgs": [
        "--disable-web-security",
        "--user-data-dir=C:\\ChromeDev"
    ],
    "preLaunchTask": "npm: clean"
}

Sebagai tambahan, biar ga capek2 launch terus apalagi kalau app sudah jalan, bisa dimasukin config untuk attach alias ‘dicantolkan’ ke chrome yang berjalan.

{
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Chrome",
    "port": 9222,
    "webRoot": "${workspaceFolder}"
}

Jangan lupa, kalau chrome dijalankan tidak dari launch debugger harus diberikan argument port debug biar bisa nyambung dengan debugger VS Code.

chrome.exe --remote-debugging-port=9222

Untuk contoh project lengkapnya bisa dilihat di repo: https://github.com/mdedirudianto/chrome-vscode-debug