[Dev実験室] 便利なツールを把握して生産性あげましょう回

https://am7cinnamon.hatenablog.com/entry/useful-browser-extensions
https://developer.smartnews.com/blog/2021/03/chrome_tracing/
https://murashun.jp/article/performance/chrome-devtools.html
https://ics.media/entry/190517/
https://speakerdeck.com/daikimiura/upgrow
https://patorash.hatenablog.com/entry/2020/07/02/165320
https://tech.misoca.jp/entry/2020/08/21/134341

JSのデバッガー　インラインJSにも使えるっぽい

JSデバッガー　Closureの変数見れるの良い

スクロールのイベントの場合は、連続した値が見たいから console.log使いがち

console.logで色々展開したりできるよ

hoge = 123
console.log({hoge})
console.log('すごいコメント', {hoge})

$0 で直前に選択したDOMを参照できる
https://qiita.com/Tsuyoshi84/items/4ada593c76b0a1339b6e#直近に選択した要素の参照

document.designMode = "on"

で全てを contentEditable にできる

https://qiita.com/ryo2132/items/d02863bddbd0c86efa4a#apx-画面上で自由にテキスト編集

DOM BreakpointsはどのJSからDOMが変更されているか追いかけるのに使えそう
知らぬ間にDOMが消えるとか、謎の干渉が起きてるときに使うイメージ

https://murashun.jp/article/performance/chrome-devtools.html#:~:text=MDN-,dom breakpoints,-DOM