school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

ブラウザ拡張機能の設定

すべてのデスクトップ ブラウザには、すぐに使える開発ツールが用意されています。ブラウザの拡張機能やプラグインを使って、開発ツールの拡張や追加を行います。

ここでは、デザインのデバッグに役立つ便利な機能を備えた Chrome 拡張機能を 2 つ紹介します。

Emmet Re:View

Emmet Re:View は、各メディアクエリにおけるサイトの外観の確認や、すべてのページのスクロールの同期を簡単に行えるツールです。 こちらのサイトでデモをご覧ください。

Chrome ウェブストアのダウンロード

Emmet Re:View 拡張機能のスクリーンショット

WhatFont

よく利用される 2 つ目の拡張機能は WhatFont です。この Chrome 拡張機能では、ページで現在使用されているフォントの名前が表示されます。 ウェブフォントの問題をデバッグする場合に非常に便利です。

Chrome ウェブストアのダウンロード

WhatFont Chrome 拡張機能のスクリーンショット