Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ察応はしおたせん。

Overridesで本番環境のJavaScriptをデバッグするひずり DevTools Advent Calendar 2020 – 24日目

投皿日時:
カテゎリヌ: Web

最終日、24 日目の蚘事です。

本番環境でしか出ない䞍具合がある、format ずブレむクポむントでデバッグした、たぶんここをこうしたら盎るず思う、でも確蚌を埗られるたでデプロむはしたくない  そんなずきに。

本番環境の JavaScript を眮き換え曞き換えおデバッグするこずができたす。䞀蚀で蚀うずロヌカルプロキシです。

なんでもできるようになるけど本圓に本番サヌバヌに眮いおあるファむルをいじるわけではないので安心です。たあサヌバヌ偎で怜蚌ずかが甘いず倉なデヌタが API 経由で入っちゃうかもしれないのでそこら蟺だけ気を付けお。

先にたずめ

  • Source → Overrides でロヌカルプロキシ
  • 任意のファむルずマップはできない、サヌバヌで公開される構成ず察になる
  • ln 䜿えば任意のファむルずマップできる。ビルドするプロゞェクトでも䜿える

詊す

どこのサむトでも埌述の手順でやれたす。

いたここ Ginpen.com で詊すなら global.js がおすすめ。CSS は styles.css?0000 みたいなや぀です。

Overwrite を䜿う

  1. Overrides 有効化
    1. Source パネル → 巊偎サむドバヌ → Overrides
    2. Select folder for overrides で適圓なフォルダヌを遞択
    3. DevTools にアクセス蚱可を䞎える
  2. 目的のファむルを手元にコピヌ
    1. 目的のファむルを Sources パネルで開く (Ctrl+P や巊偎 Page タブなどから)
    2. 適圓に線集空癜を远加しお削陀ずかしお Ctrl+S で保存
  3. 線集しお詊す

遞択したフォルダの䞋にホスト名でディレクトリヌが䜜られ、その䞭でパスに合わせおファむルが保存されたす。

Overrides 機胜で保存しマップされおいるファむルには各所で玫色の䞞ぜちが付くので芋分けが぀きたす。たた Network パネルで譊告衚瀺があるので䜕か override しおるなヌずいうのがわかりたす。

Overrides した様子。タブやツリヌのファむル名郚分に玫色の䞞ぜちが付いおいる。たた隣の Network パネルには譊告アむコンが衚瀺されおいる。

䞀床保存した埌なら線集は必ずしも DevTools で行う必芁はありたせん。倖郚の゚ディタヌで線集しおも即反映されたす。ファむル名郚分を右クリックから “Open in containing folder” で、OS のファむラヌで開けたす。

Elements パネルで CSS 線集

ちなみに Sources → Filesystem タブでマップした堎合ず同様、ロヌカルファむルず玐づいおいる堎合は Elements → Styles タブで線集したスタむルは即時 CSS ファむルぞ保存されたす。

Overrides 利甚䞭の Elements パネルの様子。ファむルに玫色の䞞ぜちが付いおいる。

Filesystem タブに぀いおはこちら。

差し替えを停止、䞀時停止

Enable Local Overrides のチェックを倖したりフォルダヌを Remove したりするず、再びネットワヌクから取埗するようになりたす。保存したファむルは残りたす。

該圓ファむルを削陀 (右クリックからDelete) しおも、もちろんネットワヌク利甚に戻りたす。

ビルドしたファむルをデバッグ

さお牧歌的な構成ならいいんだけど、ビルドしおひず぀になったファむルはそのたたひず぀の巚倧なファむルずしおディスクに保存されたす。圓たり前だけども。

このたただず線集しづらいので、敎圢しおせめお人間が芋やすいようにするか、開発環境のファむルず ln でリンクさせるずいう 2 通りの解決方法がありたす。

敎圢

巚倧なたたでも良ければ Sources パネルで゜ヌスコヌドが衚瀺される䞻ペむンの巊䞋、敎圢ボタン”{}” みたいなや぀を抌すず改行ずか良い感じにしおくれたす。

こちらは簡単。

開発環境のファむルずハヌドリンク

こっちはちょっず面倒です。

Windows は知らないんだけど、WSL を含む Linux や macOS ならコマンドラむンから ln (link) でファむルのハヌドリンクを䜜成できたす。同じファむル実䜓を 2 か所から指せる。　これを利甚し Overrides のファむルも開発環境の出力ファむルぞリンクさせるこずで、開発環境のコヌドを本番環境で動かすこずが可胜になりたす。

䟋えばこんな構成ずしたす。

  • サヌバヌ䞊のファむル – http://localhost/static/js/bundle.js
  • Overrides で保存したファむル – ~/overrides/localhost/static/js/bundle.js
  • 開発環境の出力ファむル – ~/myProject/dist/static/js/bundle.js

こうやっお ln したす。

$ cd ~/overrides/localhost/static/js/
$ rm bundle.js
$ ln ~/myProject/output/static/js/bundle.js

あずは出力ファむルがうたいこずマップされれば、デバッガヌも元の゜ヌスコヌドを衚瀺しおくれたす。べんり。

webpack でビルドしたファむルをリンク

問題は、ln でリンクするからにはファむル出力しおいるこずが必芁だずいうこずです。そりゃそうじゃ。

こないだの VS Code で JS をデバッグする蚘事でも曞いたんだけど、webpack-dev-server はデフォルトではメモリヌ䞊にファむルを持぀ので writeToDisk オプションが必芁です。CRA は eject ずかが必芁。

Next.js は next.config.js の蚭定でやれそう、だけどやり方がわかりたせんでした。webpack-dev-server じゃなくお http-proxy-middleware ずいうのを䜿っおるらしい。

その他

JavaScript コヌドを動的に曞き換える

これ Filesystem でマップした堎合も同じなんだけど、Sources パネルでファむルを線集するず画面の再読み蟌み䞍芁で即時反映されたす。ちょっずず぀調敎みたいなずきに䟿利そう。

本番環境のサヌバヌ偎 Node.js をデバッグする

さすがにやったこずないけどやろうず思えばやれたす。Overrides は関係ないです。

詳しくはこちら。

おしたい

あんたり良くないず思い぀぀必芁に迫られお本番環境のデバッグをするなどしおいたす。いやたたにね、極たれにね

勝手に他人のサむトをデバッグするこずもできたす。

参考

DevToolsを日本語化するにはMS Edgeを䜿うひずり DevTools Advent Calendar 2020 – 23日目

投皿日時:
カテゎリヌ: Web
タグ: , ,

23 日目の蚘事です。

Chrome の蚀語蚭定を倉えるずメニュヌなどが日本語化されたすが、その状態でも DevTools は英語のたたです。Chrome ではできないんだけど、䞭身が Chromium になった新 Edge なら DevTools も日本語で利甚できたす。英語苊手な方はこっちでどうでしょう。

Edge のダりンロヌド

Mac 版は 2020 幎 1 月にリリヌスされたした。Win は最初から入っおたす。

日本語の DevTools 。Rendering パネルの各皮蚭定の説明も党お日本語になっおいる。

蚭定

最初から蚀語を反映する蚭定なので、日本語で䜿っおれば DevTools も日本語になっおいるはず。

なっおいない堎合は、以䞋の手順で日本語化したす。

  1. Edge を日本語で䜿う蚭定にする
    1. Settings → Language (edge://settings/languages)
    2. Add languages から日本語を远加
    3. 䞀芧に远加された日本語の “
” → Display Microsoft Edge in this language
    4. Edge を再起動
  2. DevTools の蚀語をブラりザヌに合わせる
    1. DevTools 蚭定 → Preferences
    2. Appearance → Match browser language をオンに

Edge DevTools の蚭定画面。

DevTools がすぐ再起動しお衚瀺の蚀語が切り替わりたす。

逆に英語で䜿いたい

元の英語で䜿い続けたい堎合は Match browser language をオフにしたす。そうしたい堎面は思い぀かないけども。

Chrome は  

件の蚭定がありたせん。なんでヌ。

Chrome DevTools の蚭定。Match browser language の項目がない。

ブラりザヌ偎の蚀語蚭定が Edge ず Chrome で違うからかな。同じように芋えるけど。

おしたい

DevTools で利甚できる蚀語は英語や日本語の他、䞭囜語、フランス語など 10 蚀語ずのこず。Windows や Edge が察応しおいる蚀語ず比べるず少ないけど、でもありがたい。

Chrome にも入るず良いなあ。

参考

VS Codeの䞭でブラりザヌを開いおCSS開発ひずり DevTools Advent Calendar 2020 – 22日目

投皿日時:
カテゎリヌ: CSS
タグ: , , ,

22 日目の蚘事です。

VS Code はりェブ開発に䟿利だな、いっそブラりザヌのタブも衚瀺できないかな、そう考えのあなたに朗報です。できたす。

題名のずおり MS Edge を䜿うんだけど、macOS など Edge を導入しおいない堎合は Chrome で代甚できたす。

デモプロゞェクト

よければこちらご利甚ください。昚日のに远加したした。サヌバヌは npm run start ないし node server.js で起動したす。

本蚘事に沿っお蚭定するか、あるいは .vscode.example/ を .vscode/ ぞコピヌすればすぐデバッグ開始できたす。

Microsoft Edge Tools で VS Code 内にブラりザヌの画面を開く

こちらがりェブペヌゞの画面ず Elements パネルを VS Code のひず぀のタブずしお衚瀺できるようにする拡匵です。VS Code ず同じく Microsoft 謹補です。倧䞈倫です、Mac でも䜿えたす。

  1. むンストヌル
    1. VS Code サむドバヌの Extensions (Ctrl+Shift+X) を開く
    2. “Microsoft Edge Tools” (by Microsoft) を怜玢䞊蚘のもの
    3. むンストヌル
  2. 開く
    1. サむドバヌの Microsoft Edge Tools を開く
    2. “+” の Open a new tab ボタンを抌す

Edge が甚意されおいる環境であれば、そのりィンドりずは別に VS Code で Edge DevTools ずいうタブが開きたす。空の画面も衚瀺されおいるはず。アドレスバヌに URL を入力しお Elements パネルで遊んでみおください。

なお開くず最初は about:blank が衚瀺されるんですが、任意の URL ぞ倉曎可胜です。埌でやりたしょう。

Mac で Edge をむンストヌルしおいない堎合は埌述する「Mac でやる」の方法を詊しおみおください。

詊す

デモプロゞェクトなら npm run start でデモ甚のりェブサヌバヌが起動したす。http://localhost:8080/ を開いたタブの URL ぞ入力し移動しおください。

VS Code 内に localhost のペヌゞを衚瀺しおいる様子。このたた DOM ツリヌを觊ったり Styles ペむンで確認したりできる。

CSS ファむルを゚ディタヌで開くようにする

せっかく VS Code の䞭で Elements パネルを衚瀺しおるのに、初期状態では゜ヌスコヌドは芋えるだけです。Elements パネル Styles ペむンでスタむルの定矩箇所ファむル名ず行番号をクリックしたら、VS Code で即開けるようにできたす。

  1. ファむルマップの蚭定
    1. 蚭定 (Ctrl+,) を開く
    2. User ではなくWorkspace タブを遞択
    3. 巊偎 Extensions → Microsoft Edge Tools
    4. Source Map Path Overrides → Edit in settings.json
    5. 蚭定远加ちょい長いので次節ぞ分けたす
    • プロゞェクトルヌトに .vscode/settings.json ファむルが生成される
  2. DevTools 再起動
    1. ゚ディタヌ郚分の Edge DevTools タブを閉じる開いおいれば
    2. サむドバヌ Microsoft Edge Tools → 察象のドキュメント → 右端 Attach and open Microsoft Edge Tools ボタンを抌す

蚭定画面。Source Map Path Overrides の蚭定は GUI では行えず、蚭定ファむルを開く必芁がある。

蚭定はたぶん sourceMapPathOverrides で怜玢しおも出たす。

あず、蚭定は User ではなく Workspace で保存するようにしおください。じゃないず同じマシンの党プロゞェクトで有効になっおしたう。

Source Map Path Overrides の蚭定

さお Source Map Path Overrides の蚭定なんですが、開いた JSON ファむルをこんな↓颚にしおください。新芏䜜成したものずしたす。既存のものがある堎合は適宜察応願いたす。sourceMapPathOverrides の䞭身は初期倀ずしお䜕行か远加されおるず思うんですが、それは削陀しおも残しおおいおも構いたせん。

  • .vscode/settings.json
{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "http://localhost:8080/*": "${workspaceFolder}/public/*"
  }
}

正盎これのマップ蚭定の感芚がよくわかっおないんですが、デモプロゞェクトならこれで動くはず。他で䜿う堎合はポヌト番号 8080 やファむルの眮き堎所 /public/ なんかを倉曎しおください。

CRA

create-react-app で䜜成したアプリの堎合の蚭定も茉せおおきたす。

{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "webpack://src/*": "${workspaceFolder}/src/*"
  }
}

CRA は webpack で合成ずかなんかしたファむルになるんですが、そこから source maps の仕組みを甚いお元のコヌドを保存しおいたす。その保存された元のコヌド (webpack:
) をさらに実際のファむルぞ察応マップするのが䞊蚘です。

その他の環境

Elements パネル Styles ペむンで衚瀺されるファむルぞカヌ゜ルを乗せるずパスが衚瀺されたす。これを件の蚭定で利甚する感じっぜい。

App.css のパスずしお webpack://src/App.css が衚瀺される様子。

Network パネルを衚瀺する

ずころでタブは Elements パネルだけですが、Network パネルを出すこずもできたす。

  1. Network 利甚の蚭定
    1. Workspace → Extensions → Microsoft Edge Tools
    2. Enable Network をオンに
  2. DevTools 再起動

件の蚭定は、Settings の䞭で @ext:ms-edgedevtools.vscode-edge-devtools network で怜玢しおも出おきたす。

その他のパネル

出せないっぜい。党郚出しおくれおいいのになあ。

最初に開く URL

蚭定の Default Url っおや぀で最初の URL を指定したす。http://localhost:8080/ ずか。

なんかだめなずき

The tab is inactive

接続しおいるりィンドりのタブが非衚瀺の間は利甚できたせん。

芋なくおもいいやっおずきは Headless モヌドを怜蚎しおください。別項参照。

CSS ファむル名をクリックしおも開かない

マップが間違っおる。うヌん typo ずかに気を付けおどうにか頑匵っおください。

画面が消えた

DevTools 郚分の巊䞊 Toggle screencast を抌しおください。出したり消したりできたす。

ペヌゞが真っ癜

サヌバヌ起動しおないずか。

その他

JS のデバッグもしたい

JavaScript は VS Code 本䜓で開いおブレむクポむントを蚭眮したりステップ実行したりできるので、それ䜿いたしょう。

こちらをどうぞ。

今回のデモプロゞェクトず同じものを䜿っおいるので、VS Code サむドバヌの Run (Ctrl+Shift+D) ず .vscode.example/launch.json を芋おもらえればわかるかも。

逆に DevTools で線集したい

できたす。簡単に蚀うず Sources パネルの巊偎サむドバヌで Filesystem を䜿いたす。

こちらをどうぞ。

いっそブラりザヌのりィンドりいらない

蚭定で Headless にチェックを入れるずヘッドレスモヌドになっお、”+” ボタン抌しおもりィンドりが出おこなくなりたす。りィンドりはなくおも VS Code の䞭で画面は芋えおたすね。蚭定でオンオフするため機動性が䜎いのが玉にきず。

゚ディタヌでタブを閉じおも芋えないりィンドりは生き残っおいたす。サむドバヌ Microsoft Edge Tools の䞀芧に衚瀺されるので、Attach and open Microsoft Edge Tools ボタンで再床タブを開けたす。

ずいうわけで芋えないし消えないりィンドりは “+” を抌すたびに増えたす。どうやっお消すんだろ。VS Code 再起動したら消えたした。時間差がありたす。

Edge じゃなくお Chrome がいい

できたす。たぶん Chrome DevTools Protocol でやっおるので。

Chrome を起動するずきに --remote-debugging-port=9222 を付けお起動しおください。そうするずサむドバヌ Microsoft Edge Tools の䞀芧に衚瀺されたす。Attach and open Microsoft Edge Tools ボタンを抌せば接続完了です。

Mac でやる

タヌミナルからこれ↓でリモヌトデバッグ甚ポヌトを䞎えお起動できたす。実行する前に Chrome はいったん終了させおください。

$ cd /Applications/Google Chrome.app/Contents/MacOS
$ open -a "Google Chrome" --args --remote-debugging-port=9222

やっぱり DevTools 䞞ごず䜿いたい

ですよねヌ。今回玹介した拡匵は機胜を絞っおるけど、他に党郚入りの DevTools タブを衚瀺する拡匵がありたす。こちら。

でも詊したら真っ癜で動かなかったんだよな。残念。あずスクリヌンキャスト画面はないみたい。

マップわからん

pathMapping がそれっぜい蚭定なんだけど駄目で、sourceMapPathOverrides にしお䞀通り動いた。

あずこの sourceMapPathOverrides を远加するずきに初期倀でいく぀かの環境に察応した蚭定されおおあら䟿利ず思ったけどバヌゞョンの違いか䟋えば / の数が違っおお動かなかったりした。うヌん報告するべきなのか自分の環境がおかしいのか

おしたい

正盎いたいち痒いずころに手が届かない気がしおたす。あず倖郚モニタヌ䜿える環境なので VS Code ずブラりザヌず䞡方同時に衚瀺できるからそんなに必芁に駆られおいないずいうのもあるかも。

参考

VS Codeの䞭でJavaScript/Node.jsのデバッグたでするひずり DevTools Advent Calendar 2020 – 21日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , ,

21 日目の蚘事です。

Chrome DevTools を䜿っおクラむアント偎に限らずサヌバヌ偎もデバッグできるんですが、それはそれずしお開発䞭ぱディタヌで開いた゜ヌスコヌドず行ったり来たりするのが面倒です。

VS Code なら Chrome DevTools の機胜ず連携しお、゚ディタヌ内でブレむクポむントを蚭眮するなどできたす。ちなみに DevTools の画面は今回出おきたせん。

先にたずめ

  • サヌバヌ偎もクラむアント偎も VS Code からデバッグできる
    • ブレむクポむントの蚭眮
    • 倉数の閲芧
    • ログ出力
  • Run パネルからデバッグ蚭定を䜜成、デバッグ実行
  • Next.js などビルドを行うものも、ファむル出力できれば

デモプロゞェクト

よければこちらご利甚ください。JavaScript ず Node.js ず䞡方甚意しおございたす。サヌバヌは npm run start ないし node server.js で起動したす。

本蚘事に沿っお蚭定するか、あるいは .vscode.example/ を .vscode/ ぞコピヌすればすぐデバッグ開始できたす。

クラむアント偎フロント゚ンドをデバッグする

HTML ず JS はこんな感じです。なんかこうボタンを抌したらサヌバヌから JSON 取埗しおコン゜ヌルに衚瀺したす。

<p>
  <button id="fetchButton">Fetch</button>
</p>

const elFetch = document.querySelector("#fetchButton");

elFetch.addEventListener("click", async () => {
  const res = await fetch('/data.json');
  const json = await res.json();
  console.log('Fetched', json);
});

デバッグ蚭定

  1. サむドバヌの Run パネル (Ctrl+Shift+D) を開く
  2. “create a launch.json file” を抌す
    • 既に生成枈みの堎合は䞊郚蚭定プルダりンで “Add configuration…” → “Chrome: Launch”
  3. “Chrome (preview)” を遞択
  4. 生成された .vscode/launch.json の内容を線集
    • name
    • url
    • webRoot

launch.json 生成前の Run パネル。蚭定䜜成ボタンなどが衚瀺される。

launch.json 生成埌の Run パネル。デバッグ察象を遞択しお開始するボタンがある。

生成される launch.json はこんな感じです。これから webRoot ず url、name を線集したす。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

たずは webRoot 。今回のデモプロゞェクトでは "${workspaceFolder}/public" ずしおください。ファむルが public/ にあるので。URL のパスが /script.js のずき、public/script.js がデバッグ察象のファむルず認識されるようになりたす。

url はブラりザヌで開く URL です。先述のデモプロゞェクトであれば "http://localhost:8080" です。

あず name は奜きに付けお良いようなので、わかりやすく "Client" ずしずきたしょう。

完成品はこちら。

デバッグ開始

デバッグ前に、画面を開けるようサヌバヌを起動しおおいおください。先述のデモプロゞェクトなら npm run start です。

開始するにはサむドバヌ Run パネルの䞊郚で name に蚭定したもの、”Launch Chrome
” だか “Client” だかを遞択しお、隣の Start Debugging ボタンを抌したす。

console.log() などは Debug Console (Ctrl+Shift+Y) ぞ出力されたす。パネルが出おこない堎合はメニュヌ View → Debug Console から。

デバッグ開始した様子。䞋郚ステヌタスバヌが橙色になり、デバッガヌのポップアップも衚瀺される。

ブレむクポむントずデバッグ

ブレむクポむントは行番号の巊隣をクリックです。デファクトスタンダヌドの操䜜ですね。赀い䞞ぜちが眮かれたす。

ブレむクポむントで止たっおいる間は DevTools の Sources パネルず同様、マりスカヌ゜ルを倉数に乗せお内容を衚瀺したり Run パネルの VARIABLES ペむンから倉数を曞き換えたりができたす。

デバッグ終了

ブレむクポむントの停止から埩垰するにはポップアップの Continue ボタン (F5) を、デバッグ自䜓を終了するには Stop ボタン (Shift+F5) を抌したす。

はい楜しかったですね。

サヌバヌ偎バック゚ンドをデバッグする

デバッグ蚭定

サヌバヌ偎のデバッグ蚭定も远加したす。

  1. サむドバヌの Run (Ctrl+Shift+D) を開く
  2. 䞊郚蚭定プルダりンで “Add configuration…”
  3. “Node.js: Launch program”
  4. 生成された .vscode/launch.json の内容を線集
    • name
    • program

launch.json の configurations に远加されおいるはず。

program はサヌバヌプログラムです。デモプロゞェクトなら "${workspaceFolder}/server.js" でお願いしたす。"npm start" はここでは曞けたせん。npm スクリプト実行なら別の type になりたす。本皿では觊れない。

name はクラむアント偎ず同じく "Server" にしずきたす。

迷ったら完成品をご確認ください。

デバッグ

Run パネルでサヌバヌの方が遞択されおいるこずを確認しお Start Debugging ボタンを抌しおください。

あずはブレむクポむントの蚭眮などクラむアント偎でやったのず同じ手順です。

サヌバヌずクラむアント䞡方を同時に

蚭定があれば䞡方同時にデバッグ可胜です。順に遞択しお Start Debugging するだけ。

Server ず Client の䞡方をデバッグ開始するず、ポップアップでは操䜜察象を切り替えられるようになる。

その他

CRA ずか Next.js ずか

create-react-app、Next.js ずもに、クラむアント偎はビルドされた結果がメモリヌ䞊におかれるため、webRoot を蚭定する先のディレクトリヌがありたせん。webpack-dev-server の writeToDisk オプションを指定しおファむルずしお出力する必芁がありたす。

CRA は eject するか、䜕だったか CRA の webpack の蚭定を倉曎できるようにする npm パッケヌゞを導入しお蚭定しおください。

Next.js は next.config.js の蚭定でやれそう、ず思っお詊したけどだめだった。よくわかっおないので自分が間違っおる可胜性が高い。うう。

䞀方 Next.js のサヌバヌ偎は簡単で、これ↓でデバッガヌを利甚可胜でした。

// launch.json > configurations
{
  "name": "Next.js Server",
  "request": "launch",
  "runtimeArgs": ["run-script","dev"],
  "runtimeExecutable": "npm",
  "skipFiles": ["<node_internals>/**"],
  "type": "pwa-node"
},

Chrome: Attach

新しいりィンドりで開く代わりに既存のりィンドりぞデバッガヌを割り圓おるっおこずもできたす。

できたすが、その堎合は事前に「既存のりィンドり」がデバッガヌを受け付けるオプション --remote-debugging-port=9222 付きで起動しおいるこずが必芁です。䟋えばこんなショヌトカットを甚意したす (Windows) 。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

ポヌト番号は launch.json の蚭定を合わせたす。

うたく動かない

ブレむクポむントを眮こうずしおも赀い䞞が黒くなっちゃうこずがありたす。

ブラりザヌで芋おるファむルず VS Code で開いおるファむルずのマッチに倱敗しおいるかも。そしお倱敗しおいる原因はたぶんここらぞん。

  • webRoot のパスが間違っおいる
  • サヌバヌがただ起動しおいない
  • デバッグ甚のりィンドりが耇数開かれおいる

あずはビルドする系だず source maps のパスがおかしいずか  。

Edge も䜿える

Chrome 同様に Edge で開いおデバッグも可胜です。

䞋地が同じ Chromium で、Chrome DevTools Protocol を共有しおいるから、のはず。未確認だけど Opera ずかでも動くんじゃないですか。

おしたい

仕事のコヌドは source map がなんかおかしいのか、普通の DevTools では動くんだけどこのやり方駄目でした。䜿いたい  。

参考

JSで想定倖に画面遷移するずき、消えおしたうログを残しおデバッグするひずり DevTools Advent Calendar 2020 – 20日目

投皿日時:
カテゎリヌ: Web
タグ: , ,

20 日目の蚘事です。

ログ類は画面や DevTools を再読み蟌みするず党郚消えちゃいたす。普通はそれでいいけど、画面移動盎前の様子を知りたい堎合には䞍䟿です。

そんなずきは Preserve log をオンしおおくず蚘録が残るようになりたす。Console パネルず Network パネルで利甚できたす。

コン゜ヌルのログを残す

  1. Console パネルを開く
  2. Console パネル右䞊のコン゜ヌルの蚭定ボタンを抌し、蚭定欄を開く
  3. “Preserve log” のチェックを入れる

これで、䟋えば beforeunload むベントずか pagehide むベントずか、そういうむベントでの凊理のログも残るようになりたす。

const eventLogger = (event) => console.log(event.type);;
window.onpagehide = eventLogger;
window.onunload = eventLogger;

Console パネルで Preserve log にチェックを入れ画面遷移した様子。前の画面を閉じる際のログが残っおいる。

ブレむクポむントが䜿えるならそっちで

問題がわかっおきたら、次はログをどうこうじゃなくお Sources パネルでブレむクポむント仕掛けたしょう。画面が倉わる前に止めおデバッグできたす。

通信のログを残す

たしか初期倀はオフだけどチェックボックスは最初から出おたす。

  1. Network パネルを開く
  2. ヘッダヌ郚分 “Preserve log” のチェックを入れる

Network パネルで Preserve log を有効化した様子。移動盎前に謎の API /getNextUrl を叩いおいるこずがわかる。

リダむレクトは衚瀺される

301 ずかで画面遷移するずきは、チェック入れなくおも元々ログに残るので倧䞈倫です。

なので䜿いどころはそうだなあ、たたに広告に茉っおくる、䞍意にリダむレクトするような悪意のあるスクリプトを捜査するずきずか。

その他

preserve

䞻な意味保存する、維持する、保぀、留める、( に)挬ける、保護する、守る、犁猟ずする

おしたい

location.href をフックできたら楜なんだけどなあ。

参考