Add in debugging recipe, delete unused categories from cookbook TOC #1464

sdras · 2018-02-28T16:42:29Z

Kenneth Auchenberg wrote a great recipe for debugging Vue within VSCode, and we agreed it should live in our cookbook as well. In addition to his great contribution, I've also added:

Alternative pattern: vue devtools
Alternative pattern: vuetron
Alternative pattern: simple debugging statement
As discussed, removal of sections for cookbook until we have a few more and can see more pertinent groupings

sdras · 2018-02-28T16:43:15Z

@auchenberg I would love to get your take on this as well.

auchenberg

Looks good! Be aware that we have identified a few issues that also are present in Chrome DevTools: vuejs/vue-loader#1163

auchenberg · 2018-02-28T18:07:55Z

src/v2/cookbook/debugging-in-vscode.md

@@ -0,0 +1,132 @@
+---
+title: Debugging in VSCode and Chrome


We usually say "VS Code" or "Visual Studio Code"

auchenberg · 2018-02-28T18:08:07Z

src/v2/cookbook/debugging-in-vscode.md

+order: 6
+---
+
+Every application reaches a point where it's necessary to understand failures, small to large. In this recipe, we explore a few workflows for VSCode users, who are using Chrome to test.


auchenberg · 2018-02-28T18:08:18Z

src/v2/cookbook/debugging-in-vscode.md

+
+## Prerequisites
+
+You must have Chrome and VSCode installed. Make sure to the latest version of [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension installed in VS Code.


sdras · 2018-03-01T01:35:06Z

Oh, that's too bad about the invalid sourcemaps. I'll synch with you offline about timeline. I can get the other changes in in the meantime.

chrisvfritz · 2018-03-08T17:18:54Z

src/v2/cookbook/adding-instance-properties.md

    this.$reverseText('message')
-    console.log(this.message)    // => "olleH"
+    console.log(this.message) // => "olleH"


It looks like these will were probably automatically formatted by Prettier. We've previously followed the StandardJS conventions in the Vue docs, but I've actually been thinking about moving towards Standard + Prettier overall, with linting built into the project so this is probably OK.

chrisvfritz · 2018-03-08T17:20:07Z

src/v2/cookbook/debugging-in-vscode.md

+
+## Prerequisites
+
+You must have Chrome and VS Code installed. Make sure to the latest version of [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension installed in VS Code.


Make sure to the latest version

Missing word here I think.

chrisvfritz · 2018-03-08T17:21:32Z

src/v2/cookbook/debugging-in-vscode.md

+yarn global add @vue/cli
+
+vue create my-project
+```


I'm wondering if we should just defer people to the instructions in the Vue CLI README. That way, we don't have to update recipes if the API of Vue CLI changes. Thoughts?

Yeah, that makes a lot of sense to me.

chrisvfritz · 2018-03-08T17:23:43Z

src/v2/cookbook/debugging-in-vscode.md

+
+# if you have an alias set up (recommended)
+code .
+```


This part doesn't necessarily have to be done in the terminal and I've found some people prefer to instead open VS Code, then open a folder from there. Maybe we should assume knowledge of how to use the basics of VS Code and just ask people to open the project folder? That way, we're not assuming an alias is set up and that this is how the user prefers to open projects.

Yeah, we don't mention here how to set up the alias, either, so this might avoid confusion

chrisvfritz · 2018-03-08T17:26:02Z

src/v2/cookbook/debugging-in-vscode.md

+code .
+```
+
+### Update your webpack configuration


When referring to project names, we use a Title Case convention (e.g. Webpack instead of webpack). We're also currently using Title Case for titles (e.g. Update Your Webpack Configuration instead of Update your webpack configuration).

chrisvfritz · 2018-03-08T17:26:35Z

src/v2/cookbook/debugging-in-vscode.md

+
+### Update your webpack configuration
+
+Before you can debug your Vue components from VS Code you need to update the generated webpack config to build sourcemaps that contains more information for our debugger.


Last time I'll mention it, but webpack->Webpack again here.

sourcemaps that contains more information

contains->contain?

I think we should probably also be more specific than "more information for our debugger" for those who don't know what source maps are.

chrisvfritz · 2018-03-08T17:27:41Z

src/v2/cookbook/debugging-in-vscode.md

+devtool: 'source-map',
+```
+
+### Configure launch.json File


launch.json should probably be in backticks.

Actually, with these titles, I wonder if it might be better to use titles that describe what we're trying to achieve, instead of the implementation details to get there.

For example, instead of Update your webpack configuration, we could say Showing Source Code in the Chrome Devtools. Then instead of Configure launch.json File, we could say, Launching Our App from VS Code.

Yeah, that makes more sense and is probably more easily googleable (not a word, but I'm keeping it)

chrisvfritz · 2018-03-08T17:36:41Z

src/v2/cookbook/debugging-in-vscode.md

+}
+```
+
+## Start Debugging An Application


Maybe Adding a Breakpoint?

chrisvfritz · 2018-03-08T17:39:25Z

src/v2/cookbook/debugging-in-vscode.md

+
+<p class="tip">There are a couple of gotchas to note for Vue Devtools: 
+- If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up. 
+- To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel</p>


Whenever there's another doc that explains something in more detail, it's best to link to it so that we don't have to maintain multiple versions of the same instructions. In this case, I'd just link to the Vue Devtools README, since it contains all this information already.

Actually, I'm thinking about keeping a note about it not working for minified version, but maybe changing the wording to say "for instance, using a CDN" because I get this question a ton and it really wouldn't hurt to have it in one more place, IMO.

…point to readmes

sdras · 2018-03-09T12:14:27Z

Ok, I think I addressed all of the concerns in the review. Let me know if we need further changes :)

chrisvfritz

Looks great!

sdras · 2018-03-21T17:36:11Z

Sourcemap issue made some traction, getting this recipe in there :)

add in debugging recipe, delete unused categories from cookbook TOC

6202cf1

sdras requested a review from chrisvfritz February 28, 2018 16:42

sdras added the cookbook label Feb 28, 2018

auchenberg reviewed Feb 28, 2018

View reviewed changes

VSCode => VS Code

a5980da

chrisvfritz suggested changes Mar 8, 2018

View reviewed changes

update PR based on review- title edits, clarification of sourcemaps, …

96fb48d

…point to readmes

chrisvfritz approved these changes Mar 10, 2018

View reviewed changes

sdras added 2 commits March 10, 2018 10:18

Merge branch 'master' into debugging

0481eab

Merge branch 'master' into debugging

ef3a7ca

sdras merged commit 5c6e98b into vuejs:master Mar 21, 2018


		## Prerequisites

		You must have Chrome and VSCode installed. Make sure to the latest version of [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension installed in VS Code.


		## Prerequisites

		You must have Chrome and VS Code installed. Make sure to the latest version of [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension installed in VS Code.


		### Update your webpack configuration

		Before you can debug your Vue components from VS Code you need to update the generated webpack config to build sourcemaps that contains more information for our debugger.

Add in debugging recipe, delete unused categories from cookbook TOC #1464

Add in debugging recipe, delete unused categories from cookbook TOC #1464

Uh oh!

Conversation

sdras commented Feb 28, 2018

Uh oh!

sdras commented Feb 28, 2018

Uh oh!

auchenberg left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sdras commented Mar 1, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sdras commented Mar 9, 2018

Uh oh!

chrisvfritz left a comment

Choose a reason for hiding this comment

Uh oh!

sdras commented Mar 21, 2018

Uh oh!

Uh oh!