拡張機能:Web Developerの使い方を紹介-実装後の確認に便利-

拡張機能:Web Developerとは

様々なWeb開発者ツールを備えたツールバーを提供してくれるブラウザ拡張機能です。

Chris Pederickさんというイングランド出身のWeb開発者が作成しました。
https://chrispederick.com/

起動させると、このような多機能なツールバーが表示されて
使用したい機能を選択して使います。

記事を書いた背景

実装後のセルフチェックやコードレビューに便利なため、Web制作をする上でおすすめの拡張機能の1つとして紹介している記事はいくつかありました。
一方でWeb Developerのみに焦点を当てた解説記事が意外となかったので自分でまとめてみることにしました。
多機能なのに「Web開発者はこの拡張機能も入れておくと便利だよ！」という概要の紹介だけだったり、機能を3つほど例示している内容だけだったので、掘り下げた記事があると参考になるかな、と思いました。

補足

本記事では、拡張機能を用いた検証のサンプルとしてQiitaの各種ページで確認したものを紹介します。

利点: 開発者ツールで確認しづらかったことが、分かりやすく確認できる

普段、cmd + option + iで開発者ツールを開いて、実装後のセルフチェックやコードレビューを行う場面が多いかと思います。

しかし、以下のような検証項目を確認するには、開発者ツールやコードで確認するのは結構大変でした。

• 文書構造の中で見出しタグが適切に構成されているか
• ページ内で使用されているカラーコード一覧を知りたい
• どの画像のalt属性にどんな代替テキストを書いたのか確認したい

これらの確認を便利にできるツールをまとめて提供してくれるのが今回紹介するWeb Developerです。

エンジニアはもちろんですが、表示検証やQAを行うWebディレクターさんにも役立つ拡張機能かと思います。

よく使うおすすめ機能を抜粋して紹介

とても便利な拡張機能ですが、非常に多機能なため、実際にどんなことができるのか、私がよく使う機能を抜粋して紹介してみます。

機能紹介: Information(情報表示)

View Document Outline

ブラウザで検証したいページを開いた状態で、拡張機能: Web Developerを起動。
Informationタブを選択して、赤枠のView Document Outlineを選択してください。

別タブが開き、文書の枠組みとして見出し要素が適切に使われているか可視化して確認できます。

検証サンプル: https://help.qiita.com/ja/articles/qiita-community-guideline

確認観点

見出しは章や節のように文書の階層構造を表すため、見出しレベルが飛ばされていないかなどを要確認です。
従来はコード上で確認していた方もいるかと思いますが、この拡張機能を使えば一目瞭然です。

• 1つのページにh1が単独で存在しているか
• 見出しの入れ子は適切か
• 見出しのレベルはskipしてないか
  • h2がないのにh3が存在していないか、など

View Color Information

ページ内で使われているカラーコードを一覧参照できます。

検証サンプル: https://qiita.com/

確認観点

figmaのデザイン上にないカラーコードを使用していないか、パッと見で確認できるため気がつきやすいです。

Display Id & Class Details

どの箇所で何のid, classが使われているか可視化できます。
※ページの構成によっては若干見づらい場合もあります

検証サンプル: https://help.qiita.com/ja/articles/qiita-community-guideline

確認観点

htmlのコードを見るだけだとイメージがしづらかったclass名の使われ方が使用箇所と一緒に確認できるので便利です。
自分はBEMを使ったCSS設計の案件に携わることが多いのでセルフチェックやレビューの際、適切な命名や設計になっているかの概要を視覚的に把握する際に使ってます。

Display Link Details

どこに何のlinkがあるかhref属性の使用箇所を可視化できます。
検証サンプル: https://help.qiita.com/ja/articles/qiita-community-guideline

確認観点

ヘッダーのロゴ、パンくずリスト、ナビゲーション、ページ内リンク、CVボタンなどにリンク先URLが適切に反映されているか確認がしやすいです。

View Link Information

別タブが開いて、そのページに存在するリンクを一覧表示してくれます。

検証サンプル: https://help.qiita.com/ja/articles/qiita-community-guideline

確認観点

先述のDisplay Link Detailsのような方法ではなく、シンプルにそのページからどのURLへリンク先が設定されているか一覧参照したい場合に使えます。

View Meta Tag Information

別タブが開き、OGPやTDK(title,description,keyword)などheadタグ内のmetaタグの内容を一覧表示してくれます。
検証サンプル: https://qiita.com

確認観点

headタグ内のmetaタグに記述する内容はページ上に表示されるものではないため、開発者ツールでhtmlのコードで確認はできますが、この機能を使えば、一覧で確認できます。

OGPの画像が設定おらず、WebページのURLが各種SNSで投稿された際、意図した表示になっていなかった...なんて事象を防ぐためにも確認しておくのが良いです。

抜粋

description	Qiitaは、エンジニアに関する知識を記録・共有するためのサービスです。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
og: title	エンジニアに関する知識を記録・共有するためのサービス - Qiita
og:description	Qiitaは、エンジニアに関する知識を記録・共有するためのサービスです。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
og:url	https://qiita.com/
og:image	https://cdn.qiita.com/assets/qiita-ogp-3b6fcfdd74755a85107071ffc3155898.png

補足

TDK(title,description,keyword)とは呼ぶものの、実際はSEO観点でmetaタグにkeywordを指定する機会は制作現場でも減った印象です。2009年の古い投稿からの引用にはなりますが、Googleも以下のような見解を示しています。
検索結果を上位に表示させるためのキーワードをmetaタグに埋め込むのではなく、先述のView Document Outlineなどでキーワードを含んだ見出しを適切な文書構造となるように構成する方が大切ですね。
Google 検索セントラル ブログ: Google はウェブ ランキングにキーワード メタタグを使用しません

Google は、ウェブ検索のランキングで keywords meta タグを使用しません。

機能紹介: Images(画像関連の表示)

※以下はInformationタブではなく、Imagesタブを選択してから使用してください。

Display Alt Attributes

imgタグのalt属性に記述した代替テキストを画像の側に表示させることができます。
※この機能の使用中は一部レイアウトで崩れる場合があります。

検証サンプル: https://qiita.com/official-events

確認観点

装飾的な画像やアイコンではalt属性の値は空でも良いのですが、
画像が読み込まれない場合に、文書として意味をなさなくなってしまう場合などに備えて、その画像がどのようなコンテンツなのか記述が必要です。
ページに表示された各種画像と開発者ツール上のalt属性の値を1つ1つ精査するのはしんどかったのですが、
この機能を使うことでだいぶ確認の負荷が減りました。
案件によっては、この機能で代替テキストを表示させた状態をスクショして、クライアント/Webディレクターさん/Webデザイナーさんに確認いただいたこともありますが、確認の手間が軽減できて分かりやすくて助かると言っていただけたことがあります。

alt プロパティは、 要素で指定された画像が読み込まれない場合に表示する予備（代替）テキストを指定します。

画像が予備を必要としない場合（例えば、装飾的な画像や重要性の低いアイコンの場合）、空文字列 ("") を指定することができます。

機能紹介: Outline(枠線表示)

Outline External Links

外部リンクを赤枠で囲んで表示してくれる機能です。
各種SNSなどが分かりやすい例ですね。

一方、自社が運営するページであっても

• コーポレートサイト
• コーポレートブログ
• ヘルプページ
• お問い合わせフォーム

など外部リンクとして別ドメインのページをリンクさせる場合も多いと思います。

検証サンプル: https://qiita.com/official-events

確認観点

別ドメインへの外部リンクは
aタグにtarget="_blank"を設定して別タブで開くのが一般的かと思います。
その際、セキュリティ対策としてrel="noopener"が設定されているかを確認するために
どこが外部リンクなのかブラウザ上で把握する際に使ったりしていました。

※以前は明示的に書くよう気をつけていたのですが、現在は以下のような挙動となるようです。

メモ: target="_blank" を <a>、<area>、<form> 要素に設定すると、暗黙的に rel の動作が rel="noopener" を設定した場合と同様、 window.opener を設定しないようになります。

終わりに

実装後の確認に便利な拡張機能:Web Developerの豊富な機能のうち、実際にどんな機能があるかを一部抜粋して紹介しました。
実装後、コードレビュー提出前のセルフチェックや、自身がレビュワーとしてコードレビューする際に便利なのでぜひ使ってみてください。
また、QAのタイミングでWebディレクターの方やWebデザイナーの方にとってもブラウザ上での確認の負担が減る機能もあるので、案件によって向いてそうな機能があれば共有して紹介してみてください。