前端——移动端调试技巧与工具推荐

// 基础日志输出
console.log('普通日志信息')
console.info('信息性日志')
console.warn('警告信息')
console.error('错误信息')

// 对象和数组调试
const user = { name: '张三', age: 25, skills: ['JavaScript', 'Vue'] }
console.table(user.skills) // 表格形式展示数组
console.dir(user) // 展示对象详细信息

// 分组日志
console.group('用户信息')
console.log('姓名:', user.name)
console.log('年龄:', user.age)
console.groupEnd()

// 计时器
console.time('数据加载')
// 模拟数据加载
setTimeout(() => {
  console.timeEnd('数据加载')
}, 1000)

// 条件日志
const debugMode = true
debugMode && console.log('调试模式开启')

// 使用debugger语句
function calculateTotal(items) {
  let total = 0
  items.forEach(item => {
    debugger // 设置断点
    total += item.price * item.quantity
  })
  return total
}

// 条件断点
function processUser(user) {
  if (user.age < 18) {
    debugger // 只在特定条件下暂停
  }
  // 处理用户逻辑
}

// 设备模拟
// 1. 打开Chrome DevTools (F12)
// 2. 点击设备切换按钮 (Ctrl+Shift+M)
// 3. 选择目标设备或自定义设备参数

// 网络限制模拟
// 在Network面板中选择不同的网络条件：
// - Fast 3G
// - Slow 3G
// - Offline
// - Custom...

// CPU节流模拟
// 在Performance面板中可以模拟不同的CPU性能

// iOS Safari调试设置
// 1. iPhone设置 -> Safari -> 高级 -> Web检查器（开启）
// 2. Mac Safari -> 开发 -> [设备名] -> 选择要调试的页面

// 注意：需要使用Safari浏览器打开网页才能调试

// 微信小程序调试技巧

// 1. 使用console输出调试信息
Page({
  data: {
    userInfo: null
  },
  
  onLoad() {
    console.log('页面加载')
    this.loadUserInfo()
  },
  
  async loadUserInfo() {
    try {
      console.time('用户信息加载')
      const userInfo = await getUserInfo()
      console.log('用户信息:', userInfo)
      this.setData({ userInfo })
    } catch (error) {
      console.error('加载用户信息失败:', error)
    } finally {
      console.timeEnd('用户信息加载')
    }
  }
})

// 2. 使用微信开发者工具的Storage面板查看本地存储
// 3. 使用Network面板监控网络请求
// 4. 使用Console面板执行JavaScript代码

// 使用vConsole进行移动端调试
import VConsole from 'vconsole'

// 在开发环境中启用vConsole
if (process.env.NODE_ENV === 'development') {
  new VConsole()
}

// vConsole功能：
// - Console日志查看
// - 网络请求监控
// - 元素检查
// - Storage查看
// - 性能分析

// Axios请求拦截器
import axios from 'axios'

// 请求拦截器
axios.interceptors.request.use(
  config => {
    console.log('🚀 请求发送:', {
      url: config.url,
      method: config.method,
      params: config.params,
      data: config.data
    })
    return config
  },
  error => {
    console.error('❌ 请求错误:', error)
    return Promise.reject(error)
  }
)

// 响应拦截器
axios.interceptors.response.use(
  response => {
    console.log('✅ 响应接收:', {
      url: response.config.url,
      status: response.status,
      data: response.data
    })
    return response
  },
  error => {
    console.error('❌ 响应错误:', {
      url: error.config?.url,
      status: error.response?.status,
      message: error.message
    })
    return Promise.reject(error)
  }
)

// Fetch API封装带日志
async function fetchWithLog(url, options = {}) {
  console.log('🚀 请求发送:', { url, ...options })
  
  try {
    const response = await fetch(url, options)
    const data = await response.json()
    
    console.log('✅ 响应接收:', {
      url,
      status: response.status,
      data
    })
    
    return { response, data }
  } catch (error) {
    console.error('❌ 请求失败:', { url, error })
    throw error
  }
}

// 页面加载性能监控
window.addEventListener('load', () => {
  // 获取性能数据
  const perfData = performance.getEntriesByType('navigation')[0]
  
  console.log('⏱️ 页面加载性能:', {
    DNS查询: perfData.domainLookupEnd - perfData.domainLookupStart,
    TCP连接: perfData.connectEnd - perfData.connectStart,
    请求响应: perfData.responseEnd - perfData.requestStart,
    DOM解析: perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart,
    总加载时间: perfData.loadEventEnd - perfData.loadEventStart
  })
})

// 函数执行时间监控
function performanceWrapper(fn, name) {
  return function(...args) {
    const start = performance.now()
    const result = fn.apply(this, args)
    const end = performance.now()
    
    console.log(`⏱️ ${name} 执行时间: ${(end - start).toFixed(2)}ms`)
    return result
  }
}

// 使用示例
const heavyFunction = performanceWrapper(() => {
  // 模拟耗时操作
  for (let i = 0; i < 1000000; i++) {
    Math.random()
  }
}, 'heavyFunction')

heavyFunction()

// 内存使用情况监控
function logMemoryUsage() {
  if ('memory' in performance) {
    const memory = performance.memory
    console.log('💾 内存使用情况:', {
      已使用: Math.round(memory.usedJSHeapSize / 1024 / 1024) + 'MB',
      总量: Math.round(memory.totalJSHeapSize / 1024 / 1024) + 'MB',
      限制: Math.round(memory.jsHeapSizeLimit / 1024 / 1024) + 'MB'
    })
  }
}

// 定期监控内存使用
setInterval(logMemoryUsage, 5000)

// 触摸事件调试
function debugTouchEvents(element) {
  const events = ['touchstart', 'touchmove', 'touchend', 'touchcancel']
  
  events.forEach(eventType => {
    element.addEventListener(eventType, (e) => {
      console.log(`👆 ${eventType}:`, {
        touches: e.touches.length,
        targetTouches: e.targetTouches.length,
        changedTouches: e.changedTouches.length,
        clientX: e.touches[0]?.clientX,
        clientY: e.touches[0]?.clientY
      })
    })
  })
}

// 使用示例
debugTouchEvents(document.getElementById('touch-area'))

// 简单的手势识别调试
class GestureDebugger {
  constructor(element) {
    this.element = element
    this.startX = 0
    this.startY = 0
    this.init()
  }
  
  init() {
    this.element.addEventListener('touchstart', this.handleTouchStart.bind(this))
    this.element.addEventListener('touchmove', this.handleTouchMove.bind(this))
    this.element.addEventListener('touchend', this.handleTouchEnd.bind(this))
  }
  
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX
    this.startY = e.touches[0].clientY
    console.log('👉 手势开始:', { x: this.startX, y: this.startY })
  }
  
  handleTouchMove(e) {
    const currentX = e.touches[0].clientX
    const currentY = e.touches[0].clientY
    const deltaX = currentX - this.startX
    const deltaY = currentY - this.startY
    
    console.log('👉 手势移动:', {
      deltaX,
      deltaY,
      distance: Math.sqrt(deltaX * deltaX + deltaY * deltaY)
    })
  }
  
  handleTouchEnd(e) {
    console.log('👉 手势结束')
  }
}

// 使用示例
new GestureDebugger(document.getElementById('gesture-area'))

// 全局错误捕获
window.addEventListener('error', (e) => {
  console.error('💥 JavaScript错误:', {
    message: e.message,
    filename: e.filename,
    lineno: e.lineno,
    colno: e.colno,
    error: e.error
  })
})

// Promise错误捕获
window.addEventListener('unhandledrejection', (e) => {
  console.error('💥 Promise错误:', {
    reason: e.reason,
    promise: e.promise
  })
  e.preventDefault() // 阻止默认的错误处理
})

// Vue错误处理
Vue.config.errorHandler = (err, vm, info) => {
  console.error('💥 Vue错误:', {
    error: err,
    component: vm.$options.name,
    info
  })
}

// React错误边界
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true }
  }
  
  componentDidCatch(error, errorInfo) {
    console.error('💥 React错误:', { error, errorInfo })
  }
  
  render() {
    if (this.state.hasError) {
      return <h1>出现错误</h1>
    }
    return this.props.children
  }
}

// 简单的日志收集系统
class Logger {
  constructor() {
    this.logs = []
    this.maxLogs = 100
  }
  
  log(level, message, data) {
    const logEntry = {
      timestamp: new Date().toISOString(),
      level,
      message,
      data,
      url: window.location.href,
      userAgent: navigator.userAgent
    }
    
    this.logs.push(logEntry)
    
    // 限制日志数量
    if (this.logs.length > this.maxLogs) {
      this.logs.shift()
    }
    
    // 同时输出到控制台
    console[level](`[${level.toUpperCase()}] ${message}`, data)
  }
  
  info(message, data) {
    this.log('info', message, data)
  }
  
  warn(message, data) {
    this.log('warn', message, data)
  }
  
  error(message, data) {
    this.log('error', message, data)
  }
  
  // 获取日志用于上报
  getLogs() {
    return this.logs
  }
  
  // 清空日志
  clear() {
    this.logs = []
  }
  
  // 上报日志到服务器
  async report() {
    try {
      await fetch('/api/logs', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.logs)
      })
      this.clear()
    } catch (error) {
      console.error('日志上报失败:', error)
    }
  }
}

// 使用示例
const logger = new Logger()
logger.info('应用启动')
logger.error('数据加载失败', { userId: 123 })

<!-- 在页面中引入Eruda -->
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init()</script>

// 安装vConsole
npm install vconsole

// 在项目中使用
import VConsole from 'vconsole'

// 开发环境下启用
if (process.env.NODE_ENV === 'development') {
  new VConsole()
}

# 安装weinre
npm install -g weinre

# 启动weinre服务器
weinre --boundHost IP_ADDRESS

# 在页面中引入脚本
<script src="http://IP_ADDRESS:8080/target/target-script-min.js"></script>

// 调试配置
const DEBUG_CONFIG = {
  development: {
    enableConsole: true,
    enableVConsole: true,
    logLevel: 'debug'
  },
  production: {
    enableConsole: false,
    enableVConsole: false,
    logLevel: 'error'
  }
}

const currentEnv = process.env.NODE_ENV || 'development'
const config = DEBUG_CONFIG[currentEnv]

// 根据环境启用调试工具
if (config.enableVConsole) {
  const VConsole = require('vconsole')
  new VConsole()
}

// 调试开关管理
class DebugManager {
  constructor() {
    this.enabled = this.getDebugFlag()
  }
  
  getDebugFlag() {
    // 通过URL参数控制调试
    const urlParams = new URLSearchParams(window.location.search)
    return urlParams.get('debug') === 'true' || 
           localStorage.getItem('debug_mode') === 'true'
  }
  
  log(...args) {
    if (this.enabled) {
      console.log(...args)
    }
  }
  
  warn(...args) {
    if (this.enabled) {
      console.warn(...args)
    }
  }
  
  error(...args) {
    if (this.enabled) {
      console.error(...args)
    }
  }
}

const debug = new DebugManager()
debug.log('这是一条调试信息')