From f6db00a89a12a81735195c50db0c67dec8330efe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=89=91=E6=96=A9=E7=BA=A2=E5=B0=98?= <42025073+xuanyuan9595@users.noreply.github.com> Date: Mon, 7 Oct 2019 00:00:17 +0800 Subject: [PATCH] Update snippet.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 错别字 --- docs/snippet.md | 54 ++++++++++++++++++++++++------------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/docs/snippet.md b/docs/snippet.md index 22ff9a554..cca8427b7 100644 --- a/docs/snippet.md +++ b/docs/snippet.md @@ -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` 打断点调试。 @@ -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) -- GitLab