WEB開発者向けブラウザBliskと併せて使いたいChrome拡張まとめ

先日から、WEB制作をするときは、動作確認のしやすさからBliskというブラウザを使用しています。

WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
先日、以下の記事を読んでBliskというWEB開発者用ブラウザを知りました。 それで、「そんなにいいのかな?」と半信半疑でインストールし...

このBliskというブラウザは、Chromeと同じBlinkレンダリングエンジンを使用しているため、

Chromeの拡張がそのまま利用できます。

なので僕は、WEB制作向けブラウザのBliskと組み合わせて利用するとより、一層を制作作業がはかどりそうなChrome拡張をインストールして利用しています。

以下では、そのインストールしたChrome拡張について備忘録がてらまとめたいと思います。

スポンサーリンク
レクタングル(大)広告

Bliskと合わせて使いたいChrome拡張

WEB制作にあると便利かもしれないブラウザ拡張。

ColorPick Eyedropper

カラーピックツールで色を選択

ColorPick Eyedropper

閲覧中のページの好きな場所からカラーコードを取得することができる拡張です。

サイトなどを見ていて「この色いいな」なんて思ったときなどに。

MeasureIt

ページ上の要素などのピクセル数を測る定規

MeasureIt

ページ上にある要素のピクセル数を測るための定規です。

Dimensions

マウスカーソルを置いた場所の幅と高さを測ってくれる

Dimensions

マウスカーソルを置いた場所の幅と高さを手軽に取得することができます。

幅と高さは、拡張が自動で判断して表示してくれます。

FireShot

Bliskのスクリーンショットを撮る

FireShot

現在閲覧中のページのスクリーンショットを手軽に撮ることができる拡張です。当然、ページ全体のスクリーンショットも撮ることができます。

Bliskのスクリーンショット機能は、まだ実装されていないので、これで代替。

Alt & Meta viewer

画像のAlt属性を見やすく表示してくれる

Alt & Meta viewer

画像のAlt属性やtitle属性を見やすくツールチップで表示してくれる拡張です。

Alt・title属性は、ソースコードでも見ない限り通常のブラウジングでは見ることができないため、なかなかチェックのしづらい部分ではありますが、この拡張を利用すると、手軽に表示させることができます。

また、ソースを見なくてもメタタグ情報をクリック一発で見ることができます。

ソースを見なくてもメタタグ情報を確認することができる

チェックが面倒なAlt属性とMetaタグ内容を手軽に確認できるChrome拡張「Alt &Meta viewer」
僕は記事投稿時、画面上には出ないけど、SEO的に有利だと信じてやっていることがあります。 それが以下の2つ。 画像のAlt属性...

Create Link

Create Linkの使用例

Create Link

WEBページ上の情報を利用して、ワンクリックでリンクタグなどを作成できる拡張です。

リンクタグ以外にも、使い方次第では様々なタグをワンクリック生成することができます。

ブログ記事の作成支援Chrome拡張「Create Link」の設定例まとめ
ブログ記事の作成を支援するのにタグ作成ツールの存在は欠かせません。 使用しているブラウザがGoogle Chromeなら、今のところ最...

Check My Links

リンク切れチェック

Check My Links

ワンクリックで、WEBページ上のリンクの有効性をチェックしてくれる拡張です。

WordPressなどを使っていると、リンク切れチェックをするならBroken Link Checkerプラグインなどもあります。なので、Broken Link Checkerでリンク切れページをチェックして、リンク切れページを表示させてからは、この拡張で「どのリンクが切れているのか」を見つけ出すといった使い方をすると便利。

Clear Cache

ブラウザキャッシュをワンクリックで削除

Clear Cache

ブラウザキャッシュをワンクリックで削除してくれます。

サーバーにブラウザキャッシュが残っていると、古いキャッシュが残っていて表示がおかしくなってしまうことが稀にあります。そういった時は、ブラウザのリロードボタン押せば大抵は解決しますが、それでもなぜかキャッシュが残ってしまって動作不良を起こしているときは、これで削除します。

ちなみに、Bliskのオートリフレッシュ機能を利用している場合は、ブラウザキャッシュを無効にした状態で自動更新してくれます。

Bliskのオートリフレッシュ機能の設定方法。ローカルファイルの編集でブラウザを自動更新。
前回、BliskというWEB開発向けブラウザを使用したら、使い勝手が良すぎたということを書きました。 その、Bliskの使い勝手の...

CSSViewer

CSSを手軽にチェック

CSSViewer

マウスをオーバーしたHTML要素で利用しているフォントやフォントサイズ、色、背景色を手軽に取得することができます。

デベロッパーツールでも取得はできるのですが、こちらの方が動作は軽いです。

HTML5 Outliner

アウトライン構造のチェック

HTML5 Outliner

閲覧中のページのアウトラインをチェックすることができる拡張です。

HeadingsMap

見出しのアウトライン構造を表示

HeadingsMap

HTML5のアウトライン構造を詳細にチェックすることができる拡張です。

アウトラインだけならHTML5 Outlinerという拡張もあるのですが、こちらはセクション要素もチェックできます。

HTML5のアウトライン構造だけでなくセクションもチェックできるChrome拡張&Firefoxアドオン
HTML5のアウトラインをチェックするツールとしてHTML 5 Outlinerとか、同名のChrome拡張などは有名です。 ...

Incognito This Tab

プライベートモードで手軽に開く

Incognito This Tab

現在閲覧中のページをワンクリックでシークレットウィンドウで開くことができる拡張です。

シークレットウィンドウは、ブラウザキャッシュの影響のないページ確認をするときに便利なので、ワンクリックで手軽に開けるようにするため利用します。

NoFollow

Noindex

 

NoFollow

閲覧中のページが「noindexか?」や「nofollowか?」などをソースを見なくてもチェックすることができる拡張です。

また、nofollowが入っているリンクは、赤の破線で囲まれて表示されるので、一目でわかるようになります。

リンクにnofollowが入っているかもチェック

サイトのnoindex、nofollowを手軽にチェックできるChrome拡張&Firefoxアドオン
Wordpressをやっていて、All in One SEO Packプラグインなんかを入れていると、予期せぬところにnoindexが入...

OGP Checker

FacebookのOGP Checker

OGP Checker

ワンクリックで、FacebookのOGPデバッガーを用いてOGP情報が適切かどうかをチェックすることができます。

Redirect Path

リダイレクトの経路を表示する

Redirect Path

リダイレクトが通った経路を一覧で表示してくれます。

ソースなどを確認する必要がないので非常に楽です。URLを転送した時に、正しい経路を通っているかのチェックなどに。

301・302リダイレクト経路を手軽に調べることができるChrome拡張「Redirect Path」
たまに、リンクをクリックすると、リンク先となっているURLと、たどり着いたURLが違うことがあります。 そういう時は、たいてい...

SimilarWeb – Website Ranking and Insights

SimilarWebで競合サイトの分析

SimilarWeb – Website Ranking and Insightsc

競合サイト等の分析ツールです。

このサイトの大まかなアクセス数、参照元、流入キーワードなどが分かります。

あのサイトのアクセス数は?SimilarWebで大まかな数が手軽にわかるブラウザ拡張2つ他(Chrome、Firefox)
最近、ネットを眺めていて、「このサイトってどれくらいのアクセスなのかな?」と思った時にSimilarWebで大体のアクセス数を見たり...

まとめ

個人的に、Bliskと併用するなら、これぐらいの拡張で十分かなと思います。

Bliskデフォルトの機能と、これら拡張機能を組み合わせることによって、ある程度効率よくサイトの作成や、チェックができるかと思います。

以前に普通のChromeを利用していた時は、これらに加えて、ユーザーエージェントスイッチャーやレスポンシブチェック拡張などをインストールしていましたが、そういったものは不要になりました。

サイト Blisk