2019.10.14こんばんは、ぺんしるです。エンジニアJavaScriptのデバッグ方法は?今日はこういった疑問に答えます。この記事を読むことで、以下が理解できます。最後にデバッグとはデバッグとは、プログラムの不具合や欠陥を調査・修正して、プログラムを仕様通りに動作させるための作業です。エンジニアであれば、必ず実施するものです。Chromeのデベロッパーツールを使用します。Explorer(IE)にもデベロッパーツールは用意されていますが、今回はChromeで説明します。デベロッパーツールを起動するには、Chromeを起動した後に、F12またはCtrl+Shift+iで起動できます。起動すると、Chromeの下にぺこっとパネルが表示されます。これがデベロッパーツールになります。ショートカットを使わなくても、Chromeの画面から以下の赤枠部分をクリックすると、デベロッパーツールが起動します。これで、デバッグの準備は整いました。ブレークポイントを使用する一番オーソドックスなデバッグ方法です。ブレークポイントとは、プログラムを指定した箇所で一時的に停止するポイントのことです。変数の中身や処理を追うときに使用します。ブレークポイントを設定するには、デベロッパーツールのパネルでSourcesタブを開いてください。デバッグ対象のJavaScriptファイルを選択して、ブレークポイントを設定する行をクリックします。ブレークポイントを設定することを、ブレークポイントをはるとも言います。ブレークポイントをはったら、デバッグしたいJavaScriptを実行してデバッグしていきます。デバッグで便利なキーボードのショートカットも用意されています。ここを覚えておいたほうが、デバッグはすこぶる楽になります。関数の処理を終え、呼ばれた親の関数に戻ります。詳細は、以下の記事でGoogleさんが説明してくれているので参考にしてくださいね。Developersコードを行または関数ごとに実行すると、データやページ内の変更を観察して、何が起こっているかを正確に把握できます。developers.google.com圧縮(難読化)されたJavaScriptにブレークポイントを設定する場合は、圧縮したJavaScriptは1行に整形されているので、デベロッパーツールの{}をクリックして整形を解除してください。整形前(読みづらい):整形後(読みやすくなりますね):コンソールログを埋め込む以下のメソッドを使用して、コンソールログをソースコードに埋め込む方法もあります。エラーログを出力する以下のように使用します。//100がコンソールログに出力されます。}以下は、上記のメソッドで出力した例です。コンソールログ結果は、デベロッパーツールのConsoleパネルに出力されます。後で削除するので、warnを使用する場面もあまり見ません。debuggerステートメントを使用するdebuggerステートメントを使用すると、その行で必ず処理が止まります。以下のJavaScriptを実行すると、3行目のdebuggerステートメントで処理が一度止まります。b);}注意コンソールログやdebuggerステートメントは、本番環境にリリースする際には削除する必要があります。残したままだと、内部的な情報を画面に表示することになるので、セキュリティの観点でよろしくないです。同業者が見ても、格好が悪いです。最後にいかがでしたか?不明点があれば、遠慮なくこちら、またはこちら(匿名での質問ができます)からご質問くださいね。2019.11.10JavaScriptJavaScriptの関数はい、ぺんしるです。同じ処理を複数個所に記載するのは、面倒ですよね。そんな時に使用するのが関数です。関数とは、処理を1つにまとめて名前をつけたものです。2019.11.10JavaScriptJavaScriptの文字列の検索処理はい、ぺんしるです。JavaScriptの文字列の検索方法について説明していきます。検索というと分かりづらいかもしれませんが、文字列に特定の文字が含まれるかを判定する処理のことです。コンストラクタは、Arrayオブジェクトを作るときに使います。n...2019.11.02JavaScriptJavaScriptのオブジェクトこんばんは、ぺんしるです。今日は、JavaScriptのオブジェクトについて解説していきます。この辺から難しくなってくるので、頑張っていきましょう。2019.11.10JavaScriptJavaScriptの文字列のreplace(置き換え)処理こんばんわ、ぺんしるです。プログラムをしていると文字列の置き換えをおこないたい場合があります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。スポンサーリンクプロフィールぺんしる都内で働く肩こり症なエンジニア。F欄大学卒業後に、社員数50人の小企業に入社。プレイングマネージャーをしています。F欄大学卒業後に、社員数50人のブラック小企業に入社。資産運用でFX/wealthnavi/NISA/仮想通貨を実践。投資プロフィール質問はこちらホーム検索トップサイドバースポンサーリンクプロフィールぺんしる都内で働く肩こり症なエンジニア。F欄大学卒業後に、社員数50人の小企業に入社。プレイングマネージャーをしています。F欄大学卒業後に、社員数50人のブラック小企業に入社。資産運用でFX/wealthnavi/NISA/仮想通貨を実践。takazlockタイトルとURLをコピーしました。