Debug Snippets
The quick and easy way to debug your code and styles with VS Code.
We also recommend installing his complement extensions Const & Props Snippets and Arrow Function Snippets
Menu
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
:
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
Supported Languages
Language | Extension |
---|---|
JavaScript | .js |
TypeScript | .ts |
CSS | .css |
SCSS | .scss |
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 | debugger█ |
cl→ |
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 | 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 | 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 | 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 | 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 | console.table(░collection)█ |
ctd→ |
table with destructuring | console.table({░name})█ |
ca→ |
assert | console.assert(░expression, ░name)█ |
cdr→ |
dir | console.dir(░name)█ |
ctr→ |
trace | console.trace(░name)█ |
cc→ |
count | console.count(░label)█ |
ccr→ |
count reset | console.countReset(░label)█ |
cps→ |
profile start | console.profile()█ |
cpe→ |
profile end | console.profileEnd()█ |
cpw→ |
profile wrapper | console.profile() |
cts→ |
time start | console.time(░label)█ |
ctl→ |
time log | console.timeLog(░label)█ |
cte→ |
time end | console.timeEnd(░label)█ |
ctw→ |
time wrapper | console.time(░label) |
cgs→ |
group start | console.group(░label)█ |
cge→ |
group end | console.groupEnd(░label)█ |
cgw→ |
group wrapper | console.group(░label) |
clr→ |
clear | console.clear()█ |
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; |
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 |
Settings
The editor.snippetSuggestions
setting in vscode settings.json
will show snippets on top of the suggestion list.
"editor.snippetSuggestions": "top"
About
Built With
- VS Code - Code editing redefined.
- Figma - The collaborative interface design tool.
- SWPM - One Package Manager to command them all.
Sources
Contributing
Please read CONTRIBUTING for details on our code of conduct, and the process for submitting pull requests to us.
Versioning
We use SemVer for versioning. For the versions available, see the Debug Snippets on GitHub.
Authors
- Camilo Martinez [Equiman]
See also the list of contributors who participated in this project.
Sponsors
If this project helps you, consider buying me a cup of coffee.
License
This project is licensed under the MIT License - see the LICENSE file for details.