{"id":22031988,"url":"https://github.com/datencia/debugging-with-vscode","last_synced_at":"2025-08-25T14:07:17.114Z","repository":{"id":74663802,"uuid":"71625879","full_name":"datencia/debugging-with-vscode","owner":"datencia","description":"How to debug client side TypeScript applications in VS Code","archived":false,"fork":false,"pushed_at":"2016-10-23T19:19:05.000Z","size":529,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T11:43:21.787Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datencia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-22T08:12:33.000Z","updated_at":"2020-02-20T21:34:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"b891fdce-a348-4cad-a55e-96c0926b9740","html_url":"https://github.com/datencia/debugging-with-vscode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/datencia/debugging-with-vscode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fdebugging-with-vscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fdebugging-with-vscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fdebugging-with-vscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fdebugging-with-vscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datencia","download_url":"https://codeload.github.com/datencia/debugging-with-vscode/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fdebugging-with-vscode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272077690,"owners_count":24869288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-25T02:00:12.092Z","response_time":1107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-30T08:24:49.890Z","updated_at":"2025-08-25T14:07:17.080Z","avatar_url":"https://github.com/datencia.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Debugging with Visual Studio code\n\nIn this guide we'll show how to debug client side TypeScript applications in VS Code.\n\nTo do this, we'll use [Debugger for chrome](https://github.com/Microsoft/vscode-chrome-debug)\na VS Code extension to debug JavaScript code in the Google Chrome browser, or other targets that support the\n[Chrome Debugging Protocol](https://chromedevtools.github.io/debugger-protocol-viewer/).\n\nThe versions we are using at the time of writing this guide are:\n\n* VS Code v1.6.1\n* Debugger for Chrome v2.0.0\n\n## Summary Steps\n\n1. Install `Debugger for chrome` extension.\n2. Configure the extension.\n3. Debug TypeScript code.\n\n## Install\n\nFirst of all, install the [VS Code Debugger for Chrome Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome).\n\nLaunch VS Code, press `Ctrl+P`, paste the following command, and press enter.\n\n```\next install debugger-for-chrome\n```\n\n![Install Extension](./99_readme_resources/install-extension-step1.png \"Install Extension\")\n\n![Install Extension](./99_readme_resources/install-extension-step2.png \"Install Extension\")\n\nAfter that, enable the extension (You will prompted to restart VS Code in order to enable the extension).\n\n![Install Extension](./99_readme_resources/install-extension-step3.png \"Install Extension\")\n\n## Configuring the extension\n\nTo use this extension, you must first open the folder containing the project you want to work on.\n\n\u003e In this guide we are using the sample **\"02 FX / 00 TypeScript\"** from the GitHub project [Webpack 1.x samples](https://github.com/Lemoncode/webpack-1.x-by-sample) by [Lemoncode](http://www.lemoncode.net/).\n\nClick now on the debug icon in the sidebar or press `CTRL+SHIFT+D`.\n\n![Configure Extension Step1](./99_readme_resources/configure-extension-step1.png \"Configure Extension Step1\")\n\nThen click on the gear icon next to the debug button in the upper left and select `Chrome`.\n\n![Configure Extension Step2](./99_readme_resources/configure-extension-step2.png \"Configure Extension Step2\")\n\nThis opens the debug configuration settings (in `.vscode/launch.json`) with de default\nconfiguration settings.\n\n![Configure Extension Step3](./99_readme_resources/configure-extension-step3.png \"Configure Extension Step3\")\n\nThe extension operates in two modes:\n* `launch` - Launch an instance of Chrome and navigate to your app.\n* `attach` - Attach to a running instance of Chrome (with remote debugging enabled).\n\n## Debugging TypeScript code\n\nNow we are ready to debug our TypeScript application.\n\nPick a launch config from the dropdown on the Debug pane in VS Code. Press the play\nbutton or `F5` to start.\n\nThe Chrome browser will start opening our application. You can then set watchers, breakpoints (or disable them), see the call stack, or examine local variables.\n\n![Set breakpoints](./99_readme_resources/debug-insert-breakpoints.png \"Set breakpoints\")\n\n![Set breakpoints](./99_readme_resources/debug-start.png \"Set breakpoints\")\n\n![Set breakpoints](./99_readme_resources/debug-in-action.png \"Set breakpoints\")\n\nYou can step through the code using the debug menu in the top middle of VS Code.\n\n![Menu Options](./99_readme_resources/debug-toolbar.png \"Menu Options\")\n\nor using the following shortcuts keys:\n\n* `F5` continue\n* `F10` step over\n* `F11` step into\n* `SHIFT+F11` step out\n* `CTRL+SHIFT+F5` restart\n* `SHIFT+F5` stop\n\n## Known problems\n\n* If using a `launch` type config, close other running instances of Chrome - if Chrome\n is already running, the extension may not be able to attach, when using launch mode.\n\n* If using an `attach` type config, ensure that you launched Chrome using `--remote-debugging-port=9222`.\nAnd if there was already a running instance.\n\n* For now, Chrome only allows one tool to be attached at a time. If you open Chrome Dev Tools,\n it kills the connection with the extension.\n\n* If you set a breakpoint in code that runs immediately when the page loads, you won't hit that breakpoint until you refresh the page.\n\n* If you change your code, you may need to clear your breakpoints, then attach and then add breakpoints again.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatencia%2Fdebugging-with-vscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatencia%2Fdebugging-with-vscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatencia%2Fdebugging-with-vscode/lists"}