Chromeブラウザ上でJavaScriptを直接実行するにはConsoleタブを使う!簡単なコードの動作確認など。


Webブラウザ

chromeでjavascriptを実行_004
Google Chromeを使ってブラウザ上で簡単なJavaScriptを実行する方法です。

JavaScriptを動作させるサービスやアプリケーションはありますが、もっと手軽に行うならブラウザの開発者ツールを使いましょう。

ChromeのConsoleタブを使えば、ソースコードをすぐに実行できます。数行程度のコードを自分で書いて動作確認したい場合に便利です。

最低限の機能しかないので開発環境とするのは難しいです。
読み込んだJSを書き換えたい場合はページ下の関連記事からどうぞ。

ChromeでJavaScriptを直接実行する

まずはChromeブラウザを起動します。
続いてデベロッパーツール(開発者ツール)を起動します。

chromeでjavascriptを実行_001

「Ctrl+Shift+I」や「F12」でも起動できる

デベロッパーツールの開き方は複数あります。
簡単なのはWebページ上で右クリックし、メニューから「検証」を押す方法です。

そのほか「Ctrl+Shift+I」や「F12」のショートカットを使ったり

画面右上のメニュー > その他のツール > デベロッパーツール

と辿っても開けます。

ConsoleでJavaScriptを実行する

メニューが開いたらJavaScriptのコードを入力するためにコンソールを起動します。

デベロッパーツール画面の上の方に「Elements」「Console」「Sources」...
と並んでいるのでConsoleをクリックします。

あとはコンソール画面にプログラムコードを書き込んでいくだけです。

chromeでjavascriptを実行_002

Consoleでエンターを押すとコードが実行される

コンソールではエンターを押すとコードが実行されます。

コードの改行はShift+Enter

1行コードを書くたびにプログラムが実行されていては面倒です。
複数行のコードを一気に書き込んでから実行したい場合は、

キーボードの「Shift」+「Enter」

を押せばコンソール画面上で改行できます。

chromeでjavascriptを実行_003

改行は「Shift」+「Enter」

ちなみに画面上部のメニューの他に、画面下部にもConsoleタブがありますが、こちらも全く同じ機能です。

chromeでjavascriptを実行_004

画面下部のConsoleタブでもOK!

以上です…

ブラウザ上で直接ソースコードを書き込んでJavaScriptを実行できるだけです。

この機能の使いどころ

見ての通り、コーディングはやりにくいです。
その他の便利な機能どころか、ファイルの保存機能もありません。

この機能を使うのに便利な場面は、Webサイト上で簡単なプログラムを動作させて何かを確認したい場合でしょうか…
例えばサイトのjQueryを確認したい時などはconsoleに次のようなコードを1行書くだけで確認できます。

$.fn.jquery

WordPressサイトの場合は↓

jQuery.fn.jquery

正直あんまり使いません。

JavaScriptを書き換えたい場合

サイト上で読み込んでいるjsファイルのJavaScriptを編集(書き換え)したい場合はまた別の操作になります。

「Sources」タブを使用するのですが、長くなりますので別の記事にまとめました。
サイト上で読み込まれるJSファイルのデバッグなんかにも使えると思います。

是非ご確認ください↓

-Webブラウザ
-,

ありがとうございました。
良かったらシェアしてネ・w・

© 2021 ソロ学