From 94028795f88ad94799fbce50710d217689b189a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=94=E7=BA=A2=E4=BF=9D?= Date: Tue, 12 Jul 2022 15:05:11 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=EF=BC=9A=E8=BF=90=E8=A1=8C?= =?UTF-8?q?=E5=92=8C=E8=B0=83=E8=AF=95=20=E5=A4=A7=E7=AB=A0=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/_sidebar.md | 11 ++- docs/tutorial/debug/debug-app.md | 61 ++++++++++++ docs/tutorial/debug/debug-mp.md | 11 +++ .../{h5-debug.md => debug-web-via-chrome.md} | 0 docs/tutorial/debug/debug-web-via-hx.md | 17 ++++ docs/tutorial/run-and-debug.md | 96 ++----------------- 6 files changed, 104 insertions(+), 92 deletions(-) create mode 100644 docs/tutorial/debug/debug-app.md create mode 100644 docs/tutorial/debug/debug-mp.md rename docs/tutorial/debug/{h5-debug.md => debug-web-via-chrome.md} (100%) create mode 100644 docs/tutorial/debug/debug-web-via-hx.md diff --git a/docs/tutorial/_sidebar.md b/docs/tutorial/_sidebar.md index b76495e43..a45e6f4ae 100644 --- 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 diff --git a/docs/tutorial/debug/debug-app.md b/docs/tutorial/debug/debug-app.md new file mode 100644 index 000000000..1a5a750dc --- /dev/null +++ b/docs/tutorial/debug/debug-app.md @@ -0,0 +1,61 @@ +## 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。 diff --git a/docs/tutorial/debug/debug-mp.md b/docs/tutorial/debug/debug-mp.md new file mode 100644 index 000000000..f6f963551 --- /dev/null +++ b/docs/tutorial/debug/debug-mp.md @@ -0,0 +1,11 @@ +## 使用各家小程序开发工具调试@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 diff --git a/docs/tutorial/debug/h5-debug.md b/docs/tutorial/debug/debug-web-via-chrome.md similarity index 100% rename from docs/tutorial/debug/h5-debug.md rename to docs/tutorial/debug/debug-web-via-chrome.md diff --git a/docs/tutorial/debug/debug-web-via-hx.md b/docs/tutorial/debug/debug-web-via-hx.md new file mode 100644 index 000000000..d0703d609 --- /dev/null +++ b/docs/tutorial/debug/debug-web-via-hx.md @@ -0,0 +1,17 @@ +## 使用 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 diff --git a/docs/tutorial/run-and-debug.md b/docs/tutorial/run-and-debug.md index b98d78875..eaabb10da 100644 --- a/docs/tutorial/run-and-debug.md +++ b/docs/tutorial/run-and-debug.md @@ -1,96 +1,16 @@ ## 运行 + - [通过 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 -- GitLab