好家伙，微信小程序层级调试，伤不起啊！

大家好，我是你们的小编，今天咱们来聊聊一个让微信小程序开发者头疼的—层级调试。

层级调试啥意思？说人话！

层级调试，通俗来说就是当你的小程序页面结构比较复杂，有多层嵌套关系时，在微信开发者工具里调试起来就很麻烦。因为每次调试，都要一层一层点击菜单导航到目标页面，贼费劲！

举个栗子，假设你的小程序有这么一个目录结构：

|- pages

|- index.vue（入口页面）

|- user

|- info.vue（个人信息页面）

|- order

|- list.vue（订单列表页面）

|- detail.vue（订单详情页面）

当你需要调试 order/detail.vue 页面时，就需要在开发者工具的菜单栏里依次点击：

pages -> order -> detail

繁琐不说，还容易点错。

微信开发者工具为啥不能直接跳到目标页面？

理论上，微信开发者工具是可以直接定位到目标页面的，但是实际操作中却不行，这是因为：

1. 微信官方限制：微信小程序采用了沙盒机制，开发者工具无法直接访问沙盒内的小程序文件。

2. HBuilderX 等第三方工具限制：这些工具为了保证小程序的稳定性，也对直接访问沙盒文件进行了限制。

虽然不能直接定位目标页面，但微信开发者工具提供了另一种调试方式——启动模式。

启动模式可以配置为 header 或 list，其中：

1. header：在调试器顶部显示页面的层级结构，可以快速切换到目标页面。

2. list：在调试器右侧显示页面的列表，可以按顺序切换到目标页面。

不过，这两种方式都只能切换到当前页面的一级子页面，如果目标页面是多级嵌套的，那就只能一层一层往下点咯。

听说 HBuilderX 有个神技，可以避免层级调试的麻烦？

没错！HBuilderX 推出了一个强力外挂——代码块。

代码块可以让开发者直接在 HBuilderX 中执行自定义代码，从而实现在调试器中直接跳转到目标页面的功能。

如何使用 HBuilderX 代码块实现层级调试？步骤如下：

1. 在 HBuilderX 工具栏中选择 工具 -> 代码块设置 -> vue 代码块。

2. 打开 vue.json 设置文件。

3. 在 vue.json 文件中添加以下代码：

json

"console": "console.log('代码块被触发了！')",

"block": [

"match": "navigateTo",

"doc": "前往新页面，调用时保留当前页面，若页面不存在则自动创建并跳转至新页面。",

"params": [

"name": "url",

"type": "String",

"doc": "需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。路径必须从 navigateTo URL 路由能力开放的页面开始",

"required": true

"sample": "navigateTo('/pages/cardid/importinfo')",

"code": "console.log('navigateTo 方法被调用了！')\nuni.navigateTo({url:params.url})"

"match": "redirectTo",

"doc": "关闭当前页面，跳转到应用内的非 tabBar 的页面。",

"params": [

"name": "url",

"type": "String",

"doc": "需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。路径必须从 redirectTo URL 路由能力开放的页面开始",

"required": true

"sample": "redirectTo('/pages/cardid/importinfo')",

"code": "console.log('redirectTo 方法被调用了！')\nuni.redirectTo({url:params.url})"

"match": "navigateBack",

"doc": "关闭当前页面，返回到上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。",

"params": [

"name": "delta",

"type": "Number",

"doc": "需要返回的页面数，如果 ∆ 等于 1，则返回上一页面。",

"required": true

"sample": "navigateBack({delta: 2})",

"code": "console.log('navigateBack 方法被调用了！')\nuni.navigateBack({delta: params.delta})"

"match": "reLaunch",

"doc": "关闭所有页面，打开到应用内的某个页面。",

"params": [

"name": "url",

"type": "String",

"doc": "需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。路径必须从 reLaunch URL 路由能力开放的页面开始",

"required": true

"sample": "reLaunch('/pages/index/index')",

"code": "console.log('reLaunch 方法被调用了！')\nuni.reLaunch({url:params.url})"

4. 保存 vue.json 文件。

注意：

1. navigateTo、redirectTo、navigateBack、reLaunch 是微信小程序提供的页面导航 API。

2. block 数组中的第一个代码块匹配的是 navigateTo API，开发者可以根据需要添加其他匹配代码块。

3. url 参数是需要跳转的页面路径。

这样设置有什么好处？

使用 HBuilderX 代码块的好处多多：

1. 快速定位目标页面：开发者可以直接在代码块中指定跳转的页面路径，从而实现一键跳转。

2. 简化调试流程：避免了层层点击菜单的繁琐过程，大大提高了调试效率。

3. 扩展性强：开发者可以根据需要添加更多自定义代码块，满足不同的调试需求。

代码块使用示例：

在需要跳转到 order/detail.vue 页面的代码中添加以下代码：

javascript

uni.navigateTo({url: '/pages/order/detail'})

当调试器执行到此代码时，HBuilderX 代码块就会自动触发，直接跳转到 order/detail.vue 页面。

我不会设置，有现成的吗？

当然有！小编特地为大家准备了一份代码块设置的宝典，拿走不谢：

json

"match": "navto",

"doc": "前往新页面，调用时保留当前页面，若页面不存在则自动创建并跳转至新页面。",

"params": [

"name": "url",

"type": "String",

"doc": "需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。路径必须从 navigateTo URL 路由能力开放的页面开始",

"required": true

"code": "console.log('navto 方法被调用了！')\nuni.navigateTo({url:params.url})"

"match": "redto",

"doc": "关闭当前页面，跳转到应用内的非 tabBar 的页面。",

"params": [

"name": "url",

"type": "String",

"doc": "需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。路径必须从 redirectTo URL 路由能力开放的页面开始",

"required": true

"code": "console.log('redto 方法被调用了！')\nuni.redirectTo({url:params.url})"

"match": "back",

"doc": "关闭当前页面，返回到上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。",

"params": [

"name": "delta",

"type": "Number",

"doc": "需要返回的页面数，如果 ∆ 等于 1，则返回上一页面。",

"required": true

"code": "console.log('back 方法被调用了！')\nuni.navigateBack({delta: params.delta})"