Google Chromeを使ってブラウザ上で簡単なJavaScriptを実行する方法です。
JavaScriptを動作させるサービスやアプリケーションはありますが、もっと手軽に行うならブラウザの開発者ツールを使いましょう。
ChromeのConsoleタブを使えば、ソースコードをすぐに実行できます。数行程度のコードを自分で書いて動作確認したい場合に便利です。
最低限の機能しかないので開発環境とするのは難しいです。
読み込んだJSを書き換えたい場合はページ下の関連記事からどうぞ。
この記事の目次
ChromeでJavaScriptを直接実行する
まずはChromeブラウザを起動します。
続いてデベロッパーツール（開発者ツール）を起動します。
「Ctrl+Shift+I」や「F12」でも起動できる
デベロッパーツールの開き方は複数あります。
簡単なのはWebページ上で右クリックし、メニューから「検証」を押す方法です。
そのほか「Ctrl+Shift+I」や「F12」のショートカットを使ったり
画面右上のメニュー ＞ その他のツール ＞ デベロッパーツール
と辿っても開けます。
ConsoleでJavaScriptを実行する
メニューが開いたらJavaScriptのコードを入力するためにコンソールを起動します。
デベロッパーツール画面の上の方に「Elements」「Console」「Sources」...
と並んでいるのでConsoleをクリックします。
あとはコンソール画面にプログラムコードを書き込んでいくだけです。
Consoleでエンターを押すとコードが実行される
コンソールではエンターを押すとコードが実行されます。
コードの改行はShift＋Enter
1行コードを書くたびにプログラムが実行されていては面倒です。
複数行のコードを一気に書き込んでから実行したい場合は、キーボードの
「Shift」＋「Enter」
を押せばコンソール画面上で改行できます。
改行は「Shift」＋「Enter」
ちなみに画面上部のメニューの他に、画面下部にもConsoleタブがありますが、こちらも全く同じ機能です。
画面下部のConsoleタブでもOK！
以上です…
ブラウザ上で直接ソースコードを書き込んでJavaScriptを実行できるだけです。
この機能の使いどころ
見ての通り、コーディングはやりにくいです。
その他の便利な機能どころか、ファイルの保存機能もありません。
この機能を使うのに便利な場面は、Webサイト上で簡単なプログラムを動作させて何かを確認したい場合でしょうか…
例えばサイトのjQueryを確認したい時などはconsoleに次のようなコードを1行書くだけで確認できます。
$.fn.jquery
Wordpressサイトの場合は↓
jQuery.fn.jquery
正直あんまり使いません。
JavaScriptを書き換えたい場合
サイト上で読み込んでいるjsファイルのJavaScriptを編集（書き換え）したい場合はまた別の操作になります。
「Sources」タブを使用するのですが、長くなりますので別の記事にまとめました。
サイト上で読み込まれるJSファイルのデバッグなんかにも使えると思います。
是非ご確認ください↓
