yoshitake_1201’s diary

テストのこととか、ペンギンのこととか書きます。

ブラウザのテストに役立つChrome拡張機能8選

この記事は「ソフトウェアテストの小ネタ AdventCalendar2018」の 15日目記事です。 qiita.com

昨日14日目は@tononoさんの「このテスト本が好き!2018」でした。

tonono.hatenablog.com

おすすめポイントがわかりやすく素敵でした。
紹介されていた本はまだ読んだことないので、来年読んでみます!

余談ですが…読む方の状況によって本を読んだときの理解度は全然違いますよね〜。
新しい本だけでなく、既に読んだ本を読み返すのもいいですよね。
読み返してみると新しい発見があるかもしれないですし。
新しい発見を得たとき、「あ、自分成長したんだ」と実感することもできますし。
本はまだ読んでない本も既に読んだ本もどちらも読んでいきたいです。

概要

さて、前段でなんか語ってしまいました(笑)
この記事の内容ですが、テスト設計やテスト実行時に役立つChrome拡張機能をただただ紹介するだけです。
超小ネタですね!
テーマにあっている自覚がすごくある。

自分が使っているものでおすすめできるものだけ書いてます。
良さそうと思ったらためしに使ってみてください(^^)

紹介するツールの一覧はこちらです。

  1. Window Resizer
  2. WhatFont
  3. FireShot
  4. テキストエンコーディング
  5. JSONView
  6. Speedtest by Ookla
  7. textlint: 文章チェッカー
  8. Tampermonkey

1. Window Resizer

chrome.google.com

f:id:yoshitake_1201:20181216001009p:plain

ブラウザのウィンドウサイズを調整してくれる。
これで4:3系のディスプレイがなくても、確認が簡単。
自分の好きなサイズも登録できるので、↓のサイトなどを参考に自前で登録すると良いかと!
ディスプレイ解像度一覧・早見表 | 早見表目的ネット


2. WhatFont

chrome.google.com

f:id:yoshitake_1201:20181216001224p:plain

テキスト部分をクリックするとそのFontやサイズを画面上表示してくれる。
要望でサイズ変更してほしいときに、一緒に画像を添付してあげると便利かも。


3. FireShot

chrome.google.com

f:id:yoshitake_1201:20181216001143p:plain

ページ全体のスクショを撮ることができる。
ディスプレイに表示してある領域だけでなく、ページ全体を撮ることができるのはかなり便利!
実行すると別タブで開き、PDFで保存することもできる。

Chrome標準の機能としてページ全体のスクリーンショットを撮ることもできます。
@yoshikiitoさんのこちらをご参考ください。
ChromeでWebページの全画面スクリーンショットを撮る方法(拡張機能不要) – ひびテク


4. テキストエンコーディング

chrome.google.com

f:id:yoshitake_1201:20181216001559p:plain

右クリックメニューで、ページのエンコードを指定できるようになります。
ChromeのDefaultで表示されなくなっちゃいましたからね。
これはやはり入れておきたいところかと。


5. Json Viewer

chrome.google.com

ブラウザでJsonを開いたときにいい感じの見た目にしてくれるやつです。
APIを使ったサービスではかなり重宝するかと。


6. Speed Test by Ookla

chrome.google.com

f:id:yoshitake_1201:20181216001819p:plain

有名どころの通信速度測定ツールですね。
iOS, Android App版もありますが、Chrome拡張機能ではWebサイトの表示時間も計測してくれます。
「表示に時間かかってるなぁ…」を定量的に表すことができますね!

※SPEEDTEST公式サイト→http://www.speedtest.net/ja


7. textlint 文章チェッカー

chrome.google.com

文章校正をしてくれるツールですね。
ルールもオプションで変更することが可能です。
チケット作成やブログ作成、執筆活動など幅広く使えますね!


8. Tempermonkey

chrome.google.com

Webページ表示時に、JavaScriptを実行してくれるツールです。
スクリプト実行中に、特定のリンクURLの書き換えなどすることができます。

※ いい感じの使用例が@rinaさんのブログで読めます。 [Github Issue]Assignされた一覧に詳細画面からワンクリックで遷移したい - テストする人。

このツール最近使い始めたんですがかなり便利ですね。 これからスクリプト書いていこうと思っている所存です。


おわりに

さて、ただただ紹介してきました。
ほんま小ネタでしたね。

もし何か知らなかったものがあったら試してみてください。
あと、これは便利だよ〜っていうものがあればぜひ教えてください(笑)

ちなみにChrome拡張機能ですがもちろん開発することができます。
このあたりの方の記事を参考にするとわかりやすいかと!
(自分のじゃないのか!というツッコミはおいといてくださいw)
- [公式]Getting Started Tutorial - Google Chrome
- Chromeのオリジナル拡張機能を開発しよう(ソースコードあり)
- Chrome拡張の開発方法まとめ その1:概念編 - Qiita

ではでは読んでいただきありがとうございました!

おまけ

Chrome拡張機能だけでなく、もちろん他にも役立つツールあります!
とくに@まつさんのスライドは素敵ですね。
LINEであんなことができるとは…。便利だなぁ。

www.slideshare.net