Quantcast
Viewing all articles
Browse latest Browse all 28

GoogleChromeの開発者ツールを使うと、JavaScriptが簡単に実行できます

GoogleChromeでは、開発者ツール(DevTools)を使って簡単にJavaScriptを実行することができます。

GoogleChrome「だけ」でJavaScriptを実行する

まず、どのページでも良いので右クリックし、「検証」を選択します。
Image may be NSFW.
Clik here to view.
検証

すると、画面に開発者ツールが表示されます。
表示される位置は設定によって異なります。右に出てくる場合や下に出てくる場合、独立したウインドウで出てくる場合など様々です。
開発者ツールを開いた段階では「Elements」が選択されていると思いますので、ここの並びから「Console」を選択します。

Image may be NSFW.
Clik here to view.
Elements

これでJavaScriptを実行する環境が手に入りました。

Image may be NSFW.
Clik here to view.
Consoleで余計なエラーを消す

ただ、ページやインストールしている拡張機能によってはエラーや警告が出る場合があります。
今回は関係ないので、Consoleの表示を左上のボタンからリセットするとスッキリして良いでしょう。

Image may be NSFW.
Clik here to view.
Console

このConsoleの、「>」の右側。ここにJavaScriptのプログラムを書いてエンターキーを押すと、それだけで実行できてしまいます。なんて簡単。

試しに

1+6

alert("アラート表示だよ")

などを入力して、試してみてください。

プログラム例:Web上の入力フォームに定型文を自動入力

上の例では「1+6」なんて単純な計算をさせていますが、わざわざJavaScriptを使ってただの足し算をしたい人はいないですよね。もっとこう、普段から使える何かを作りたいですよね。

そこで1つサンプルです。

下のアニメーションは、Chatworkの投稿欄に文字列を入力して送信キーをクリックする、という流れをプログラムで行っている例です。
Image may be NSFW.
Clik here to view.

スクリプトは

document.getElementById("_chatText").value = "テストの文章"; document.getElementById("_sendButton").click();

です。

使いみちとしては、例えばバグ起票時のテンプレートを用意しておいて、クリックひとつで入力させる、などが考えられます。

参考:Backlogの課題の詳細にテンプレートを挿入するブックマークレットを作った | ひびテク


Viewing all articles
Browse latest Browse all 28

Trending Articles