javascript - 如何在java脚本中找到修改数据的代码

Question

假设有一个 json 数据存储在一个变量中，并且多个函数正在修改数据。javascript 或开发工具中有什么方法可以找到哪些代码修改了数据。

var employeeDetails = {
  name: "John",
  age: 22
}

function updateEmployeeDetails1() {
  employeeDetails.age = employeeDetails.age + 1;
  console.log("In employeeDetails1()", employeeDetails)
}

function updateEmployeeDetails2() {
  employeeDetails.name = employeeDetails.name + "Papa";
  console.log("employeeDetails2()", employeeDetails);
}

function sayHello() {
  console.log("HELLO");
}

updateEmployeeDetails1();
updateEmployeeDetails2();
sayHello();

有没有办法检查哪个方法修改了employeeDetails 对象，特别是一个属性（“让我们说名字”）？

标签： javascriptgoogle-chrome-devtools

Answer 1

简单的解决方案是在函数中设置断点并逐步执行代码以更好地了解正在发生的事情。

另一种方法是覆盖对象的 setter 和 getter 函数，并在更改此变量时动态中断代码。这样做的好处是您不需要找到更改变量的所有位置。

https://jsfiddle.net/8t3czxkb/2/

var employeeDetails = {
  age: 22,
  name: "John"
};

//Debug object properties

debugObject = (obj) => {
  for (const prop of Object.keys(obj)) {
    Object.defineProperty(obj, prop, {
      get: function() {
        console.log("get " + prop);
        debugger; 
        return this["_" + prop];
      },
      set: function(value) {
        this["_" + prop] = value;
        debugger;
        console.log("set " + prop);

      }
    })
  }
}

debugObject(employeeDetails);

employeeDetails.name = "John";

function updateEmployeeDetails1() {
  employeeDetails.age = employeeDetails.age + 1;
  console.log("In employeeDetails1()", employeeDetails);
}

function updateEmployeeDetails2() {
  employeeDetails.name = employeeDetails.name + "Papa";
  console.log("employeeDetails2()", employeeDetails);
}

updateEmployeeDetails1();
updateEmployeeDetails2();