text 铬でデバック

Posted 2021-05-02

■coverage
more tools → coverage
[●]実行ボタンをクリックして使用しているcss/jsを調べる

■network conditions
more tools → network conditions
select automatically のチェックを外す
プルダウンでユーザーエージェントを選択

■search
more tools → search(ctrl + shift + F)
サイトで使われている全ファイル（スタイルやメソッドも）を検索できる

■sources
・https://www.buildinsider.net/web/chromedevtools/01#page-5
ctrl + oでファイルを検索できる

・ブレークポイントでの確認について
https://ics.media/entry/11735
https://ics.media/entry/11735/4

■リジューム実行[F8]
ブレークポイントで止まっていたプログラムの続きを実行

■ステップオーバー[F10]
関数呼び出しがあった場合でも、関数へ処理遷移しないで次の行に進む

■ステップイン[F11]
関数呼び出しがあった場合、その関数へ処理遷移をして、関数内の処理に進む

■ステップアウト[shift + F11]
関数が終了するまで実行し関数を抜ける

■イベント毎のデバック（以下はオンクリックの例）
「デベロッパーツール」を開く
「Source」タブに切り替える
右下あたりの「Event Listener Breakpoints」を展開する
「Mouse」を展開して「click」にチェックを入れる
onclick属性が設定されたタグをclickする
Step into next function call(F11)を繰り返し押す



■参考
・デベロッパーツールの使い方全般
https://www.buildinsider.net/web/chromedevtools/01
・Sourcesパネルの使い方
http://weback.net/utility/1467/
・Visual Studio CodeでのJSのデバッグ方法
https://ics.media/entry/11356