コーダー必見!デバックに使えるChromeアドオン集

ブログ

2017.07.10 コーディング

コーダー必見!デバックに使えるChromeアドオン集

会社によってはコーダーが兼任していたりするデバッグ作業。

例え社内にデバッグ要員がいたとしても、最低限のチェックはしておきたいものです。

そこで今回は、新人コーダーの私が使っている、デバッグに使える Chrome のアドオンをご紹介しようと思います。

 

 

The QR Code Extension

 

【このアドオンの機能】

今見ているページURLのQRコードを作成できる。

 

【なぜこれを使っているか】

デバック作業で必要な、スマートフォン・ダブレットなどの実機を使った表示・動作チェック。

チャットなどで実機へURLを送るのもいいですが、社内共有のものだったりするといろいろ面倒が生じます。

ましてや手入力でアドレスを打ち込むのは面倒臭すぎる。

そんな時、URLをQRコード化してしまえば一瞬でURLを送ることができます。

QRコードリーダーのアプリは必要ですが、皆さんもちろん入れています……よね?

 

アドオン追加はこちら!

 

 

Check My Links

 

【このアドオンの機能】

ページ内のリンク切れをチェックできる。

 

【なぜこれを使っているか】

リンク切れはユーザービリティを下げるだけでなく、SEO的にもマイナスとなる要因です。

そんなリンク切れをワンクリックでチェックできるこのアドオンは、デバッグ時にまず使って問題解決してしまいたいところですね。

「有効なリンク」、「有効なリダイレクトリンク」、「警告」、「無効なリンク」に分けて該当箇所に色をつけてくれるので、とてもわかり易いです。

アドオン追加はこちら!

 

 

HTMLエラーチェッカー

 

【このアドオンの機能】

ブラウザー上で、HTMLの文法ミスを自動チェックしてくれる。

 

【なぜこれを使っているか】

「最近のテキストエディタは優秀なので必要ない」と思う方も多いかと思いますが、他人の書いたコードを修正するときなど、ミスが起こる可能性はいつでもあなたのそばに。

コーダーとしては、一番責任を持たないといけない部分です。

しっかりチェックして、恥をかかないようにしましょう。

アドオン追加はこちら!

 

 

HeadingsMap

 

【このアドオンの機能】

HTML5のアウトラインをチェックできる。

 

【なぜこれを使っているか】

アウトラインはHTML5でコーディングする際、とても重要な部分です。

そんなHTML5のアウトラインをチェックするアドオンとしては、『HTML5 Outliner』が有名です。

もちろんこれもとても使いやすいのですが、今回紹介している『HeadingsMap』はアウトライン構造だけでなく、見出しで使われているタグ・セクション構造までチェックできるので、よりオススメです!

アドオン追加はこちら!

 

 

Alt & Meta viewer

 

【このアドオンの機能】

ページ内の画像に設定されている width・height・alt 属性や、metaタグ内容をひと目で確認できる。

 

【なぜこれを使っているか】

SEO的に有利だといわれている画像の width・height・alt 属性。

HTMLでは画像本来のサイズを指定し、大きさはCSSで調整するというのが一般的ですが、ページを量産しているときにはつい間違いや抜けが出てきてしまいます。

width・height に関しては、テキストエディタのプラグイン等で自動入力されるようにしている方もいると思いますが、どうしても alt や metaの自動化は難しく、ミスを一つひとつチェックするのも面倒です。

そんな面倒な確認をひと目でできるようにしてくれるのがこのアドオンです。

画像では全て正常に設定されていますが、表示されている画像サイズとHTMLで指定している width・height が違う場合は数字がオレンジ色に、3行目に Natural のサイズを表示してくれます!

※ただし、HTMLでのサイズ指定が間違っていてもCSS側で width:100% などと指定していると、「正しい」と認識されるようです。

アドオン追加はこちら!

 

 

おわりに

以上、いかがでしたでしょうか。

気になるものはありましたか?

余談となりますが、今秋正式リリース予定のiOS11では、iPhoneの標準カメラアプリからQRコードの読み取りができるようになるそうで。

日本発の技術が取り入れられるのはなんとなく嬉しいものですね。

今回の記事が、少しでもあなたのコーダー生活に取り入れられますように!

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら
c