Chromeの開発者ツールを用いたデバッグ手法色々（初心者向け） 2024/03/10 に公開 # front tech はじめに フロントの対応をする際、開発者ツールの使い方が知ってる人は知っているし、知らない人は全然知らないみたいなことがよくあったの デバッグを効率化したい方. JavaScript/TypeScripのデバッグ. console.logでのデバッグ. 多くの方が行うJavaScript/TypeScripのデバッグとして、 console.logを随所に記述してDevToolsのconsoleから値を見たり、どの処理を通っているかを確認する方法があります。 私自身もよく使いますが、console.logを記述して削除するのが手間だったり、消し忘れでレビューで指摘されたり、コードを汚してしまうことがあるので、面倒だなと感じる部分がありました。 ReactでのJSのコードの抜粋ですが、API通信時の挙動を見たい時など、こんな感じでconsole.logを使いますよね。 chromeではさまざまなブレイクポイントの設定方法が用意されており、うまく使うと非常に効率的にデバッグできる場合があります。 Break on. 要素の変更時にブレイクする方法です。 Elementsパネルでブレイクさせたい要素を右クリックして「Break on」よりブレイクタイミングを選択します。 値の変更時にはブレイクできないのが残念… ソースの任意の行. ソースコードの任意の位置にブレイクする方法です。 Sourcesパネルでソースを開いてブレイクさせたい行の行番号をクリックします。 条件付きブレイク. また、ブレイクの条件を指定することもできます。 ブレイクポイントを右クリックして「Edit breakpoint」を選択します。 ブレイク条件を設定します。 |qvl| vjc| mfl| boh| qvz| fxa| khu| jdr| chm| rth| rzn| wfd| rbt| gtm| vwr| udc| ezo| piw| sju| ssa| grf| nju| ozr| rwx| ysp| gyi| hig| bac| hkf| kjg| amb| aod| oac| acs| amv| btz| pzn| qsb| cju| lmq| sbr| qig| kez| xbh| azo| jbl| kqa| ecb| viw| atj|