synced updates in cookbook (#715)

* synced updates in cookbook

* translated debugging-in-vscode.md

* Update debugging-in-vscode.md

Author: Jinjiang

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

@@ -4,7 +4,7 @@ type: cookbook
 order: 2
 ---
 
-## 简单的示例
+## 基本的示例
 
 你可能会在很多组件里用到数据/实用工具，但是不想[污染全局作用域](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md)。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。
 
@@ -57,7 +57,7 @@ new Vue({
 })
 ```
 
-日志中会先出现 `"The name of some other app"`，然后出现 `"My App"`，因为 `this.appName` 在实例被创建之后被 `data` [覆写了](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)。我们通过 `$` 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 `$_appName` 或 `ΩappName`，来避免和插件或未来的插件相冲突。
+日志中会先出现 `"My App"`，然后出现 `"The name of some other app"`，因为 `this.appName` 在实例被创建之后被 `data` [覆写了](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)。我们通过 `$` 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 `$_appName` 或 `ΩappName`，来避免和插件或未来的插件相冲突。
 
 ## 真实的示例：通过 axios 替换 Vue Resource
 
@@ -91,7 +91,8 @@ new Vue({
   },
   created () {
     var vm = this
-    this.$http.get('https://jsonplaceholder.typicode.com/users')
+    this.$http
+      .get('https://jsonplaceholder.typicode.com/users')
       .then(function (response) {
         vm.users = response.data
       })
@@ -107,26 +108,32 @@ new Vue({
 
 ``` js
 Vue.prototype.$reverseText = function (propertyName) {
-  this[propertyName] = this[propertyName].split('').reverse().join('')
+  this[propertyName] = this[propertyName]
+    .split('')
+    .reverse()
+    .join('')
 }
 
 new Vue({
   data: {
     message: 'Hello'
   },
   created: function () {
-    console.log(this.message)    // => "Hello"
+    console.log(this.message) // => "Hello"
     this.$reverseText('message')
-    console.log(this.message)    // => "olleH"
+    console.log(this.message) // => "olleH"
   }
 })
 ```
 
-注意如果你使用了 ES6/2015 的箭头函数，则其绑定的上下文__不会__正常工作，因为它们会隐式地绑定其父级作用域。也就是说使用箭头函数的版本：
+注意如果你使用了 ES6/2015 的箭头函数，则其绑定的上下文**不会**正常工作，因为它们会隐式地绑定其父级作用域。也就是说使用箭头函数的版本：
 
 ``` js
 Vue.prototype.$reverseText = propertyName => {
-  this[propertyName] = this[propertyName].split('').reverse().join('')
+  this[propertyName] = this[propertyName]
+    .split('')
+    .reverse()
+    .join('')
 }
 ```
 
@@ -142,27 +149,30 @@ Uncaught TypeError: Cannot read property 'split' of undefined
 
 然而，有的时候它会让其他开发者感到混乱。例如他们可能看到了 `this.$http`，然后会想“哦，我从来没见过这个 Vue 的功能”，然后他们来到另外一个项目又发现 `this.$http` 是未被定义的。或者你打算去搜索如何使用它，但是搜不到结果，因为他们并没有发现这是一个 axios 的别名。
 
-__这种便利是以显性表达为代价的。__当我们查阅一个组件的时候，要注意交代清楚 `$http` 是从哪来的：Vue 自身、一个插件、还是一个辅助库？
+**这种便利是以显性表达为代价的。**当我们查阅一个组件的时候，要注意交代清楚 `$http` 是从哪来的：Vue 自身、一个插件、还是一个辅助库？
 
 那么有别的替代方案吗？
 
 ## 替代方案
 
 ### 当没有使用模块系统时
 
-在__没有__模块系统 (比如 webpack 或 Browserify) 的应用中，存在一种_任何_重 JS 前端应用都常用的模式：一个全局的 `App` 对象。
+在**没有**模块系统 (比如 webpack 或 Browserify) 的应用中，存在一种_任何_重 JS 前端应用都常用的模式：一个全局的 `App` 对象。
 
 如果你想要添加的东西跟 Vue 本身没有太多关系，那么这是一个不错的替代方案。举个例子：
 
 ``` js
 var App = Object.freeze({
   name: 'My App',
-  description: '2.1.4',
+  version: '2.1.4',
   helpers: {
     // 这我们之前见到过的 `$reverseText` 方法
     // 的一个纯函数版本
     reverseText: function (text) {
-      return text.split('').reverse().join('')
+      return text
+        .split('')
+        .reverse()
+        .join('')
     }
   }
 })

src/v2/cookbook/cookbook-contributions.md

@@ -4,7 +4,7 @@ type: cookbook
 order: 7
 ---
 
-## 简单的示例
+## 基本的示例
 
 我们可能很多次想为网站的滚动事件添加一些行为，尤其是动画。已有的做法很多，但是代码和依赖最少的方式可能就是使用一个[自定义指令](../guide/custom-directive.html)创建一个钩子，在特定的滚动事件之后作处理。
 

src/v2/cookbook/creating-custom-scroll-directives.md

@@ -0,0 +1,113 @@
+---
+title: 在 VS Code 和 Chrome 中调试
+type: cookbook
+order: 8
+---
+
+每个应用，不论大小，都需要理解程序是如何运行失败的。在本案例中，我们会探索一些使用 Chrome 来进行测试的 VS Code 用户的工作流程。
+
+这个案例展示了在通过 [Vue CLI](https://github.com/vuejs/vue-cli) 生成的 Vue.js 应用程序中，如何使用 VS Code 的 [Debugger for Chrome](https://github.com/Microsoft/VSCode-chrome-debug) 扩展进行调试。
+
+## 先决条件
+
+你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) 扩展的最新版本。
+
+请通过 [Vue CLI](https://github.com/vuejs/vue-cli)，遵循它的 README 中的安装文档安装并创建一个项目。然后进入这个新创建的应用的目录，打开 VS Code。
+
+### 在 Chrome Devtools 中展示源代码
+
+在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。
+
+打开 `config/index.js` 并找到 `devtool` 属性。将其更新为：
+
+```json
+devtool: 'source-map',
+```
+
+### 从 VS Code 启动应用
+
+点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 `launch.json` 的文件，选择 **Chrome** 环境。然后将生成的 `launch.json` 的内容替换成为接下来的两段配置：
+
+![添加 Chrome 配置](/images/config_add.png)
+
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "vuejs: chrome",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}/src",
+      "breakOnLoad": true,
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
+    }
+  ]
+}
+```
+
+## 设置一个断点
+
+1. 在 **`src/components/HelloWorld.vue`** 的 `line90` 的地方设置一个断点，这里的 `data` 函数返回一个字符串。
+
+![断点渲染器](/images/breakpoint_set.png)
+
+2. 在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用：
+
+  ```
+  npm start
+  ```
+
+3. 来到 Debug 视图，选择 **'vuejs: chrome'** 配置，然后按 <kbd>F5</kbd> 或点击那个绿色的 play 按钮。
+
+4. 随着一个新的 Chrome 实例打开 `http://localhost:8080`，你的断点现在应该被命中了。
+
+![命中断点](/images/breakpoint_hit.png)
+
+## 替代方案
+
+### Vue Devtools
+
+我们还有一些其它的调试方法，复杂度不尽相同。其中最流行和简单的是使用非常棒的 [vue-devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)。使用 devtools 有很多好处，比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化。另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验。
+
+![Devtools Timetravel Debugger](/images/devtools-timetravel.gif)
+
+<p class="tip">请留意如果页面使用了一个生产环境/压缩后的 Vue.js 构建版本 (例如来自一个 CDN 的标准的链接)，devtools 的审查功能是默认被禁用的，所以 Vue 面板不会出现。如果你切换到一个非压缩版本，你可能需要强制刷新该页面来看到它。</p>
+
+### Vuetron
+
+[Vuetron](http://vuetron.io/) 是一个非常好的项目，它对 vue-devtools 的工作做了一些扩展。除了普通的 devtools 工作流程，你还可以：
+
+* 快速查阅 API 请求/响应：如果你使用 fetch API 来发送请求，那么这个功能会将所有发出的请求都展示出来。这个扩展出来的卡片展示了请求的数据和响应的数据。
+* 订阅你的应用的某个具体部分的状态，以便快速调试
+* 组件依赖可视化，且允许你收起/展开某个具体的依赖树视图
+
+![Vuetron 层级结构](/images/vuetron-heirarchy.gif)
+
+### 简单的 debugger 语句
+
+上述示例的工作流程非常好。不过这里还有一个替代选项，就是你可以直接在代码中使用[原生的 `debugger` 语句](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/debugger)。如果你选择了这种方式，请千万记得当你调试完毕之后把这个语句移除。
+
+```js
+<script>
+export default {
+  data() {
+    return {
+      message: ''
+    }
+  },
+  mounted() {
+    const hello = 'Hello World!'
+    debugger
+    this.message = hello
+  }
+};
+</script>
+```
+
+## 致谢
+
+这个案例是基于 [Kenneth Auchenberg](https://twitter.com/auchenberg) 贡献在[这里](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli)的文章而撰写的。

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

@@ -4,7 +4,7 @@ type: cookbook
 order: 4
 ---
 
-## 简单的示例
+## 基本的示例
 
 创建一套 SVG 图标系统的方式有很多，但是有一种方法能够充分发挥 Vue 的能力，那就是把可编辑的内联图标创建为组件。这样做有好多好处：
 
@@ -24,7 +24,7 @@ order: 4
 
 ![网站文档](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/screendocs.jpg '文档 demo')
 
-我们将会创建一个基础图标 (`IconBase.vue`) 组件，并使用了一个无作用域的插槽。
+我们将会创建一个基础图标 (`IconBase.vue`) 组件，并使用了一个插槽。
 
 ```html
 <template>
@@ -43,7 +43,7 @@ order: 4
 </template>
 ```
 
-你可以像这样使用这个基础图标，唯一可能要做的就是根据你图标的 `viewBox` 来更新其 `viewBox`。在基础图标里会有 `width`、`height`、`color` 以及图标的名字等 prop，这样我们就可以通过 prop 对其动态更新。这个名字将会同时用在 `<title>` 的内容及其用于提供可访问性的 `id` 上。
+你可以像这样使用这个基础图标，唯一可能要做的就是根据你图标的 `viewBox` 来更新其 `viewBox`。在基础图标里会有 `width`、`height`、`iconColor` 以及图标的名字等 prop，这样我们就可以通过 prop 对其动态更新。这个名字将会同时用在 `<title>` 的内容及其用于提供可访问性的 `id` 上。
 
 我们的脚本是下面这样的，我们设了一些默认值，这样在没有特别设置的情况下图标渲染出来就是一致的：
 

src/v2/cookbook/editable-svg-icons.md

@@ -4,7 +4,7 @@ type: cookbook
 order: 3
 ---
 
-## 简单的示例
+## 基本的示例
 
 表单校验是浏览器原生支持的，但是有的时候用不同的浏览器处理起来需要一些小技巧。即使当表单校验已经被完美支持，你也还是有很多时候需要进行自定义的校验。这时一个更加手动的基于 Vue 的解决方案可能会更适合。我们来看一个简单的示例。