调试指南

本文档介绍项目调试的常用技巧和工具。

检查环境配置

验证 BASE_URL

# 查看 src/utils/config.js 中的 BASE_URL 配置
cat src/utils/config.js | grep BASE_URL

确保：

• 开发环境指向测试服务器
• 生产环境指向正式服务器

检查业务参数

// src/utils/config.js
REQUEST_DEFAULT_PARAMS: {
  f: 'your_module',        // 业务模块标识符
  client_name: 'your_app'  // 应用名称
}

---

验证身份认证

检查 sessionid

// 在浏览器控制台或微信开发者工具中执行
console.log(localStorage.sessionid)

启用详细日志

在 src/utils/request.js 拦截器中启用详细日志：

// 请求拦截器
config.headers = {
  'cookie': `sessionid=${localStorage.sessionid}`,
  // 添加调试日志
  'X-Debug': 'true'
}

console.log('[Request]', config.url, config.data)

测试 401 刷新流程

// 1. 清除 sessionid 模拟过期
localStorage.removeItem('sessionid')

// 2. 发送请求触发 401
await fn(someAPI())

// 3. 观察是否自动刷新并重试

---

网络问题调试

检查网络状态

import Taro from '@tarojs/taro'

// 获取网络类型
Taro.getNetworkType({
  success: (res) => {
    console.log('网络类型:', res.networkType)
    // wifi, 4g, 5g, none
  }
})

// 监听网络变化
Taro.onNetworkStatusChange((result) => {
  console.log('网络状态变化:', result)
})

检查弱网络场景

项目支持弱网络降级，通过以下方式检测：

// src/utils/request.js
import { is_timeout_error, is_network_error } from '@/utils/network'

try {
  const res = await fn(yourAPI())
} catch (err) {
  if (is_timeout_error(err)) {
    console.log('请求超时')
  } else if (is_network_error(err)) {
    console.log('网络错误')
  }
}

---

样式问题调试

确认设计宽度

项目中使用双设计宽度系统：

• NutUI 组件：375px
• 其他组件：750px

// config/index.js
designWidth: 750,  // 默认

// NutUI 特殊配置
nutui: {
  designWidth: 375
}

检查样式应用

<template>
  <!-- 添加调试类名 -->
  <view class="debug-component">
    内容
  </view>
</template>

<style lang="less" scoped>
.debug-component {
  /* 调试边框 */
  border: 1px solid red;
}
</style>

验证 TailwindCSS 类

# 检查 TailwindCSS 配置
cat tailwind.config.js

# 检查类是否生效
# 在微信开发者工具中查看元素的 computed styles

---

导航问题调试

检查路由注册

// src/app.config.js
export default {
  pages: [
    'pages/your-page/index',  // 确认已注册
  ]
}

验证页面目录结构

# 确认页面文件存在
ls -la src/pages/your-page/

# 应该包含：
# - index.vue
# - index.config.js

调试导航参数

// 发送页面
go('/pages/detail/index', { id: 123 })

// 接收页面
useLoad((options) => {
  console.log('接收到的参数:', options)
  console.log('ID:', options.id)  // 应该输出 123
})

---

API 问题调试

查看 API 请求

// src/utils/request.js
// 在拦截器中添加日志
interceptors.request.use((config) => {
  console.log('[API Request]', {
    url: config.url,
    method: config.method,
    data: config.data,
    headers: config.headers
  })
  return config
})

interceptors.response.use((response) => {
  console.log('[API Response]', {
    status: response.status,
    data: response.data
  })
  return response
})

测试 API 调用

// 独立测试 API
import { yourAPI } from '@/api'
import { fn } from '@/api/fn'

async function testAPI() {
  try {
    const url = yourAPI({ id: 123 })
    console.log('API URL:', url)

    const res = await fn(url)
    console.log('API Response:', res)

    if (res.code === 1) {
      console.log('API 调用成功')
    } else {
      console.log('API 业务错误:', res.msg)
    }
  } catch (err) {
    console.error('API 网络错误:', err)
  }
}

testAPI()

---

常见问题

Q: NutUI 组件样式不生效

A: 检查设计宽度配置，NutUI 使用 375px 设计宽度：

// config/index.js
nutui: {
  designWidth: 375  // 确认配置正确
}

Q: 页面参数接收不到

A: 检查以下几点：

1. 确认使用 useLoad 接收参数
2. 确认参数名称正确
3. 确认参数类型（数字 vs 字符串）

useLoad((options) => {
  console.log(options)  // 先打印看看有什么
})

Q: API 请求不发送

A: 检查以下几点：

1. 确认 BASE_URL 配置正确
2. 确认网络权限
3. 查看控制台是否有错误
4. 检查 request.js 拦截器

Q: 组件不更新

A: 可能的原因：

1. 响应式数据未正确声明
2. 使用了深度嵌套的对象
3. Key 值未正确设置

// 确保使用 ref 或 reactive
const data = ref(null)  // ✅
const data = null       // ❌

// 列表使用 key
<view v-for="item in list" :key="item.id">  // ✅
<view v-for="item in list">                 // ❌

---

调试工具

微信开发者工具

• Console - 查看日志输出
• Network - 查看网络请求
• AppData - 查看 AppData 数据
• Storage - 查看 localStorage
• Wxml - 查看 DOM 结构

Vue DevTools

Taro 支持 Vue DevTools，可以：

• 查看组件树
• 查看 Vuex/Pinia 状态
• 查看事件监听器

---

相关文档

• API 集成指南 - API 调用详解
• 最佳实践 - 代码质量建议