Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
程序yang
unidocs-zh
提交
94028795
U
unidocs-zh
项目概览
程序yang
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
1
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看板
提交
94028795
编写于
7月 12, 2022
作者:
hbcui1984
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
调整:运行和调试 大章节
上级
8705109e
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
104 addition
and
92 deletion
+104
-92
docs/tutorial/_sidebar.md
docs/tutorial/_sidebar.md
+7
-4
docs/tutorial/debug/debug-app.md
docs/tutorial/debug/debug-app.md
+61
-0
docs/tutorial/debug/debug-mp.md
docs/tutorial/debug/debug-mp.md
+11
-0
docs/tutorial/debug/debug-web-via-chrome.md
docs/tutorial/debug/debug-web-via-chrome.md
+0
-0
docs/tutorial/debug/debug-web-via-hx.md
docs/tutorial/debug/debug-web-via-hx.md
+17
-0
docs/tutorial/run-and-debug.md
docs/tutorial/run-and-debug.md
+8
-88
未找到文件。
docs/tutorial/_sidebar.md
浏览文件 @
94028795
...
...
@@ -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
docs/tutorial/debug/debug-app.md
0 → 100644
浏览文件 @
94028795
## App平台调试指南 debug@app-debug
常规开发里,在 HBuilderX 的运行菜单里运行 App,手机端的错误或 console.log 日志信息会直接打印到控制台。
如果需要更多功能,比如审查元素、打断点 debug,则需要启动调试模式。自
`HBuilderX 2.0.3+`
版本起开始支持
`App`
端的调试。
### 打开调试窗口
在
`HBuilderX`
中,正确运行项目:
`运行 --> 运行到手机或模拟器 --> 选择设备`
,项目启动后,在下方的控制台选择
`debug`
图标。

正确打开调试窗口后,显示如下:

### Elements
根据上一步,启动完成
`debug`
窗口后,可以看到
`Elements`
。
`Elements`
主要显示当前页面的组织结构,目前
`Elements`
只支持
`nvue`
。

### console.log 打日志
`console.log`
是我们日常开发最常用的调试方法,
`HBuilderX`
中当然也不能少。
-
App 端提供真机运行的
`console.log`
日志输出,运行到真机或模拟器时,不用点
`debug`
按钮,操作手机,会在
`HBuilderX`
的控制台直接输出日志。
-
如果是比较复杂的逻辑,那就推荐使用调试工具中的
`console`
了。根据上一步,启动完成
`debug`
窗口后,执行
`console.log`
方法就可以看到打印的内容了。
`debug`
窗口中看
`console.log`
的方法如下图:

### 调试页面
在调试窗口控制台的
`Sources`
(图中指示 1) 栏,可以给
`js`
打断点调试。
在
`uniapp`
(图中指示 2)下找到需要调试的页面,单击打开 ,在右侧可以看到我们需要调试的内容(图中指示 3)。在需要调试的代码行号的位置,点击打上断点(图中指示 4)。

之后,在设备上进行操作,进入断点位置,可以方便我们跟踪调试代码。

### 同步断点到调试器
在控制台众多代码中寻找要调试的代码是比较麻烦的一件事,
`HBuilderX`
的调试还提供一个便利的功能,可直接在编辑器中打断点,断点会自动同步到调试工具中。
操作步骤:在 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。
docs/tutorial/debug/debug-mp.md
0 → 100644
浏览文件 @
94028795
## 使用各家小程序开发工具调试@mp-debug
`uni-app`
运行到微信、阿里等平台的小程序开发者工具时,可在这些工具的控制台查看
`console`
信息,网络请求等信息等。
页面样式调试和一般的
`web`
项目一样,通过调试的箭头选中元素即可查看相应的节点和样式,如下图:

调试
`js`
时需要切换到
`Sources`
栏,根据 sourcemap,找到
`webpack`
里正确的目录,选中想要调试的那个页面的
`js`
,进行调试(如果
`js`
代码是压缩过的,点击右下角的{}可格式化代码),如下图:

\ No newline at end of file
docs/tutorial/debug/
h5-debug
.md
→
docs/tutorial/debug/
debug-web-via-chrome
.md
浏览文件 @
94028795
文件已移动
docs/tutorial/debug/debug-web-via-hx.md
0 → 100644
浏览文件 @
94028795
## 使用 HBuilderX 内置浏览器调试 H5@h5-debug-hx
打开
`uni-app`
项目的页面,点 HBuilderX 右上角的预览按钮,可以在内置浏览器里打开 H5 运行结果,也可以点右键打开控制台调试。
修改保存工程源码时,右边的浏览器内容可以自动刷新。
在 HBuilderX 控制台里,可以直接看到内置浏览器打印的日志。
打开内置浏览器的控制台的
`Sources`
栏,可以给 js 打断点调试。
在
`Page`
下找到
`webpack`
里的工程目录,可直接找到对应的
`vue`
页面进行断点调试;或按
`Ctrl+P`
搜文件名,进入页面调试;也可点击控制台的
`log`
信息,进入对应的页面进行调试。


`点击工具栏的运行 -> 运行到浏览器 -> 选择 Chrome`
,也可将
`uni-app`
运行到 浏览器,可参考
[
运行 uni-app
](
/quickstart?id=运行uni-app
)
。
\ No newline at end of file
docs/tutorial/run-and-debug.md
浏览文件 @
94028795
## 运行
-
[
通过 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`
信息,进入对应的页面进行调试。


`点击工具栏的运行 -> 运行到浏览器 -> 选择 Chrome`
,也可将
`uni-app`
运行到 浏览器,可参考
[
运行 uni-app
](
/quickstart?id=运行uni-app
)
。
### 使用各家小程序开发工具调试@mp-debug
`uni-app`
运行到微信、阿里等平台的小程序开发者工具时,可在这些工具的控制台查看
`console`
信息,网络请求等信息等。
页面样式调试和一般的
`web`
项目一样,通过调试的箭头选中元素即可查看相应的节点和样式,如下图:

调试
`js`
时需要切换到
`Sources`
栏,根据 sourcemap,找到
`webpack`
里正确的目录,选中想要调试的那个页面的
`js`
,进行调试(如果
`js`
代码是压缩过的,点击右下角的{}可格式化代码),如下图:

### 关于 App 的调试 debug@app-debug
常规开发里,在 HBuilderX 的运行菜单里运行 App,手机端的错误或 console.log 日志信息会直接打印到控制台。
如果需要更多功能,比如审查元素、打断点 debug,则需要启动调试模式。自
`HBuilderX 2.0.3+`
版本起开始支持
`App`
端的调试。
#### 打开调试窗口
在
`HBuilderX`
中,正确运行项目:
`运行 --> 运行到手机或模拟器 --> 选择设备`
,项目启动后,在下方的控制台选择
`debug`
图标。

正确打开调试窗口后,显示如下:

#### Elements
根据上一步,启动完成
`debug`
窗口后,可以看到
`Elements`
。
`Elements`
主要显示当前页面的组织结构,目前
`Elements`
只支持
`nvue`
。

#### console.log 打日志
`console.log`
是我们日常开发最常用的调试方法,
`HBuilderX`
中当然也不能少。
-
App 端提供真机运行的
`console.log`
日志输出,运行到真机或模拟器时,不用点
`debug`
按钮,操作手机,会在
`HBuilderX`
的控制台直接输出日志。
-
如果是比较复杂的逻辑,那就推荐使用调试工具中的
`console`
了。根据上一步,启动完成
`debug`
窗口后,执行
`console.log`
方法就可以看到打印的内容了。
`debug`
窗口中看
`console.log`
的方法如下图:

#### 调试页面
在调试窗口控制台的
`Sources`
(图中指示 1) 栏,可以给
`js`
打断点调试。
在
`uniapp`
(图中指示 2)下找到需要调试的页面,单击打开 ,在右侧可以看到我们需要调试的内容(图中指示 3)。在需要调试的代码行号的位置,点击打上断点(图中指示 4)。

之后,在设备上进行操作,进入断点位置,可以方便我们跟踪调试代码。

#### 同步断点到调试器
在控制台众多代码中寻找要调试的代码是比较麻烦的一件事,
`HBuilderX`
的调试还提供一个便利的功能,可直接在编辑器中打断点,断点会自动同步到调试工具中。
操作步骤:在 HBuilderX 编辑器中对目标行的行号处点右键,在右键菜单中选择“同步断点到调试器”,然后调试控制台会自动打开对应的代码并在指定行处标记断点。演示如下:

`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
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录