Chrome開発者ツール超入門!JavaScriptの変数の編集方法

Chrome

Chrome開発者ツールでJavaScriptの変数を書き換える方法を紹介します。
以前当ブログで、CSSHTMLの編集方法を紹介しましたが同じような要領で変数を書き換えることが出来ます。

[スポンサーリンク]

このページでやること

Chrome開発者ツールでJavaScriptの変数を書き換える方法を紹介します。

練習用ページ

今回は練習用ページを用意しました。
こちらのページを使ってChrome開発者ツールの使い方を解説していきます。

Chrome開発者ツールでJavaScriptの変数を書き換え

まずは練習用ページを開きます。

chrome-css-update1

今回は画面下のボタンをクリックした時に動くJavaScriptの変数を書き換えていきます。

chrome-js-variable-update1

F12を押して開発者ツールを開きます。
画面左部分はHTMLコードが表示されて、右部分はCSSが表示されています。

chrome-css-update2

JavaScriptを編集するため、Sourcesタブを開いた後にtest.jsファイルを選択して下さい。
今回はこちらのjsファイルを編集していきます。

chrome-js-variable-update2

test.jsの変数「count」の値を1から500へ書き換えます。
書き換えたあと「ctrl」+sで上書き保存して下さい。
上書きすると背景色が少し変わるのとtest.jsタブの左へアイコンが表示されます。

chrome-js-variable-update3

変数を書き換えたあと再度画面下のボタンをクリックして下さい。
JavaScriptの結果が変わっていることが確認できます。

chrome-js-variable-update4

さいごに

Chromeの開発者ツールってフロントエンド開発者はガンガン使っている感じですけど、Java等を扱うバックエンドエンジニアには不慣れな人が多いようにも思えます。

Web開発を行うのであれば、開発者ツールを使いこなせた方が何倍も作業効率がよくなりますので今まで使ってこなかった方も是非使ってみてください!
それでは!