提交 9daa7905 编写于 作者: hbcui1984's avatar hbcui1984

删除高效开发文档中的"关于 App 的调试debug"章节

上级 4f38261c
......@@ -118,65 +118,3 @@ uni.showToast({
![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)
Tip
- `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`。
- vue页面也可以在微信开发者工具里调试,除了plus API,其他是一样的,微信开发者工具的查看`Dom`和网络和存储等调试工具相对而言更完善些。
注意:即使不发布微信小程序、只发布`App`,也需要安装微信开发者工具。
- uni-app的App端的webkit remote debug,只能调试视图层,不能调试逻辑层。因为uni-app的js不是运行在webview里,而是独立的jscore里。
- 部分manifest配置,如三方sdk配置,需要打包后生效的,可以打包一个自定义运行基座。打包自定义基座后运行这个自定义基座,同样可以真机运行和debug。打包正式包将无法真机运行和debug。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册