ビジュアルWebインスペクター「DOM Lens」を提供開始 (2/4ページ)
App Store：【要入力：公開後のApp Store URL】
製品ページ：https://utaverse.tokyo/dom-lens.html?lang=ja
開発の背景
スマートフォン向けWebサイトの確認では、実機で見つけた表示崩れや気になるデザインを、Macなどの開発環境であらためて再現し、対象要素を探し直すことがあります。
DOM Lensは、実際にページを表示しているiPhone・iPad上で、その場で要素を選び、DOMやCSSを確認できるようにすることで、デザイン確認、実装調査、QA、学習の流れを短くすることを目指して開発しました。端末内のサンプルページも収録しており、初回起動後すぐに一連の操作を試せます。
DOM Lensの主な特長
1．見えている要素をタップして解析
ページ上の要素を指で選択すると、選択箇所をハイライトしながら、次の情報を確認できます。
- Live DOM、属性、CSS Selector、XPath
- 適用CSSルール、詳細度、Computed Style
- margin、border、padding、contentのBox Model
- CSSセレクタによるページ全体検索と複数要素のハイライト
2．調査から修正確認まで、iPhone・iPad上で完結
CSSのライブ編集とUndo／Redo、Consoleログ・エラーの確認、JavaScriptの実行に対応します。Networkではfetch、XHR、リソースのメタデータを確認でき、通信のリクエスト／レスポンス本文は収集しません。
