Chrome javascript 無効。 ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)

ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)

Javascript 無効 chrome Javascript 無効 chrome

本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」、DevToolsという略称もあります)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。 上級者はChromeのデベロッパーツールではなく、エディターとChromeを連携してJavaScriptをデバッグします。 [ステップオーバー]ボタンを押して処理を進め、 resultを確認しましょう。

12

ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)

Javascript 無効 chrome Javascript 無効 chrome

ステップアウトは現在処理が止まっている関数内の残りの処理をすべて実行し、関数を呼び出している行へ移動します。

10

ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)

Javascript 無効 chrome Javascript 無効 chrome

ブレークポイントを設定する メインエリアで表示されているソースコードの行番号の部分をクリックすると、青い矢印が表示されブレークポイントが設定されます。 ログポイントを使えば、開発コードに console. jsというJSファイルを表示します。

12

ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)

Javascript 無効 chrome Javascript 無効 chrome

ステップオーバーは現在止まっている行で関数が実行されている場合に、その関数の内部の処理をすべて実行して次の行で止まります。 JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。 実行中の変数の状態を調べる方法• ブレークポイントを設定した状態でプログラムの実行中にこの行を通ると実行が一時的に止まります。

ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)

Javascript 無効 chrome Javascript 無効 chrome

今回確認したいのは substract 関数内なので、[ステップイン]ボタンで次の処理の行へ移動します。

9

ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)

Javascript 無効 chrome Javascript 無効 chrome

ブレークポイントだとコード実行が一時停止しますが、ログポイントであればログを出力するだけで、コード実行は停止しません。 数値や文字列などの簡単な情報であればこの簡易的な表示で十分でしょう。

ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)

Javascript 無効 chrome Javascript 無効 chrome

もう一度[ステップオーバー]ボタンを押すと、やはり case "type-substract"へ移動しました。 クリエイティブコーディングをする場合に、「数値を常に監視したい」「だけどコンソールパネルを埋め尽くしたくない」と思っている開発者は多いことでしょう。 変数の状態を把握することで、処理が期待どおり動作しているか確認することは大事です。

ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)

Javascript 無効 chrome Javascript 無効 chrome

この記事で解説するサンプル 本記事では、サンプルを例にデベロッパーツールを使用してJSプログラムをデバッグします。 是非使いこなせるようになりましょう。 ここで[ステップオーバー]ボタンを押すと、 break文へ移動してしまいます。

12

ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)

Javascript 無効 chrome Javascript 無効 chrome

関数の引数 num1も num2も値が何であるかはわかるため、 result変数がどうなるのかは予想がつきます。 [Watch]パネルに変数名を入力することで、変数の状態を表示できます。

9