Skip to content

Commit

Permalink
Update snippet.md
Browse files Browse the repository at this point in the history
错别字
  • Loading branch information
xuanyuan9595 committed Oct 6, 2019
1 parent aa99e03 commit f6db00a
Showing 1 changed file with 27 additions and 27 deletions.
54 changes: 27 additions & 27 deletions docs/snippet.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,23 +125,23 @@ uni.showToast({

正确打开调试窗口后,显示如下:
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-window.png)

#### Elements

根据上一步,启动完成`debug`窗口后,可以看到`Elements``Elements` 主要显示当前页面的组织结构,目前`Elements`只支持`nvue`
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-elements.png)

#### console.log打日志
`console.log`是我们日常开发最常用的调试方法,`HBuilderX`中当然也不能少。
- App端提供真机运行的`console.log`日志输出,运行到真机或模拟器时,不用点`debug`按钮,操作手机,会在`HBuilderX`的控制台直接输出日志。

- 如果是比较复杂的逻辑,那就推荐使用调试工具重的`console`了。根据上一步,启动完成`debug`窗口后,执行`console.log`方法就可以看到打印的内容了。

`debug`窗口中看`console.log`的方法如下图:

![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-console-new.jpg)



#### Elements

根据上一步,启动完成`debug`窗口后,可以看到`Elements``Elements` 主要显示当前页面的组织结构,目前`Elements`只支持`nvue`
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-elements.png)

#### console.log打日志
`console.log`是我们日常开发最常用的调试方法,`HBuilderX`中当然也不能少。
- App端提供真机运行的`console.log`日志输出,运行到真机或模拟器时,不用点`debug`按钮,操作手机,会在`HBuilderX`的控制台直接输出日志。

- 如果是比较复杂的逻辑,那就推荐使用调试工具中的`console`了。根据上一步,启动完成`debug`窗口后,执行`console.log`方法就可以看到打印的内容了。

`debug`窗口中看`console.log`的方法如下图:

![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-console-new.jpg)



#### 调试页面
在调试窗口控制台的 `Sources` (图中指示1) 栏,可以给 `js` 打断点调试。
Expand All @@ -153,16 +153,16 @@ uni.showToast({
之后,在设备上进行操作,进入断点位置,可以方便我们跟踪调试代码。

![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-breakpoint.png)

#### 同步断点到调试器
当然,如果你觉得从一堆代码中,找到自己的业务代码比较困难的话,`HBuilderX`的调试还提供一个强大的功能,那就是可以直接在编辑器中打断点,断点会自动同步到调试工具中。

操作步骤:只需要在需要打断点打代码部分,右击,就会出来同步断点到调试器,然后点击就好了。下面就是演示图:

![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-console-light.gif)

注意:`vue``nvue`都支持使用同步断点到调试器的方式去打断点。


#### 同步断点到调试器
当然,如果你觉得从一堆代码中,找到自己的业务代码比较困难的话,`HBuilderX`的调试还提供一个强大的功能,那就是可以直接在编辑器中打断点,断点会自动同步到调试工具中。

操作步骤:只需要在需要打断点打代码部分,右击,就会出来同步断点到调试器,然后点击就好了。下面就是演示图:

![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-console-light.gif)

注意:`vue``nvue`都支持使用同步断点到调试器的方式去打断点。


Tip
- `debug`仅支持自定义组件模式。如果是非自定义组件模式,请在`manifest`里配置选为自定义组件模式。非自定义组件模式即将停止支持,[详见](https://ask.dcloud.net.cn/article/36385)
Expand Down

0 comments on commit f6db00a

Please sign in to comment.