Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deinsoftware/vscode-debug-snippets
VS Code debug snippets for JS, TS and CSS
https://github.com/deinsoftware/vscode-debug-snippets
hacktoberfest javascript snippets-collection typescript visual-studio-code vscode vscode-extension vscode-extensions
Last synced: 29 days ago
JSON representation
VS Code debug snippets for JS, TS and CSS
- Host: GitHub
- URL: https://github.com/deinsoftware/vscode-debug-snippets
- Owner: deinsoftware
- License: mit
- Created: 2022-07-05T12:16:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-16T21:47:49.000Z (about 2 months ago)
- Last Synced: 2024-11-16T22:27:54.723Z (about 2 months ago)
- Topics: hacktoberfest, javascript, snippets-collection, typescript, visual-studio-code, vscode, vscode-extension, vscode-extensions
- Language: JavaScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets
- Size: 150 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Debug Snippets
[](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)
[](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)
[](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)
[](LICENSE.md)
[](https://open.vscode.dev/deinsoftware/vscode-debug-snippets)
The quick and easy way to debug your code and styles with [VS Code](https://code.visualstudio.com/).
> We also **recommend** installing his complement extensions [Const & 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)
## Menu
- [Installation](#installation)
- [Quick Launch](#quick-launch)
- [Extension Manager](#extension-manager)
- [Marketplace](#marketplace)
- [Supported Languages](#supported-languages)
- [Snippets](#snippets)
- [Code](#code)
- [Styles](#styles)
- [Keyboard](#keyboard)
- [Settings](#settings)
- [About](#about)
---
## Installation
### Quick Launch
Open the quick launch with ctrl+shift+P (Win/Linux) or cmd+shift+P (macOS).
Paste the following command and press `Enter`:
```shell
ext install deinsoftware.debug-snippets
```
### Extension Manager
Open the extension manager with ctrl+shift+X (Win/Linux) or cmd+shift+X (macOS), search for `Debug Snippets` and click on `[Install]` button.
### Marketplace
[Debug Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)
⇧ [Back to menu](#menu)
---
## Supported Languages
| Language | Extension |
| ---------- | --------- |
| JavaScript | `.js` |
| TypeScript | `.ts` |
| CSS | `.css` |
| SCSS | `.scss` |
⇧ [Back to menu](#menu)
---
## Snippets
Below is a list of all available snippets and the triggers of each one. The `░` means the `TAB` jump position and `█` the final cursor position.
### Code
| Trigger | Description | Result JS/TS |
| ------: | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `dbg→` | [debugger](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) | `debugger█` |
| `cl→` | [log](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) | `console.log(░name)█` |
| `clm→` | log with message | `console.log('░name:', ░name)█` |
| `cld→` | log with destructuring | `console.log({░name})█` |
| `clj→` | log with json | `console.log('░obj:', JSON.stringify(░obj, null, 2))█` |
| `cd→` | [debug](https://developer.mozilla.org/en-US/docs/Web/API/Console/debug) | `console.debug(░name)█` |
| `cdm→` | debug with message | `console.debug('░name:', ░name)█` |
| `cdd→` | debug with destructuring | `console.debug({░name})█` |
| `cdj→` | debug with json | `console.debug('░obj:', JSON.stringify(░obj, null, 2))█` |
| `ci→` | [info](https://developer.mozilla.org/en-US/docs/Web/API/Console/info) | `console.info(░name)█` |
| `cim→` | info with message | `console.info('░name:', ░name)█` |
| `cid→` | info with destructuring | `console.info({░name})` |
| `cij→` | info with json | `console.info('░obj:', JSON.stringify(░obj, null, 2))█` |
| `ce→` | [error](https://developer.mozilla.org/en-US/docs/Web/API/Console/error) | `console.error(░name)█` |
| `cem→` | error with message | `console.error('░name:', ░name)█` |
| `ced→` | error with destructuring | `console.error({░name})█` |
| `cej→` | info with json | `console.error('░obj:', JSON.stringify(░obj, null, 2))█` |
| `cw→` | [warn](https://developer.mozilla.org/en-US/docs/Web/API/Console/warn) | `console.warn(░name)█` |
| `cwm→` | warn with message | `console.warn('░name:', ░name)█` |
| `cwd→` | warn with destructuring | `console.warn({░name}█)` |
| `cwj→` | info with json | `console.warn('░obj:', JSON.stringify(░obj, null, 2))█` |
| `ct→` | [table](https://developer.mozilla.org/en-US/docs/Web/API/Console/table) | `console.table(░collection)█` |
| `ctd→` | table with destructuring | `console.table({░name})█` |
| `ca→` | [assert](https://developer.mozilla.org/en-US/docs/Web/API/Console/assert) | `console.assert(░expression, ░name)█` |
| `cdr→` | [dir](https://developer.mozilla.org/en-US/docs/Web/API/Console/dir) | `console.dir(░name)█` |
| `ctr→` | [trace](https://developer.mozilla.org/en-US/docs/Web/API/Console/trace) | `console.trace(░name)█` |
| `cc→` | [count](https://developer.mozilla.org/en-US/docs/Web/API/Console/count) | `console.count(░label)█` |
| `ccr→` | [count reset](https://developer.mozilla.org/en-US/docs/Web/API/Console/countReset) | `console.countReset(░label)█` |
| `cps→` | [profile start](https://developer.mozilla.org/en-US/docs/Web/API/console/profile) | `console.profile()█` |
| `cpe→` | [profile end](https://developer.mozilla.org/en-US/docs/Web/API/console/profileEnd) | `console.profileEnd()█` |
| `cpw→` | profile wrapper | console.profile()
█
console.profileEnd() |
| `cts→` | [time start](https://developer.mozilla.org/en-US/docs/Web/API/Console/time) | `console.time(░label)█` |
| `ctl→` | [time log](https://developer.mozilla.org/en-US/docs/Web/API/console/timeLog) | `console.timeLog(░label)█` |
| `cte→` | [time end](https://developer.mozilla.org/en-US/docs/Web/API/console/timeEnd) | `console.timeEnd(░label)█` |
| `ctw→` | time wrapper | console.time(░label)
█
console.timeEnd(░label) |
| `cgs→` | [group start](https://developer.mozilla.org/en-US/docs/Web/API/Console/group) | `console.group(░label)█` |
| `cge→` | [group end](https://developer.mozilla.org/en-US/docs/Web/API/console/groupEnd) | `console.groupEnd(░label)█` |
| `cgw→` | group wrapper | console.group(░label)
█
console.groupEnd(░label) |
| `clr→` | [clear](https://developer.mozilla.org/en-US/docs/Web/API/Console/clear) | `console.clear()█` |
### React
| Trigger | Description | Result JSX/TSX |
| ------: | ------------------------------- | ------------------------------------------------------------- |
| `ccd→` | console code with destructuring | `
{JSON.stringify({░name}, null, 2)}
█` |
### Styles
| Trigger | Description | Result CSS |
| ------: | ------------------------------- | -------------------------------------------------------------------------------------- |
| `co→` | outline | `outline: 1px solid ░color !important;█` |
| `cb→` | background | `background: ░color !important;█` |
| `cob→` | outline and background | outline: 1px solid ░color !important;
background: ░color !important;█ |
⇧ [Back to menu](#menu)
---
## Keyboard
Remember 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.
| Action | Win/Linux | macOS |
| ----------------- | -----------------: | ----------------: |
| Insert line above | `ctrl+shift+enter` | `cmd+shift+enter` |
| Insert line below | `ctrl+enter` | `cmd+enter` |
⇧ [Back to menu](#menu)
---
## Settings
The `editor.snippetSuggestions` setting in vscode `settings.json` will show snippets on top of the suggestion list.
```json
"editor.snippetSuggestions": "top"
```
⇧ [Back to menu](#menu)
---
## About
### Built With
- [VS Code](https://code.visualstudio.com/) - Code editing redefined.
- [Figma](https://www.figma.com/) - The collaborative interface design tool.
- [SWPM](https://www.npmjs.com/package/swpm) - One Package Manager to command them all.
### Sources
- [MDN Debugger](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger)
- [MDN Console](https://developer.mozilla.org/en-US/docs/Web/API/console)
- [Debug CSS with background and outlines](https://codepen.io/kevinpowell/pen/XWZBwWz)
- [Box Model](https://codepen.io/carolineartz/pen/ogVXZj)
### Contributing
Please read [CONTRIBUTING](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
### Versioning
We 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.
### Authors
- **Camilo Martinez** [[Equiman](http://github.com/equiman)]
See also the list of [contributors](https://github.com/deinsoftware/vscode-debug-snippets/contributors) who participated in this project.
### Sponsors
If this project helps you, consider buying me a cup of coffee.
[](https://github.com/sponsors/deinsoftware)
[](https://paypal.me/equiman/3)
### License
This project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.
⇧ [Back to menu](#menu)