ウェブブラウザの「開発ツール」で Javascript の実行テスト。 Mozilla Firefox の場合。 Chrome , Edge は起動方法まで。

目次

標準搭載

今回の投稿では、ウェブブラウザに標準で付いている開発ツールを使用して Javascript （ジャバスクリプト）の実行テストを行ってみたいと思います。使用するブラウザは、 Mozilla Firefox （ファイヤーフォックス）がメインになりますが、 Chrome（クローム）と Edge（エッジ）の開発ツールの起動方法までは調べてみましたので参考にご覧ください。テスト OS は、 Windows10 になります。

目次まで戻る

開発ツールの起動方法

Firefox の場合

Firefox ファイヤーフォックスのウェブ開発関係のツールは、「開発ツール」という名前になっているようです。 Windows の場合、「 Ctrl + Shift + I 」のショートカットキーで開発ツールが起動するようです。

var a=document.querySelectorAll("a[href^='https://pulogu.net/']");
a.forEach(function(b){
    console.log(b);
});

上のコードを Firefox の「開発ツール」の「コンソール」タブに入力して「実行」ボタンで実行してみます。実行場所は、当ブログのトップページです。

そうすると、右側のパネルに「https://pulogu.net/」から始まる「a」タグが列挙されました。

「コンソール」タブで「Ctrl + B」のショートカットキーを押すと、一行ずつ入力して実行することの出来る、コマンドライン入力のモードに切り替わります。マルチラインモードに戻す場合は、「Ctrl + B」のショートカットキーを押すと戻ります。

コマンドライン入力で、「Enter」キーを押すと記述した Javascript が実行されます。コマンドライン入力で複数行の Javascript を記述したい場合は、「Shift + Enter」のショートカットキーで改行を行うようです。

コマンドライン入力のモードで以下の記述を行い、「Enter」キーを押すと Javascript が実行されました。

alert("a"); //この記述後、「Enter」キーを押すと Javascript が実行されました。

同じく、コマンドライン入力のモードで「alert("a");」と記述して、「Shift + Enter」のショートカットキーで改行後、 「alert("b");」と記述して「Enter」キーを押すと Javascript が実行され、アラートが 2 回表示されました。

alert("a"); //この記述後、「Shift + Enter」で改行出来ました。
alert("b"); //この記述後、「Enter」キーを押すと Javascript が実行されました。

目次まで戻る

参考資料

目次まで戻る

あとがき

私の場合、 Javascript はウェブページの作成用途に使用する事が多いので、ウェブブラウザ上で動作テストを行えるのは便利です。開発ツールは、表示しているウェブページの HTML , CSS の情報を調べたりも出来るので、ウェブページの構造の理解、テクニックの習得に役立ちそうです。ウェブページの作成がはかどりそうです。

やはり Chrome , Edge でも Javascript の実行テストを行うべきと思い、以下の Javascript のコードを両方のブラウザの「コンソール」から実行してみました。

alert("a");
alert("b");

上のコードは、複数行になっていますが、 Firefox のコマンドライン入力のモードの時と同様に、「alert("a");」と入力した後に、「Shift+Enter」で改行を行う事が出来ました。続けて、「alert("b");」と入力して「Enter」キーを押すと、「a」「b」とアラートが ２ 回表示されました。複数行の Javascript の記述と実行に成功したようです。

Chrome の「Console」の画面

Edge の「コンソール」の画面

以上、閲覧ありがとうございました。

目次まで戻る