Webpack打包后如何在Chrome控制台测试JS/TS代码

完全可以在不依赖前端模块集成进度的前提下，直接在Chrome控制台调用你写的TypeScript函数做测试，以下是几种开发环境常用的方案，不会影响正式生产构建：

• 开发环境全局挂载待测试函数
  不需要额外装插件，直接在你编写的后端TS模块里加环境判断，仅开发模式下把要测试的方法挂到window全局对象上即可，示例代码：

  // 你负责的后端业务模块，比如 src/backend/service/order.ts
  export function queryOrderList(orderStatus: number, pageNum: number) {
    // 自行编写的业务逻辑
    return fetch(`/api/order/list?status=${orderStatus}&page=${pageNum}`).then(res => res.json())
  }
  
  // 仅开发环境生效，生产环境构建时会被tree-shaking移除
  if (process.env.NODE_ENV === 'development') {
    (window as any).backendTest = {
      queryOrderList
      // 其他需要测试的函数都可以统一放到这个对象下
    }
  }
  

  改完重启webpack开发服务，打开Chrome控制台直接输入window.backendTest.queryOrderList(1, 1)就能传参调用，和调用普通JS函数完全一致，TS的类型检查也会在编译阶段正常触发，不会因为挂全局就跳过校验。
• 借助SourceMap直接在源文件上下文调试
  只要webpack开发配置开启了SourceMap（大部分脚手架默认开的eval-cheap-module-source-map模式），打开Chrome DevTools的Sources面板，按文件路径找到你写的TS源文件，在目标函数位置打个断点，触发断点后直接在控制台对应上下文里传参调用函数即可，不需要改任何业务代码。
• 配置独立调试入口
  如果不想污染业务代码的全局作用域，可以单独新建一个调试用的HTML入口和TS入口文件，在webpack配置里加一条开发环境专属的路由规则，访问/debug路径时就加载只包含你后端模块的调试包，在这个调试入口里统一暴露待测试方法，正常业务路由完全不受影响，等前端模块集成完成后直接删掉调试入口和对应配置即可。

注意：所有调试相关的全局挂载、独立入口配置都必须加开发环境判断，确保不会被打包到生产环境代码中，避免造成全局变量污染、内部接口逻辑泄露的问题。

内容的提问来源于stack exchange，提问作者pggu11