Skip to content

deinsoftware/vscode-debug-snippets

Repository files navigation

Debug Snippets

Version Installs Ratings license Open in VS Code

Debug

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

Debug Snippets

Back to menu


Supported Languages

Language Extension
JavaScript .js
TypeScript .ts
CSS .css
SCSS .scss

Back to 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 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()

console.profileEnd()
cts→ time start console.time(░label)█
ctl→ time log console.timeLog(░label)█
cte→ time end console.timeEnd(░label)█
ctw→ time wrapper console.time(░label)

console.timeEnd(░label)
cgs→ group start console.group(░label)█
cge→ group end console.groupEnd(░label)█
cgw→ group wrapper console.group(░label)

console.groupEnd(░label)
clr→ clear console.clear()█

React

Trigger Description Result JSX/TSX
ccd→ console code with destructuring <pre><code>{JSON.stringify({░name}, null, 2)}</code></pre>█

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


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


Settings

The editor.snippetSuggestions setting in vscode settings.json will show snippets on top of the suggestion list.

"editor.snippetSuggestions": "top"

Back to menu


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

See also the list of contributors who participated in this project.

Sponsors

If this project helps you, consider buying me a cup of coffee.

GitHub Sponsors paypal

License

This project is licensed under the MIT License - see the LICENSE file for details.

Back to menu