ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

アフィリエイト広告を利用しています

Web制作を効率化!HTMLコーディングに役立つ おすすめChrome拡張機能11選

この記事は、最初の投稿から3年以上が経過しています。

最終更新から1150日が経過しています。

Web制作を効率化!HTMLコーディングに役立つ おすすめChrome拡張機能11選

「HTMLコーディング作業を効率化したい」
「便利なGoogle Chrome拡張機能を知りたい」

悩み

こんな悩みにお答えします。

目次
  1. HTMLコーディングに役立つChrome拡張機能
    1. Clear Cache
    2. HTMLエラーチェッカー
    3. HTML5 Outliner
    4. Full Page Screen Capture
    5. Window Resizer
    6. ImTranslator
    7. HTML Coding Checker
    8. Edit this Cookie
    9. META SEO Inspector
    10. Wappalyzer
    11. Web Vitals
  2. まとめ

HTMLコーディングに役立つChrome拡張機能

Clear Cache

1クリックでキャッシュをクリアしてくれる拡張機能です。
最近のブラウザは速度が高速化している反面、キャッシュが以前よりとてもしつこくなってきて、コーディングがなかなか反映されず作業が停滞してしまいます。
そんなストレスを解消してくれます。

chrome ウェブストア
Clear Cache
Clear Cache

WordPressでキャッシュを残さないようにするための記事です。

【WordPress】「更新されない」の解決方法 キャッシュ対策

WordPressで「更新したはずなのに更新されない」と悩んでいますか?この記事では更新されないことの原因、キャッシュ対策をした解決方法について解説しています。ぜひご覧ください。

HTMLエラーチェッカー

1クリックで表示しているページのHTMLソースのエラーチェックをしてくれる拡張機能です。
コーディングをしているとケアレスミスで表示が崩れたりすることがありますが、複雑になったHTMLソースをひとつずつ確認していくのは大変です。
そんな地道な確認作業を解消してくれます。

chrome ウェブストア
HTMLエラーチェッカー
HTMLエラーチェッカー

入力ミスがすぐわかる!HTMLエラーチェッカーの使い方【Chrome拡張機能】

HTMLエラーチェッカーの使い方について知りたいですか?この記事では、HTMLエラーチェッカーの基本的な使い方、オプションの使い方について解説しています。HTMLエラーチェッカーの代替となる拡張機能についても紹介しています。ぜひご覧ください。

HTML5 Outliner

1クリックで表示しているページのHTML構造(アウトライン)をチェックしてくれる拡張機能です。
構造の確認はもちろんタグ内に不要なテキストが入ったりしてないかも確認できます。
HTMLソースの品質向上に役立ちます。

chrome ウェブストア
HTML5 Outliner
HTML5 Outliner

見出しタグの使い方のチェックに便利です。

見出しタグの使い方とHTML5 Outlinerで確認する方法

HTMLの見出しタグについて知りたいですか?この記事では、見出しタグの使い方と「HTML5 Outliner」を使ってアウトラインを確認する方法について解説しています。ぜひご覧ください。

Full Page Screen Capture

1クリックで表示しているページのヘッダーからフッターまでページ全体をスクリーンショットできます。
スクリーンショットはPNGとPDFへ出力することができます。

chrome ウェブストア
Full Page Screen Capture
Full Page Screen Capture

Window Resizer

1クリックでChromeのウィンドウサイズを調整してくれます。
一般的なモニタサイズは用意されており、カスタムサイズも指定できます。
レスポンシブコーディングに役立ちます。

chrome ウェブストア
Window Resizer
Window Resizer

ImTranslator

テキスト選択だけで、選択したテキストの翻訳ができます。
コーディングやプログラミングの海外参考サイトで情報を探すときに便利です。
あまり使用しませんが、数多くの言語に対応しています。

chrome ウェブストア
ImTranslator
ImTranslator

HTML Coding Checker

HTMLコーディングのチェックを補助してくれます。
リンク切れやMETA情報の一覧表示、画像の一覧表示等ができます。
ずっと(β版)なだけあって、一部、うまく機能しないものもありますが、それでも便利な拡張機能です。

chrome ウェブストア
HTML Coding Checker
HTML Coding Checker

Edit this Cookie

PHPやJavaScriptでcookieを使用したホームページのプログラミングをする際に役に立ちます。
保存されているcookieすべてとそのcookieが持っている情報が可視化できます。

chrome ウェブストア
Edit this Cookie
Edit this Cookie

META SEO Inspector

ページのメタ情報を簡単に確認するのに役に立ちます。
1クリックでメタ情報を一覧で確認でき、問題があるところを通知してくれます。

chrome ウェブストア

Warning: simplexml_import_dom(): Invalid Nodetype to import in /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/functions/custom_ogp.php on line 32

Fatal error: Uncaught Error: Call to a member function xpath() on null in /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/functions/custom_ogp.php:38 Stack trace: #0 /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/blog/chrome-extensions.php(227): get_ogp('https://chrome....') #1 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/template.php(772): require('/home/hashi84/h...') #2 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/template.php(716): load_template('/home/hashi84/h...', false, Array) #3 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/general-template.php(204): locate_template(Array, true, false, Array) #4 /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/single-blog.php(100): get_template_part('blog/chrome-ext...') #5 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/template-loader.php(106): include('/home/hashi84/h...') #6 /home/hashi84/hsmt-web.com/public_html/wp/wp-blog-header.php(19): require_once('/home/hashi84/h...') #7 /home in /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/functions/custom_ogp.php on line 38