企画・デザイン

ホームページの動作確認を簡単に行うことができる「Web Developper」

投稿日:2019年4月9日

様々なデバイスが登場している昨今ですが、ホームページ等のWebデザインにおいてはデバイスの数が増えるに連れて動作確認が大変になってきました。そこで今回はホームページの動作確認を簡単に行うことができる「Web Developper」をご紹介します。GoogleのChromeブラウザの拡張アプリで、CSSやJavascriptのオンオフや異なるサイズの確認などをワンクリックで行うことのできるサービスです。

このアプリで仕事が効率化できる理由

  • Chromeの拡張アプリとして使用することができる
  • サイズの異なるデバイスでの表示を確認することができる
  • 特定機能を無効化して表示することができる

使い方

インストールと設定

サイトのアクセスして「Web Developper」を有効化します。有効化するには「Chromeに追加」をクリックします。

確認画面が表示されますので、「拡張機能を追加」をクリックします。

有効化が完了すると、完了画面が表示されます。

Chromeのツールバーに以下のようなアイコンが表示されています。

特定機能を無効化して表示させる

Javascriptやプラグイン等の特定機能を無効化して表示させることができます。特定機能を無効化させるには、アプリアイコンから「Disabled」タブをクリックします。

Javascriptを無効化させるには「Disable Javascript」をクリックします。

CSSを無効化させるには「CSS」タブをクリックします。

「Disable All Styles」で全てのCSSを無効化させることができます。

フォームの動作確認を行う

フォームの動作確認を行うことができます。「Forms」タブをクリックします。

チェックボックスのオンオフやフォームの一斉送信等がワンクリックで行うことができます。

要素に枠線を表示させる

要素に枠線を表示させることができます。「Outline」タブをクリックします。

ブロック要素やフレーム要素、テーブル要素等にワンクリックで枠線を表示させることができます。

ウインドウサイズを変更させる

ウインドウサイズを変更させることができます。「Resize」タブをクリックします。

「Resize Window」では任意のサイズを指定することができます。

何度も利用するサイズについては保存することもできます。指定サイズを保存するには「Edit Resize Dimensions」をクリックします。

「Resize」タブをクリックします。

新しく追加するには「Add」をクリックします。

「Description」「Width」「Height」を設定して「Add」で登録します。

登録したサイズは「Resize」タブにも追加されます。

また、「Resize」タブの「View Responsive Layouts」ではモバイルやタブレット等での表示を一括で確認することもできます。

特徴

Google Chromeには標準でデベロッパーツールが搭載されていますが、特定機能や表示のオンオフが行える「Web Developer」は大きな魅力があります。また、ワンクリックで異なるサイズの確認やフォームの送信テスト等もホームページの動作確認を行う上では効率化に繋がるかと思われます。Web制作に携わる方は一度利用してみてはいかがでしょうか。

サイト情報

URL:https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

Web Developperの評判(口コミ)

平均:  
 0 件
口コミを書く
1
2
3
4
5
送信
     
キャンセル

口コミを書く

-企画・デザイン
-, ,

Copyright© WebCli , 2019 All Rights Reserved.