调试

除了使用浏览器的调试工具来完成开发中的调试外，Umi 还推荐以下调试方式来协助项目的调试。

调试 dev 产物

如果你需要在 dev 阶段调试项目的构建产物，以 umi.js 举例。先将原来的 umi.js 下载到当前项目根目录下。根据调试需要进行编辑后，刷新浏览器，项目使用的 umi.js 就替换成了根目录下的 umi.js 文件。如果调试完毕需要恢复，直接删除根目录的 umi.js 即可。

举例：

# 下载当前项目的 umi.js
$curl http://127.0.0.1:8000/umi.js -O

# 增加想调试的内容，举例增加 "debug!!!" 弹窗
$ echo -e  '\n;alert("debug!!!");\n' >> umi.js
# 打开浏览器就能看到 alert 弹窗

# 退出调试，恢复到正常状态
$rm umi.js

以此类推即可调试其他的 JavaScript 文件。

XSwitch

如果需要在特定的域名环境调试或者验证当前的修改的代码，推荐使用 Chrome 插件 XSwitch。

xswitch-logo

假设我们想在线上项目地址 https://www.myproject.com 上调试本地代码。项目使用 https://www.myproject.com/umi.hash.js，为了验证本地的项目，需要将它替换成本地开发环境的 http://127.0.0.1:000/umi.js

首先使用环境变量 SOCKET_SERVER 启动本地环境（防止因为连接不上 socket server 导致页面不断刷新）。

$SOCKET_SERVER=http://127.0.0.1:8000/ npx umi dev

然后，在 XSwitch 中配置资源转发规则。

{
  "proxy": [
    // 数组的第 0 项的资源会被第 1 项目替换
    [
      "https://www.myproject.com/umi.2c8a01df.js",
      "http://127.0.0.1:8000/umi.js"
    ],
    // 使用正则可以方便处理分包情况下 js 资源的加载
    [
      "https://www.myproject.com/(.*\.js)",
      "http://127.0.0.1:8000/$1",
    ],
    // 如果需要验证视觉表现，不要忘记替换 css 资源
    [
      "https://www.myproject.com/umi.ae8b10e0.css",
      "http://127.0.0.1:8000/umi.css"
    ]
  ]
}

刷新页面，正式域名下的内容就被替换了，这个时候就能方便的指定环境下调试了。

如果要退出调试，关闭 XSwitch 插件功能即可。

turn-off-xswitch

💡

经常使用 XSwitch 的话，可新建一个规则保存。

rule

调试

调试 dev 产物

XSwitch

💡

TABLE OF CONTENTS