UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Chrome】Chrome106の Dev Toolsを使ったモダンなデバッグ

Chrome106の Dev Toolsを使ったモダンなデバッグの話

developer.chrome.com

ローカル開発していてブラウザ確認するときに、ブラウザーが読み取ったminifiedされたbundleは読みづらいので、バンドル前の状態でデバッグができるようになるオプションが追加された

[Settings] > [ Experiments ] に移動し、[ Group sources into Authored and Deployed trees ]をオンにすると試すことができる

sources タブを開くとwebpackのツリーがでている、かつ、開くとbundle前の実装に近いコードが表示された

さらにその上でフレームワークとバンドラーがつくるコードをDevTools から自動的に非表示にするオプションも追加され、それをオンにするとスタックトレースなどがみやすくなる模様

あまりピンときてないが、デバッグがやりづらいと感じたら思い出して試してみたい