Link Evaluatorで楽々ソースコードチェック

シェアする

昨今Chromeに押されまくってるFirefoxですが、私はこのLink EvaluatorがあるのでFFから離れられません。すごい便利なのですがあまりWebで触れられていない利用法について紹介したいと思います。

ざっくりまとめるとこんな感じ
・基本的には404探しツールだけど…
・本当はリンク先のソースを読んでエラーっぽかったらハイライト色を変えてる
・ソース内の検索ワードをカスタマイズできる
・リンク先ソース内に任意の文字列があればリンク色を変えられる

このアドオン、レスポンスコードを見ているわけではなくてリンク先のソースに404や503っぽい単語(リストがある)があったらアラートを上げるようになっています。この単語リストをカスタマイズできるのがこのアドオンの利点なんですね

というわけで使い方。まず必要なアドオンは
Link Evaluator
Webデベロッパーアドオン
の2つを入れておいてください。あと、今回の例では FireMobileSimulator も使ってます

まず、Link Evaluatorの設定です。今回は例としてYahooニュー スのスマホ版にapple-touch-iconのタグがきちんと記 述されているかどうか検証します。ツールメニューからCustomize Openly Link Evaluatorをクリック

Configureタブを開き、左側のボックスの文字列を消し、link rel=”apple-touch-icon” href=を検索クエリにセット(ここは検索したいコードを入れます)

Webデベロッパーアドオンのリンクを表示機能を使っ て、Google検索結果画面のリンクを抽出して一覧表示 します。

そしたら、Link Evaluatorの結果タブからStartボタンをクリックすると、バーっとチェックが始まります。 Configureタブで左のボックスにクエリを書いたので、ヒットした場合黄土色っぽいのになります。

ヒットしたリンクとヒットしてないリンクがひと目でわかるのでとても便利。

応用は無限大で、上記例のようにスマホサイトのソー スをチェクしてますが、URLはGoogleから拾ってるのでPC用です。つまり、正常にリダイレクトされてるか どうかをUA偽装した上でスマホ特有のソースをクエリ で投げることによって行ってるわけです。リダイレクターのチェックですね。これはリンク一覧を作るまではPCのUAで、Link Evaluatorを作動させる前にスマホ UAに変更するのがミソです。あとは、何パターンもあるテンプレートを使った動的サイトのソース変更をし たときとか、いちいちチェックする必要が無いですね。

URLの一覧を作る必要がある場合、Excelで作ってHTMLで保存してFFで読み込むと楽です。その場合、a タグでリンクされている必要があるので、hyperlink関数を使ってURLにリンクを設定してから保存してくだ さい。

ルーティンでURLチェックを行う場合はツール化されていることが多いですが、ふと調べたかったり、一度きりの検証作業等の場合はこのツールを使うととても便利なのです。

スポンサードリンク
 
シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください