如何在浏览器控制台获取网页动态JS执行生成的clientTxnId属性值

你之前的写法未生效有两个核心原因：一是你要获取的multiLapJourneyDetails所属的实例没有挂载到window全局下，二是你没有等待initAvlFareEnq方法执行完成就触发取值逻辑。根据使用场景不同，可以选择对应的实现方式：

场景1：直接在浏览器控制台手动取值 #

• 断点调试法：打开控制台「Sources」面板，找到initAvlFareEnq方法的代码，在方法最后一行（clientTxnId赋值完成的位置）打上断点。触发方法执行后断点会命中，此时在控制台直接输入this.multiLapJourneyDetails.clientTxnId即可拿到对应值。
• 方法劫持法：如果不想打断点，可以在控制台直接运行以下代码劫持原方法，执行完成后自动打印结果并挂载到window全局：

// 请将下方的targetInstance替换为initAvlFareEnq所属的实际实例对象
const originalMethod = targetInstance.initAvlFareEnq;
targetInstance.initAvlFareEnq = function(...args) {
  const result = originalMethod.apply(this, args);
  const targetValue = this.multiLapJourneyDetails.clientTxnId;
  console.log('clientTxnId取值为：', targetValue);
  // 挂载到全局方便随时取用
  window.__clientTxnId = targetValue;
  return result;
}

如果找不到实例的挂载位置，可以先在原方法内打断点，命中后在控制台打印this查看实例的构造函数和挂载路径，大部分单页应用的根实例都会挂载到window下的某个属性（比如window.app、window.vueRoot等）。

场景2：使用Nightmare自动化获取取值 #

你需要在evaluate中加入等待逻辑，确保方法执行完成后再返回结果，参考代码如下：

nightmare
  // 先完成触发initAvlFareEnq执行的前置操作，比如点击查询按钮
  .click('#trigger-btn')
  .evaluate(function() {
    return new Promise((resolve) => {
      // 替换为实际的实例挂载路径
      const targetInstance = window.app;
      const originalFn = targetInstance.initAvlFareEnq;
      targetInstance.initAvlFareEnq = function(...args) {
        const res = originalFn.apply(this, args);
        // 方法执行完成后返回目标值
        resolve(this.multiLapJourneyDetails.clientTxnId);
        return res;
      }
    })
  })
  .then(function(clientTxnId) {
    // 这里拿到目标值，执行后续逻辑
    console.log('获取到的clientTxnId：', clientTxnId);
  })

如果你不想劫持方法，也可以用轮询方式等待值生成：

nightmare.evaluate(function() {
  return new Promise((resolve) => {
    const timer = setInterval(() => {
      // 替换为实际的实例访问路径
      const targetVal = window.app?.multiLapJourneyDetails?.clientTxnId;
      if (targetVal) {
        clearInterval(timer);
        resolve(targetVal);
      }
    }, 200);
  })
}).then(clientTxnId => {
  // 处理目标值
})

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