调整：运行和调试大章节

94028795 · hbcui1984 · 8705109e · 94028795 · 94028795 · 94028795
6 changed file
--- a/docs/tutorial/_sidebar.md
+++ b/docs/tutorial/_sidebar.md
@@ -112,10 +112,13 @@
  * [小程序插件](/tutorial/mp-weixin-plugin.md)
  * [一键上传微信平台](/tutorial/build/publish-mp-weixin-cli.md)
 * 运行和调试
-  * [基础](/tutorial/run-and-debug.md)
-  * [真机运行常见问题](tutorial/run/PhoneDebugging.md)
-  * [HBuilderX安装模拟器](tutorial/run/installSimulator.md)
-  * [uni-app web版调试](tutorial/debug/h5-debug.md)
+  * [概述](/tutorial/run-and-debug.md)
+  * [App平台：使用 HBuilderX 内置调试器](tutorial/debug/debug/debug-app.md)
+  * [App平台：模拟器安装指南](tutorial/run/installSimulator.md)
+  * [App平台：真机运行常见问题](tutorial/run/PhoneDebugging.md)
+  * [web平台：使用 HBuilderX 内置浏览器调试](tutorial/debug/debug-web-via-hx.md)
+  * [web平台：使用 chrome 调试](tutorial/debug/debug/debug-web-via-chrome.md)
+  * [小程序平台：使用小程序开发者工具调试](tutorial/debug/debug/debug-mp.md)
 * [高效开发技巧](/tutorial/snippet.md)
 * [性能优化专题](/tutorial/performance.md)
 * [国际化专题](/tutorial/i18n.md)
\ No newline at end of file
--- a/docs/tutorial/debug/debug-app.md
+++ b/docs/tutorial/debug/debug-app.md
+## App平台调试指南 debug@app-debug
+
+常规开发里，在 HBuilderX 的运行菜单里运行 App，手机端的错误或 console.log 日志信息会直接打印到控制台。
+
+如果需要更多功能，比如审查元素、打断点 debug，则需要启动调试模式。自 `HBuilderX 2.0.3+` 版本起开始支持 `App` 端的调试。
+
+### 打开调试窗口
+
+在 `HBuilderX` 中，正确运行项目： `运行 --> 运行到手机或模拟器 --> 选择设备`，项目启动后，在下方的控制台选择 `debug` 图标。
+
+![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/55245430-4f34-11eb-97b7-0dc4655d6e68.png)
+
+正确打开调试窗口后，显示如下：
+![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/50f7e890-4f34-11eb-b680-7980c8a877b8.png)
+
+### Elements
+
+根据上一步，启动完成`debug`窗口后，可以看到`Elements`。`Elements` 主要显示当前页面的组织结构，目前`Elements`只支持`nvue`。
+![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/5433b2a0-4f34-11eb-8a36-ebb87efcf8c0.png)
+
+### console.log 打日志
+
+`console.log`是我们日常开发最常用的调试方法，`HBuilderX`中当然也不能少。
+
+- App 端提供真机运行的`console.log`日志输出，运行到真机或模拟器时，不用点`debug`按钮，操作手机，会在`HBuilderX`的控制台直接输出日志。
+
+- 如果是比较复杂的逻辑，那就推荐使用调试工具中的`console`了。根据上一步，启动完成`debug`窗口后，执行`console.log`方法就可以看到打印的内容了。
+
+`debug`窗口中看`console.log`的方法如下图：
+
+![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/53673ae0-4f34-11eb-a16f-5b3e54966275.jpg)
+
+### 调试页面
+
+在调试窗口控制台的 `Sources` （图中指示 1） 栏，可以给 `js` 打断点调试。
+
+在 `uniapp`（图中指示 2）下找到需要调试的页面，单击打开 ，在右侧可以看到我们需要调试的内容（图中指示 3）。在需要调试的代码行号的位置，点击打上断点（图中指示 4）。
+
+![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/58f09e70-4f34-11eb-8a36-ebb87efcf8c0.png)
+
+之后，在设备上进行操作，进入断点位置，可以方便我们跟踪调试代码。
+
+![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/5839d190-4f34-11eb-8a36-ebb87efcf8c0.png)
+
+### 同步断点到调试器
+
+在控制台众多代码中寻找要调试的代码是比较麻烦的一件事，`HBuilderX`的调试还提供一个便利的功能，可直接在编辑器中打断点，断点会自动同步到调试工具中。
+
+操作步骤：在 HBuilderX 编辑器中对目标行的行号处点右键，在右键菜单中选择“同步断点到调试器”，然后调试控制台会自动打开对应的代码并在指定行处标记断点。演示如下：
+
+![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/55de5560-4f34-11eb-8a36-ebb87efcf8c0.gif)
+
+### 注意事项
+
+- `vue` 和 `nvue` 页面均支持断点调试
+- 目前仅支持 `nvue` 页面审查元素，`vue` 页面暂不支持，以及 `Android` 平台的 `nvue` 审查元素暂不支持查看 `style`
+- App 端提供真机运行的`console.log`日志输出，运行到真机或模拟器时，不用点`debug`按钮，运行手机 App，会在`HBuilderX`的控制台直接输出日志。
+- 如果是调试`App`的界面和常规 API，推荐编译到 H5 端，点`HBuilderX`右上角的预览，在内置浏览器里调`Dom`，保存后立即看到结果，调试更方便。并且 H5 端也支持`titleNView`的各种复杂设置。唯一要注意的就是`css`兼容性，使用太新的`css`在`pc`上预览可能正常，但低端`Android`上异常，具体可查询`caniuse`等网站。
+- 常用的开发模式就是`pc`上使用内置浏览器预览调 dom，运行到真机上看`console.log`。如果是很复杂的问题才使用`debug`。
+- uni-app 的 App 端的 webkit remote debug，只能调试视图层，不能调试逻辑层。因为 uni-app 的 js 不是运行在 webview 里，而是独立的 jscore 里。
+- 部分 manifest 配置，如三方 sdk 配置，需要打包后生效的，可以打包一个自定义运行基座。打包自定义基座后运行这个自定义基座，同样可以真机运行和 debug。打包正式包将无法真机运行和 debug。
--- a/docs/tutorial/debug/debug-mp.md
+++ b/docs/tutorial/debug/debug-mp.md
+## 使用各家小程序开发工具调试@mp-debug
+
+`uni-app` 运行到微信、阿里等平台的小程序开发者工具时，可在这些工具的控制台查看 `console` 信息，网络请求等信息等。
+
+页面样式调试和一般的`web`项目一样，通过调试的箭头选中元素即可查看相应的节点和样式，如下图：
+
+![uni-app](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/51d2b830-4f34-11eb-a16f-5b3e54966275.png)
+
+调试 `js` 时需要切换到 `Sources` 栏，根据 sourcemap，找到 `webpack` 里正确的目录，选中想要调试的那个页面的`js`，进行调试（如果`js`代码是压缩过的，点击右下角的{}可格式化代码），如下图：
+
+![uni-app](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/52889ab0-4f34-11eb-b680-7980c8a877b8.png)
\ No newline at end of file
--- a/docs/tutorial/debug/h5-debug.md
+++ b/docs/tutorial/debug/h5-debug.md
--- a/docs/tutorial/debug/debug-web-via-hx.md
+++ b/docs/tutorial/debug/debug-web-via-hx.md
+## 使用 HBuilderX 内置浏览器调试 H5@h5-debug-hx
+
+打开 `uni-app` 项目的页面，点 HBuilderX 右上角的预览按钮，可以在内置浏览器里打开 H5 运行结果，也可以点右键打开控制台调试。
+
+修改保存工程源码时，右边的浏览器内容可以自动刷新。
+
+在 HBuilderX 控制台里，可以直接看到内置浏览器打印的日志。
+
+打开内置浏览器的控制台的 `Sources` 栏，可以给 js 打断点调试。
+
+在 `Page` 下找到 `webpack` 里的工程目录，可直接找到对应的`vue`页面进行断点调试；或按 `Ctrl+P`搜文件名，进入页面调试；也可点击控制台的 `log` 信息，进入对应的页面进行调试。
+
+![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/56abde90-4f34-11eb-8a36-ebb87efcf8c0.png)
+
+![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/5762ab70-4f34-11eb-bdc1-8bd33eb6adaa.png)
+
+`点击工具栏的运行 -> 运行到浏览器 -> 选择 Chrome`，也可将 `uni-app`运行到 浏览器，可参考 [运行 uni-app](/quickstart?id=运行uni-app)。
\ No newline at end of file
--- a/docs/tutorial/run-and-debug.md
+++ b/docs/tutorial/run-and-debug.md
 ## 运行
+
 - [通过 HBuilder X 运行](/quickstart-hx.html#运行uni-app)
 - [通过 vue-cli 命令行运行](/quickstart-cli.html#运行、发布uni-app)

 ## 调试
-### 使用 HBuilderX 内置浏览器调试 H5@h5-debug-hx
-
-打开 `uni-app` 项目的页面，点 HBuilderX 右上角的预览按钮，可以在内置浏览器里打开 H5 运行结果，也可以点右键打开控制台调试。
-
-修改保存工程源码时，右边的浏览器内容可以自动刷新。
-
-在 HBuilderX 控制台里，可以直接看到内置浏览器打印的日志。
-
-打开内置浏览器的控制台的 `Sources` 栏，可以给 js 打断点调试。
-
-在 `Page` 下找到 `webpack` 里的工程目录，可直接找到对应的`vue`页面进行断点调试；或按 `Ctrl+P`搜文件名，进入页面调试；也可点击控制台的 `log` 信息，进入对应的页面进行调试。
-
-![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/56abde90-4f34-11eb-8a36-ebb87efcf8c0.png)
-
-![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/5762ab70-4f34-11eb-bdc1-8bd33eb6adaa.png)
-
-`点击工具栏的运行 -> 运行到浏览器 -> 选择 Chrome`，也可将 `uni-app`运行到 浏览器，可参考 [运行 uni-app](/quickstart?id=运行uni-app)。
-
-### 使用各家小程序开发工具调试@mp-debug
-
-`uni-app` 运行到微信、阿里等平台的小程序开发者工具时，可在这些工具的控制台查看 `console` 信息，网络请求等信息等。
-
-页面样式调试和一般的`web`项目一样，通过调试的箭头选中元素即可查看相应的节点和样式，如下图：
-
-![uni-app](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/51d2b830-4f34-11eb-a16f-5b3e54966275.png)
-
-调试 `js` 时需要切换到 `Sources` 栏，根据 sourcemap，找到 `webpack` 里正确的目录，选中想要调试的那个页面的`js`，进行调试（如果`js`代码是压缩过的，点击右下角的{}可格式化代码），如下图：
-
-![uni-app](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/52889ab0-4f34-11eb-b680-7980c8a877b8.png)
-
-### 关于 App 的调试 debug@app-debug
-
-常规开发里，在 HBuilderX 的运行菜单里运行 App，手机端的错误或 console.log 日志信息会直接打印到控制台。
-
-如果需要更多功能，比如审查元素、打断点 debug，则需要启动调试模式。自 `HBuilderX 2.0.3+` 版本起开始支持 `App` 端的调试。
-
-#### 打开调试窗口
-
-在 `HBuilderX` 中，正确运行项目： `运行 --> 运行到手机或模拟器 --> 选择设备`，项目启动后，在下方的控制台选择 `debug` 图标。
-
-![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/55245430-4f34-11eb-97b7-0dc4655d6e68.png)
-
-正确打开调试窗口后，显示如下：
-![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/50f7e890-4f34-11eb-b680-7980c8a877b8.png)
-
-#### Elements
-
-根据上一步，启动完成`debug`窗口后，可以看到`Elements`。`Elements` 主要显示当前页面的组织结构，目前`Elements`只支持`nvue`。
-![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/5433b2a0-4f34-11eb-8a36-ebb87efcf8c0.png)
-
-#### console.log 打日志
-
-`console.log`是我们日常开发最常用的调试方法，`HBuilderX`中当然也不能少。
-
- App 端提供真机运行的`console.log`日志输出，运行到真机或模拟器时，不用点`debug`按钮，操作手机，会在`HBuilderX`的控制台直接输出日志。
-
- 如果是比较复杂的逻辑，那就推荐使用调试工具中的`console`了。根据上一步，启动完成`debug`窗口后，执行`console.log`方法就可以看到打印的内容了。
-
-`debug`窗口中看`console.log`的方法如下图：
-
-![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/53673ae0-4f34-11eb-a16f-5b3e54966275.jpg)
-
-#### 调试页面
-
-在调试窗口控制台的 `Sources` （图中指示 1） 栏，可以给 `js` 打断点调试。
-
-在 `uniapp`（图中指示 2）下找到需要调试的页面，单击打开 ，在右侧可以看到我们需要调试的内容（图中指示 3）。在需要调试的代码行号的位置，点击打上断点（图中指示 4）。
-
-![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/58f09e70-4f34-11eb-8a36-ebb87efcf8c0.png)
-
-之后，在设备上进行操作，进入断点位置，可以方便我们跟踪调试代码。
-
-![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/5839d190-4f34-11eb-8a36-ebb87efcf8c0.png)
-
-#### 同步断点到调试器
-
-在控制台众多代码中寻找要调试的代码是比较麻烦的一件事，`HBuilderX`的调试还提供一个便利的功能，可直接在编辑器中打断点，断点会自动同步到调试工具中。
-
-操作步骤：在 HBuilderX 编辑器中对目标行的行号处点右键，在右键菜单中选择“同步断点到调试器”，然后调试控制台会自动打开对应的代码并在指定行处标记断点。演示如下：

-![debug](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/55de5560-4f34-11eb-8a36-ebb87efcf8c0.gif)
+`uni-app`提供了多种高效调试方案，具体包括：
+- App平台使用 HBuilderX 内置调试器，[详情](debug/debug-app.md)
+- web平台：使用 HBuilderX 内置浏览器调试，[详情](tutorial/debug/debug-web-via-hx.md)
+- web平台：使用 chrome 调试，[详情](tutorial/debug/debug/debug-web-via-chrome.md)
+- 小程序平台：使用小程序开发者工具调试，[详情](tutorial/debug/debug/debug-mp.md)

-Tip
+在日常开发中，推荐使用HBuilderX 内置浏览器，左侧写代码，右侧显示预览效果；左侧代码改动后，右侧实时刷新，开发效率更高。

- `vue` 和 `nvue` 页面均支持断点调试
- 目前仅支持 `nvue` 页面审查元素，`vue` 页面暂不支持，以及 `Android` 平台的 `nvue` 审查元素暂不支持查看 `style`
- App 端提供真机运行的`console.log`日志输出，运行到真机或模拟器时，不用点`debug`按钮，运行手机 App，会在`HBuilderX`的控制台直接输出日志。
- 如果是调试`App`的界面和常规 API，推荐编译到 H5 端，点`HBuilderX`右上角的预览，在内置浏览器里调`Dom`，保存后立即看到结果，调试更方便。并且 H5 端也支持`titleNView`的各种复杂设置。唯一要注意的就是`css`兼容性，使用太新的`css`在`pc`上预览可能正常，但低端`Android`上异常，具体可查询`caniuse`等网站。
- 常用的开发模式就是`pc`上使用内置浏览器预览调 dom，运行到真机上看`console.log`。如果是很复杂的问题才使用`debug`。
- uni-app 的 App 端的 webkit remote debug，只能调试视图层，不能调试逻辑层。因为 uni-app 的 js 不是运行在 webview 里，而是独立的 jscore 里。
- 部分 manifest 配置，如三方 sdk 配置，需要打包后生效的，可以打包一个自定义运行基座。打包自定义基座后运行这个自定义基座，同样可以真机运行和 debug。打包正式包将无法真机运行和 debug。
+因`uni-app`有较高的平台一致性，使用HBuilderX 内置浏览器在web平台测试没问题后，在其它平台进行简单测试即可，基本无需改动代码，项目整体的调试、测试成本更低。
\ No newline at end of file