Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Tc.小浩
unidocs-zh
提交
62d61f5d
U
unidocs-zh
项目概览
Tc.小浩
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
62d61f5d
编写于
1月 24, 2022
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: tutorial/run-and-debug
上级
c504b9fb
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
100 addition
and
94 deletion
+100
-94
docs/tutorial/run-and-debug.md
docs/tutorial/run-and-debug.md
+98
-1
docs/tutorial/snippet.md
docs/tutorial/snippet.md
+2
-93
未找到文件。
docs/tutorial/run-and-debug.md
浏览文件 @
62d61f5d
### 运行和调试
## 运行
-
[
通过 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`
运行到微信 web 开发者工具等小程序开发工具里,可在这些工具的控制台查看
`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
)
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。
docs/tutorial/snippet.md
浏览文件 @
62d61f5d
### 使用代码块直接创建组件模板
### 使用代码块直接创建组件模板
为提升开发效率,HBuilderX将
```uni-app```
常用代码封装成了以
```u```
开头的代码块,如在
```template```
标签内输入
```ulist```
回车,会自动生成如下代码:
为提升开发效率,HBuilderX将
```uni-app```
常用代码封装成了以
```u```
开头的代码块,如在
```template```
标签内输入
```ulist```
回车,会自动生成如下代码:
...
@@ -87,95 +86,5 @@ uni.showToast({
...
@@ -87,95 +86,5 @@ uni.showToast({
预置代码块不满足需求的话,可以自定义代码块,教程参考[https://ask.dcloud.net.cn/article/35924](https://ask.dcloud.net.cn/article/35924)
预置代码块不满足需求的话,可以自定义代码块,教程参考[https://ask.dcloud.net.cn/article/35924](https://ask.dcloud.net.cn/article/35924)
### 使用HBuilderX内置浏览器调试H5@h5-debug-hx
## 更多技巧
- [如何调试](/tutorial/run-and-debug.html#h5-debug-hx)
打开 ``uni-app`` 项目的页面,点HBuilderX右上角的预览按钮,可以在内置浏览器里打开H5运行结果,也可以点右键打开控制台调试。
\ No newline at end of file
修改保存工程源码时,右边的浏览器内容可以自动刷新。
在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`` 运行到微信web开发者工具等小程序开发工具里,可在这些工具的控制台查看 ``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)
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录