Anatomy

ANATOMY BLOG

マクロ視点のアクセス解析と品質管理ツール「ANATOMY(アナトミー)」のブログです

2016年1月15日金曜日

本番サイトと同じWebページを思う存分デバッグできる方法とは

サイトクローンはWebサイトのテストや運用監視を自動化するツールで、アクセスしたWebページのコピーを丸ごと保存するクローン技術の応用でできています。作られたクローンはJavaScriptやCSSが完全に動作し、そこがブラウザ純正の機能で行ったローカル保存とは大きく違います。

このクローンはその特長ゆえにテスト・監視自動化の他に開発・デバッグにも役立てることができます。今回はその使い方の1つ、「リソース編集」機能を紹介したいと思います。

リソース編集は、サイトクローンツールのReplayモードで使える機能です。ツールがReplayモードのときツールバー上で押せる鉛筆アイコンをクリックすると、クローンのWebページのリソース(HTMLや外部JS、CSSファイル)がリスト表示されます。ファイルを選ぶとエディタ(初期はメモ帳ですが設定で変えられます)で開かれ、編集できます。


外部CSSファイルを編集して保存し、クローンに再度アクセスすると、変更内容が反映されました。下の画面キャプチャでレイアウトや色調が変わっているのがわかるでしょうか?変更はあくまでクローンに対してなので、本番運用中のWebサイトには全く影響しません。

Before: CSS編集前のクローン
After: CSS編集後のクローン
このように、本番サイト上で起きたエラーや不具合と同じ状況を自分のローカル環境で再現できるクローンだから、デザインを調整したりJavaScriptのコードを変えてデバッグしたりと、Webページのデザインや動作を思う存分にいじり倒せます。

デバッグはブラウザの開発ツールを使う方もいると思います。でもページを再読込したらリセットされますよね。関係する複数のCSSやJavaScriptに変更を加え、それらが絡み合ってどう動くかまで確かめられるのが、サイトクローンならではの特長です。

皆さまのサイトの改修・保守にぜひ役立ててみてください。

0 件のコメント:

コメントを投稿