Debugging in VS Code Cookbook Recipe #663
Conversation
| devtool: 'source-map', | ||
| ``` | ||
|
|
||
| If you use Vue CLI 3, set or update the `devtool` property inside `vue.config.js`: |
There was a problem hiding this comment.
Should this be updated to Vue CLI 4?
Is mentioning CLI 2 still worthwhile in a Vue 3 context?
| ### Launching the Application from VS Code | ||
|
|
||
| ::: info | ||
| We're assuming the port to be `8080` here. If it's not the case (for instance, if `8080` has been taken and Vue CLI automatically picks another port for you), just modify the configuration accordingly. |
There was a problem hiding this comment.
I stumbled a bit on this. Specifically the 'If it's not the case' part.
To my ear, it should be either 'If that's not the case' or just 'If it's not'.
|
|
||
| ## Setting a Breakpoint | ||
|
|
||
| 1. Set a breakpoint in **src/components/HelloWorld.vue** on `line 90` where the `data` function returns a string. |
There was a problem hiding this comment.
Ultra pedantic, but the function is returning an object, not a string.
|
|
||
| ### Vue Devtools | ||
|
|
||
| There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent Vue.js devtools [for Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) and [for Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/). Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex. |
There was a problem hiding this comment.
These seem to be links to the Vue 2 devtools. Do they need changing to the Vue 3 devtools beta?
|
|
||
| The example above has a great workflow. However, there is an alternative option where you can use the [native debugger statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) directly in your code. If you choose to work this way, it's important that you remember to remove the statements when you're done. | ||
|
|
||
| ```js |
There was a problem hiding this comment.
The language doesn't currently match the code. Either the language needs changing or the <script> wrapper should be removed.
|
@skirtles-code can you make a PR with your suggestions? so we don't lose them. |
* add in debugging in vscode * change tips to new format
No description provided.