{"id":22855066,"url":"https://github.com/deinsoftware/vscode-debug-snippets","last_synced_at":"2025-07-23T19:34:02.890Z","repository":{"id":43440993,"uuid":"510722684","full_name":"deinsoftware/vscode-debug-snippets","owner":"deinsoftware","description":"VS Code debug snippets for JS, TS and CSS","archived":false,"fork":false,"pushed_at":"2025-03-04T20:26:18.000Z","size":253,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-31T00:31:02.274Z","etag":null,"topics":["hacktoberfest","javascript","snippets-collection","typescript","visual-studio-code","vscode","vscode-extension","vscode-extensions"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets","language":"JavaScript","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/deinsoftware.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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,"zenodo":null},"funding":{"github":["deinsoftware"],"custom":["https://paypal.me/equiman/3"]}},"created_at":"2022-07-05T12:16:23.000Z","updated_at":"2025-03-31T10:40:33.000Z","dependencies_parsed_at":"2025-03-04T22:30:31.251Z","dependency_job_id":null,"html_url":"https://github.com/deinsoftware/vscode-debug-snippets","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/deinsoftware/vscode-debug-snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-debug-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-debug-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-debug-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-debug-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deinsoftware","download_url":"https://codeload.github.com/deinsoftware/vscode-debug-snippets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-debug-snippets/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266738345,"owners_count":23976417,"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-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["hacktoberfest","javascript","snippets-collection","typescript","visual-studio-code","vscode","vscode-extension","vscode-extensions"],"created_at":"2024-12-13T07:09:43.842Z","updated_at":"2025-07-23T19:34:02.835Z","avatar_url":"https://github.com/deinsoftware.png","language":"JavaScript","readme":"# Debug Snippets\n\n[![Version](https://img.shields.io/visual-studio-marketplace/v/deinsoftware.debug-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)\n[![Installs](https://img.shields.io/visual-studio-marketplace/i/deinsoftware.debug-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)\n[![Ratings](https://img.shields.io/visual-studio-marketplace/stars/deinsoftware.debug-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)\n[![license](https://img.shields.io/github/license/deinsoftware/vscode-debug-snippets)](LICENSE.md)\n[![Open in VS Code](https://img.shields.io/static/v1?logo=visualstudiocode\u0026label=\u0026message=Open%20in%20Visual%20Studio%20Code\u0026labelColor=2c2c32\u0026color=007acc\u0026logoColor=007acc)](https://open.vscode.dev/deinsoftware/vscode-debug-snippets)\n\n![Debug](https://raw.githubusercontent.com/deinsoftware/vscode-debug-snippets/main/.github/social/preview.png 'Debug Snippets')\n\nThe quick and easy way to debug your code and styles with [VS Code](https://code.visualstudio.com/).\n\n\u003e We also **recommend** installing his complement extensions [Const \u0026 Props Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets) and [Arrow Function Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.arrow-function-snippets)\n\n## Menu\n\n- [Installation](#installation)\n  - [Quick Launch](#quick-launch)\n  - [Extension Manager](#extension-manager)\n  - [Marketplace](#marketplace)\n- [Supported Languages](#supported-languages)\n- [Snippets](#snippets)\n  - [Code](#code)\n  - [Context](#context)\n  - [React](#react)\n  - [Styles](#styles)\n- [Keyboard](#keyboard)\n- [Settings](#settings)\n- [About](#about)\n\n---\n\n## Installation\n\n### Quick Launch\n\nOpen the quick launch with \u003ckbd\u003ectrl\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e (Win/Linux) or \u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e (macOS).\n\nPaste the following command and press `Enter`:\n\n```shell\next install deinsoftware.debug-snippets\n```\n\n### Extension Manager\n\nOpen the extension manager with \u003ckbd\u003ectrl\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eX\u003c/kbd\u003e (Win/Linux) or \u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eX\u003c/kbd\u003e (macOS), search for `Debug Snippets` and click on `[Install]` button.\n\n### Marketplace\n\n[Debug Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Supported Languages\n\n| Language   | Extension |\n| ---------- | --------- |\n| JavaScript | `.js`     |\n| TypeScript | `.ts`     |\n| CSS        | `.css`    |\n| SCSS       | `.scss`   |\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Snippets\n\nBelow is a list of all available snippets and the triggers of each one. The `░` means the `TAB` jump position and `█` the final cursor position.\n\n### Code\n\n| Trigger | Description                                                                                        | Result JS/TS                                                        |\n| ------: | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |\n|  `dbg→` | [debugger](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger)  | `debugger█`                                                           |\n|   `cl→` | [log](https://developer.mozilla.org/en-US/docs/Web/API/Console/log)                                | `console.log(░name)█`                                                 |\n|  `clm→` |   log with message                                                                                 | `console.log('░name:', ░name)█`                                       |\n|  `cld→` |   log with destructuring                                                                           | `console.log({░name})█`                                               |\n|  `clj→` |   log with json                                                                                    | `console.log('░obj:', JSON.stringify(░obj, null, 2))█`                |\n|   `cd→` | [debug](https://developer.mozilla.org/en-US/docs/Web/API/Console/debug)                            | `console.debug(░name)█`                                               |\n|  `cdm→` |   debug with message                                                                               | `console.debug('░name:', ░name)█`                                     |\n|  `cdd→` |   debug with destructuring                                                                         | `console.debug({░name})█`                                             |\n|  `cdj→` |   debug with json                                                                                  | `console.debug('░obj:', JSON.stringify(░obj, null, 2))█`              |\n|   `ci→` | [info](https://developer.mozilla.org/en-US/docs/Web/API/Console/info)                              | `console.info(░name)█`                                                |\n|  `cim→` |   info with message                                                                                | `console.info('░name:', ░name)█`                                      |\n|  `cid→` |   info with destructuring                                                                          | `console.info({░name})`                                               |\n|  `cij→` |   info with json                                                                                   | `console.info('░obj:', JSON.stringify(░obj, null, 2))█`               |\n|   `ce→` | [error](https://developer.mozilla.org/en-US/docs/Web/API/Console/error)                            | `console.error(░name)█`                                               |\n|  `cem→` |   error with message                                                                               | `console.error('░name:', ░name)█`                                     |\n|  `ced→` |   error with destructuring                                                                         | `console.error({░name})█`                                             |\n|  `cej→` |   info with json                                                                                   | `console.error('░obj:', JSON.stringify(░obj, null, 2))█`              |\n|   `cw→` | [warn](https://developer.mozilla.org/en-US/docs/Web/API/Console/warn)                              | `console.warn(░name)█`                                                |\n|  `cwm→` |   warn with message                                                                                | `console.warn('░name:', ░name)█`                                      |\n|  `cwd→` |   warn with destructuring                                                                          | `console.warn({░name}█)`                                              |\n|  `cwj→` |   info with json                                                                                   | `console.warn('░obj:', JSON.stringify(░obj, null, 2))█`               |\n|   `ct→` | [table](https://developer.mozilla.org/en-US/docs/Web/API/Console/table)                            | `console.table(░collection)█`                                         |\n|  `ctd→` |   table with destructuring                                                                         | `console.table({░name})█`                                             |\n|   `ca→` | [assert](https://developer.mozilla.org/en-US/docs/Web/API/Console/assert)                          | `console.assert(░expression, ░name)█`                                 |\n|  `cdr→` | [dir](https://developer.mozilla.org/en-US/docs/Web/API/Console/dir)                                | `console.dir(░name)█`                                                 |\n|  `ctr→` | [trace](https://developer.mozilla.org/en-US/docs/Web/API/Console/trace)                            | `console.trace(░name)█`                                               |\n|   `cc→` | [count](https://developer.mozilla.org/en-US/docs/Web/API/Console/count)                            | `console.count(░label)█`                                              |\n|  `ccr→` | [count reset](https://developer.mozilla.org/en-US/docs/Web/API/Console/countReset)                 | `console.countReset(░label)█`                                         |\n|  `cps→` | [profile start](https://developer.mozilla.org/en-US/docs/Web/API/console/profile)                  | `console.profile()█`                                                  |\n|  `cpe→` | [profile end](https://developer.mozilla.org/en-US/docs/Web/API/console/profileEnd)                 | `console.profileEnd()█`                                               |\n|  `cpw→` | profile wrapper                                                                                    | \u003ccode\u003econsole.profile()\u003cbr/\u003e█\u003cbr/\u003econsole.profileEnd()\u003c/code\u003e         |\n|  `cts→` | [time start](https://developer.mozilla.org/en-US/docs/Web/API/Console/time)                        | `console.time(░label)█`                                               |\n|  `ctl→` | [time log](https://developer.mozilla.org/en-US/docs/Web/API/console/timeLog)                       | `console.timeLog(░label)█`                                            |\n|  `cte→` | [time end](https://developer.mozilla.org/en-US/docs/Web/API/console/timeEnd)                       | `console.timeEnd(░label)█`                                            |\n|  `ctw→` | time wrapper                                                                                       | \u003ccode\u003econsole.time(░label)\u003cbr/\u003e█\u003cbr/\u003econsole.timeEnd(░label)\u003c/code\u003e   |\n|  `cgs→` | [group start](https://developer.mozilla.org/en-US/docs/Web/API/Console/group)                      | `console.group(░label)█`                                              |\n|  `cge→` | [group end](https://developer.mozilla.org/en-US/docs/Web/API/console/groupEnd)                     | `console.groupEnd(░label)█`                                           |\n|  `cgw→` | group wrapper                                                                                      | \u003ccode\u003econsole.group(░label)\u003cbr/\u003e█\u003cbr/\u003econsole.groupEnd(░label)\u003c/code\u003e |\n|  `clr→` | [clear](https://developer.mozilla.org/en-US/docs/Web/API/Console/clear)                            | `console.clear()█`                                                    |\n\n### Context\n\n\u003e [!WARNING]\n\u003e experimental feature available only in Chromium-based browsers (Chrome and Edge).\n\n| Trigger | Description                     | Result JS/TS                                                  |\n| ------: | ------------------------------- | ------------------------------------------------------------- |\n|   `cx→` | context                         | `const ░context = console.context('░label')█`                 |\n\nThe `console.context()` API provides a convenient mechanism for filtering log messages, thereby helping to mitigate the issue of logs from other scripts or packages obscuring relevant information.\n\n| Trigger  | Description                    | Result JS/TS                                                           |\n| -------: | ------------------------------ | ---------------------------------------------------------------------- |\n|   `cxl→` | log                            | `░context.log(░name)█`                                                 |\n|  `cxlm→` |   log with message             | `░context.log('░name:', ░name)█`                                       |\n|  `cxld→` |   log with destructuring       | `░context.log({░name})█`                                               |\n|  `cxlj→` |   log with json                | `░context.log('░obj:', JSON.stringify(░obj, null, 2))█`                |\n|   `cxd→` | debug                          | `░context.debug(░name)█`                                               |\n|  `cxdm→` |   debug with message           | `░context.debug('░name:', ░name)█`                                     |\n|  `cxdd→` |   debug with destructuring     | `░context.debug({░name})█`                                             |\n|  `cxdj→` |   debug with json              | `░context.debug('░obj:', JSON.stringify(░obj, null, 2))█`              |\n|   `cxi→` | info                           | `░context.info(░name)█`                                                |\n|  `cxim→` |   info with message            | `░context.info('░name:', ░name)█`                                      |\n|  `cxid→` |   info with destructuring      | `░context.info({░name})`                                               |\n|  `cxij→` |   info with json               | `░context.info('░obj:', JSON.stringify(░obj, null, 2))█`               |\n|   `cxe→` | error                          | `░context.error(░name)█`                                               |\n|  `cxem→` |   error with message           | `░context.error('░name:', ░name)█`                                     |\n|  `cxed→` |   error with destructuring     | `░context.error({░name})█`                                             |\n|  `cxej→` |   info with json               | `░context.error('░obj:', JSON.stringify(░obj, null, 2))█`              |\n|   `cxw→` | warn                           | `░context.warn(░name)█`                                                |\n|  `cxwm→` |   warn with message            | `░context.warn('░name:', ░name)█`                                      |\n|  `cxwd→` |   warn with destructuring      | `░context.warn({░name}█)`                                              |\n|  `cxwj→` |   info with json               | `░context.warn('░obj:', JSON.stringify(░obj, null, 2))█`               |\n|   `cxt→` | table                          | `░context.table(░collection)█`                                         |\n|  `cxtd→` |   table with destructuring     | `░context.table({░name})█`                                             |\n|   `cxa→` | assert                         | `░context.assert(░expression, ░name)█`                                 |\n|  `cxdr→` | dir                            | `░context.dir(░name)█`                                                 |\n|  `cxtr→` | trace                          | `░context.trace(░name)█`                                               |\n|   `cxc→` | count                          | `░context.count(░label)█`                                              |\n|  `cxcr→` | count reset                    | `░context.countReset(░label)█`                                         |\n|  `cxps→` | profile start                  | `░context.profile()█`                                                  |\n|  `cxpe→` | profile end                    | `░context.profileEnd()█`                                               |\n|  `cxpw→` | profile wrapper                | \u003ccode\u003e░context.profile()\u003cbr/\u003e█\u003cbr/\u003e░context.profileEnd()\u003c/code\u003e         |\n|  `cxts→` | time start                     | `░context.time(░label)█`                                               |\n|  `cxtl→` | time log                       | `░context.timeLog(░label)█`                                            |\n|  `cxte→` | time end                       | `░context.timeEnd(░label)█`                                            |\n|  `cxtw→` | time wrapper                   | \u003ccode\u003e░context.time(░label)\u003cbr/\u003e█\u003cbr/\u003e░context.timeEnd(░label)\u003c/code\u003e   |\n|  `cxgs→` | group start                    | `░context.group(░label)█`                                              |\n|  `cxge→` | group end                      | `░context.groupEnd(░label)█`                                           |\n|  `cxgw→` | group wrapper                  | \u003ccode\u003e░context.group(░label)\u003cbr/\u003e█\u003cbr/\u003e░context.groupEnd(░label)\u003c/code\u003e |\n|  `cxlr→` | clear                          | `░context.clear()█`                                                    |\n\nIn the Developer Tools console of your browser, you can filter logs by typing `context:\u003clabel\u003e`. This allows you to view only the logs associated with the specified label.\n\n### React\n\n| Trigger | Description                     | Result JSX/TSX                                                |\n| ------: | ------------------------------- | ------------------------------------------------------------- |\n|  `ccd→` | console code with destructuring | `\u003cpre\u003e\u003ccode\u003e{JSON.stringify({░name}, null, 2)}\u003c/code\u003e\u003c/pre\u003e█` |\n\n### Styles\n\n| Trigger | Description                     | Result CSS                                                                             |\n| ------: | ------------------------------- | -------------------------------------------------------------------------------------- |\n|   `co→` | outline                         | `outline: 1px solid ░color !important;█`                                               |\n|   `cb→` | background                      | `background: ░color !important;█`                                                      |\n|  `cob→` | outline and background          | \u003ccode\u003eoutline: 1px solid ░color !important;\u003cbr/\u003ebackground: ░color !important;█\u003c/code\u003e |\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Keyboard\n\nRemember to complement the snippets with these keyboard shortcuts that can be used without needing to move the cursor to the start or to the end.\n\n| Action            | Win/Linux          | macOS             |\n| ----------------- | -----------------: | ----------------: |\n| Insert line above | `ctrl+shift+enter` | `cmd+shift+enter` |\n| Insert line below | `ctrl+enter`       | `cmd+enter`       |\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Settings\n\nThe `editor.snippetSuggestions` setting in vscode `settings.json` will show snippets on top of the suggestion list.\n\n```json\n\"editor.snippetSuggestions\": \"top\"\n```\n\n⇧ [Back to menu](#menu)\n\n---\n\n## About\n\n### Built With\n\n- [VS Code](https://code.visualstudio.com/) - Code editing redefined.\n- [Figma](https://www.figma.com/) - The collaborative interface design tool.\n- [SWPM](https://www.npmjs.com/package/swpm) - One Package Manager to command them all.\n\n### Sources\n\n- [MDN Debugger](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger)\n- [MDN Console](https://developer.mozilla.org/en-US/docs/Web/API/console)\n- [Debug CSS with background and outlines](https://codepen.io/kevinpowell/pen/XWZBwWz)\n- [Box Model](https://codepen.io/carolineartz/pen/ogVXZj)\n\n### Contributing\n\nPlease read [CONTRIBUTING](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\n\n### Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [Debug Snippets](https://github.com/deinsoftware/vscode-debug-snippets/tags) on GitHub.\n\n### Authors\n\n- **Camilo Martinez** [[Equiman](http://github.com/equiman)]\n\nSee also the list of [contributors](https://github.com/deinsoftware/vscode-debug-snippets/contributors) who participated in this project.\n\n### Sponsors\n\nIf this project helps you, consider buying me a cup of coffee.\n\n[![GitHub Sponsors](https://img.shields.io/badge/-GitHub%20Sponsors-gray?style=flat\u0026labelColor=171515\u0026logo=github\u0026logoColor=white\u0026link=https://github.com/sponsors/deinsoftware)](https://github.com/sponsors/deinsoftware)\n[![paypal](https://img.shields.io/badge/-PayPal-gray?style=flat\u0026labelColor=00457C\u0026logo=paypal\u0026logoColor=white\u0026link=https://paypal.me/equiman/3)](https://paypal.me/equiman/3)\n\n### License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.\n\n⇧ [Back to menu](#menu)\n","funding_links":["https://github.com/sponsors/deinsoftware","https://paypal.me/equiman/3","https://img.shields.io/badge/-GitHub%20Sponsors-gray?style=flat\u0026labelColor=171515\u0026logo=github\u0026logoColor=white\u0026link=https://github.com/sponsors/deinsoftware","https://img.shields.io/badge/-PayPal-gray?style=flat\u0026labelColor=00457C\u0026logo=paypal\u0026logoColor=white\u0026link=https://paypal.me/equiman/3"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeinsoftware%2Fvscode-debug-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeinsoftware%2Fvscode-debug-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeinsoftware%2Fvscode-debug-snippets/lists"}