JavaScriptでオブジェクトのプロパティの変更をブレークする

はじめに

先日業務中にとあるシステムのプログラムでとある配列の先頭に不正な値が挿入されていることが判明し、その修正対応をしていました。
Developer Toolで配列の要素の変更とかをトリガーにブレークできたりしないかなーって思ったら、そういった機能はなさそうでした。
しかし、配列に変更を加えている箇所を1つ1つ確認するのも面倒だったので、なんとかしてやれないか調査していました。

結論

https://stackoverflow.com/questions/11618278/breakpoint-on-property-change
Stack Overflowに答えがありました。

例:

// 対象オブジェクト
const obj = {
    someProp: 10
};

// 検査対象プロパティを別プロパティへ退避
obj._someProp = obj.someProp;

// アクセッサーを上書き
Object.defineProperty(obj, 'someProp', {
    get: function () {
        return obj._someProp;
    },
    set: function (value) {
        debugger; // ブレーク
        obj._someProp = value;
    }
});

要するに検査対象プロパティの処理を上書きして、値が変更されるところでdebuggerステートメントでブレークポイントを貼るということですね。

配列でもやってみる

JavaScriptでは配列はオブジェクトの一部なので、配列の変更に関しても同じ考えが適用できそうです。
私のケースでは先頭の要素の変更をトリガーにブレークできればよいので、以下のようにしました。

const obj = 対象配列;

// 配列の先頭要素を退避
obj._headEle = obj[0];

// 配列オブジェクトの「0」プロパティのアクセッサを上書き
Object.defineProperty(obj, '0', {
    get: function() {
      return obj._headEle;
    },
    set: function(value) {
      debugger; // ブレーク
      obj._headEle = value;
    }
});

lengthプロパティでもできそうですが、配列オブジェクトのlengthプロパティは上書きできないようになっており、上書きしようとするとエラーが発生してしまいます。

このコードを適当なアプリケーション初期処理内で実行することで、原因箇所を特定し、無事問題を修正することができました。