Google chromeでの2種類のスクリプトテスト

株式会社イメージ・マジックの技術ブログ、今週の担当のsoenoです。


今日は4月の初めの日です。

新学期かつ新元号の発表の日となります。

11時半が発表だそうです。

そんな節目のテックブログ何となく大事に思えるのですが、大丈夫でしょうか?

元号はともかく、今日の担当も実はエイプリルフールだったりしないかなと思いつつ始めます。

ブラウザでのスクリプトを動かすとき

あまり使わない関数の書き方に迷ったとき、

そういう時はコマンドラインでスクリプトを動かすとテストできます。

コンソールからスクリプトの実行

手順は以下の通り

  1. chromeブラウザでF12キーを押して DevToolsを立ち上げ
  2. メニューバーのConsoleを選択
  3. アクティブになっているテキストエリアにスクリプトを入力してEnter
https://www.google.com/で試す場合

  • まずhttps://www.google.com/に移動して
  • コンソールに以下のスクリプトを入れてEnter!
[HTML] document.forms.f.q.value = “新元号”; document.forms.f.submit(); [/HTML] 新元号についての検索結果がでます。

スニペットからスクリプトの実行

手順は以下の通り

  1. DevToolsのメニューバーのSoursesを選択
  2. 左のメニューのSnippetsを選択(なければ横の矢印を押して出てくるlistから選択)
  3. New Snippedの左の+ボタンを押して新規のSnippetを作成
  4. 空白のエリアに実行したいスクリプトを入力
  5. Ctrl と Enterを同時に押すか、右下の再生ボタンをクリック。
https://www.google.com/で試す場合

  • まずhttps://www.google.com/に移動して
  • 上の手順でSnipedの入力画面まで進み、
  • 以下のスクリプトを入力しCtrl + Enter!
[HTML] var searchForm =document.forms.f; searchForm.q.value = “新元号”; searchForm.submit(); [/HTML]

注意点

jQueryなどのプラグインの動作を試したいといった場合は対象のプラグインが読み込まれている必要があります。

※例のgoogleページへのスクリプトは内部の変数などかわってたら来ません。

終わり

最後の平成に間に合わせようと駆け足になりましたが、以上です。

新しい元号の新しい時代が良いときとなりますよう…。