外部ファイルを使用する場合の該当する箇所の見つけ方

Question

自身で作成しているサイトがあるのですが、
semantic UIを使用しおり、そのaccordionを使っているのですが
accordionを開くと
下記のdisplayに自動的にブロックプロパティが付与されてしまい、これをflexプロパティにしたいと考えております。

これに影響を与えていると思われる、
semantic.js
ファイルを見る限り21711行目の
.css('display', 'block')
を無効にすれば良いのかと思ったのですが、これをコメントアウトしても
開くたびにロックプロパティが付与されてしまいます。

例えば、外部のJSファイルをカスタムしたい場合に、どの箇所が影響を与えているか解読したい場合に
このように該当箇所が容易に見つけることができません。。。

使用しているのはgoogle develooer toolなのですが、
本件の解決方法や、実務上のコツがあれば、ぜひアドバイスを頂きたく思います。

よろしくお願い申し上げます。

サイト

<div id="line_1st" style="display: block !important;" class="transition visible">
</div>

Answer 1

調べる方法は一応あります。
ちょっとひと手間かかりますが、

const line1st = document.querySelect('#line_1st');
const orgStyle = hoge.style;
// スタイルオブジェクトのプロキシオブジェクトを生成
const proxyStyle = Object.assign({}, orgStyle); 
// styleプロパティにプロキシオブジェクトをセット
hoge.style = proxyStyle;

// プロキシオブジェクトをフック
Object.defineProperty(proxyStyle, 'display', {
  get: _ => {
    debugger;
    return orgStyle.display;
  },
  set: value => {
    debugger;
    console.log('set display', value);
    orgStyle.display = value;
  }
});

といったコードを仕込み、devTools立ち上げてページをリロードすれば、displayスタイルを設定したときに止まるので、
あとはコールスタック辿ればどこで設定しているのかを調べることができます。

Comments

[SugiuraY]

コメントありがとうございます！
このようなデバッギングの技術があり、またdeveloper tooに備わっていることに目から鱗で強烈に感動しております。実際にコールスタックで該当しているコードを見つけることができました。
一方で、MDNの関連サイトを見ても、このコードどのように機能しているかどうしても理解できなかったため、よければ今後の大きな財産になりそうなので、申し訳ございませんが、重ねてお尋ねさせてください。

・const orgStyle = line1st.style;
←これはScriptのorgStyleプロパティにその要素のスタイルのエレメントを定数として格納する意味であると思います。これを退避と表現されましたが、具体的にどのような効果があるのでしょうか？

・Object.defineProperty(line1st.style, 'display', {
set: val => {
debugger;}
});

ここの箇所が調べたのですが、解読できませんでした。。
MDNにはdefinePropertyについて以下の通り解説があります
"指定されたオブジェクトに新しいプロパティを定義したり、既存のプロパティを変更したりします。戻り値は指定されたオブジェクトをそのまま返します。"

また、debugger;は
"debugger ステートメントは、ブレークポイントの設定のような任意の利用可能なデバッグ機能を呼び出します。デバッグ機能が利用可能ではない場合、このステートメントは効果がありません。"とあります。

set: val => {
});に関する文法を見つけることができなかったので、特にここの箇所がわからないんのですが、なぜこのようなコードを組むことによって、特定の要素のdisplayプロパティが変化するタイミングで処理を止めてくれるのでしょうか、、call stackの画面を見ると処理が止まったタイミングで、確かにsetプロパティが表示されそのタイミングで影響を与えていると思われる外部ファイルの一覧とその箇所が表示されております。

[turbgraphics200]

ちょっと回答内容に不備がありましたので修正しました。
修正前の退避の部分は無意味でした。
ただ、line1st.style.displayをフックするので、例えば
Object.property(line1st.style, 'display', {
get: _ => {
return line1st.style.display; // ★
}
});
のように書いてしまうと、無限ループに陥ってしまいます。
編集後の回答のようにプロキシオブジェクトを生成してプロキシオブジェクトをstyleプロパティに設定し、プロキシオブジェクトをフックすることで、無限ループを回避します。
あと、Object.defineProperty(Object.definePropertiesも)において、get: や set: はプロパティのgetter, setterの設定を行うということです。

[SugiuraY]

早速、ご回答をいただき、ありがとうございます。
また、プロキシオブジェクトなど初めて見る単語がたくさんありますが、調べながら咀嚼してみます。
こんな、新しい世界を調べるのが、とても楽しいです。
ご教示をいただき、改めて深謝を申し上げます！

Answer 2

おー、不思議な挙動ですね。

https://semantic-ui.com/modules/accordion.html#/settings

のanimateChildren, closeNested, collapsible, easing等を有効にさせるために勝手に操作されている様な感じがするので、オフにしてみるともしかするとやめてくれるかもしれません。

だめだったら、その下に書かれているonOpenのcallbackを使い、開いた時にflexに戻せばいいと思います。

実務上のコツ

ということで言えば、ライブラリを改造するのはやめた方が良いと思います。引き継いだ人がなんでそんな挙動になっているのか分からず、かなりいらっとすると思います。
まずはマニュアルをしっかり読み、その範囲でできることがないかを探しましょう。

ちなみに改造するなら本家にPull Requestを送るつもりでやったほうが良いと思います。
あと、基本的にGitHubにあるようなソースをビルドして作られていると思うので、本気で改造するならちゃんとまずビルドできるようにした方が良いと思います。
（ビルドできればマップが出せたりと、問題の箇所の発見も容易になります）

Comments

[SugiuraY]

コメントありがとうございます。
animateChildrenでblockは解除できたのですが、他のchildrenがすべてhiddenになってしまう副作用が生じたのでダメでした。。複雑な動きの割には設定できるbehaviourの説明が淡白でお手上げです。。
divないを横並びにしたいだけなので、blockでも横並びにする他のアプローチで検討することになりそうです、、

[退会済みユーザー]

https://github.com/Semantic-Org/UI-Accordion/blob/master/accordion.js#L346

普通に消去してますね。