画布 1
前端开发调试思路
  常规
    debugger
      阻塞
    alert
      阻塞
    console.log
      日志级别
        console.info
        console.error
        console.warn
        console.debug
      时间
        console.time和console.timeEnd
      清空
        console.clear()
      回放与选择
        $_
          上一个表达式
        $0
          当前选择的DOM
      表格输出
        console.table
      显示对象的所有属性与方法
        console.dir
      组别输出
        console.group
    断点调试
      单步
      多步
      监视变量
  针对框架
    Vue DevTools
      Chrome插件
        隐私设置
        访问设置
      非支持浏览器
        安装
          全局
            npm install -g @vue/devtools
          项目
            npm install --save-dev @vue/devtools
        运行
          vue-devtools
        使用
          本地
            <script src="http://localhost:8098"></script>
          远程
            <script>
window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>
            应用场景
              移动端
              Electron桌面端
          依赖安装方式
            import devtools from '@vue/devtools'
            if (process.env.NODE_ENV === 'development') {
devtools.connect(/* host, port */)
}
            应用场景
              移动端
              Electron桌面端
        常见问题
    React DevTools
      同上
  针对场景
    性能
      Lighthouse
      WebPageTest
      PageSpeed Insights
    动画
      Animation(Chrome)
  Nodejs调试
    调试脚本
    调试执行过程
      学习源码
      了解执行过程
  真机调试
    内网穿透方案
      frp
      ngrok
      localtunnel
      webhook.site
      smee.io
    移动端调试包
      vConsole
        推荐
      Eruda
        推荐
      JsConsole
        不推荐
      Whistle
        推荐
      Weinre
        不更新了
      Spy-debugger
        一般
    抓包工具
      Charles
        MacOS
      Fiddler
      Wireshark
        跨端
        推荐
      mitmproxy
        推荐