要素の編集
Live Mockタブでは、ページ上の要素を選んで、テキスト・HTML・画像をその場で差し替えられます。実装前のデザイン確認や、コンテンツ変更後の見た目のチェックに使えます。
要素を選ぶ
- 「要素を編集」をクリックする
- ページ上で編集したい要素にカーソルを合わせ、クリックする
- 選択中の要素の情報（タグ名・DOMパス）が表示される
「⬆ 親要素へ」で1つ上の階層に移動でき、「⬇ 子要素へ戻る」でさかのぼった経路を辿り直せます。新しく要素を選び直すと、この移動履歴はリセットされます。
3つの編集モード
- テキスト：要素内のテキストをそのまま書き換えます
- HTML：要素の中身をHTMLごと書き換えます
- 画像：
<img>要素のsrcや各種属性を編集します（下記）
画像編集モードの詳細
- 画像URLを直接入力、または「ファイルを選択」でローカル画像に差し替え
alt（代替テキスト）、loading属性の編集- width / heightの数値変更（Proプランではスライダーでも調整可能）
- Proプラン限定：回転・明るさ・コントラスト・彩度・グレースケール・色相回転のスライダー調整、編集した画像のダウンロード
変更の取り消し
「適用済みの変更」に、これまで行った編集が一覧表示されます。個別に元に戻すことも、「すべて元に戻す」で一括に戻すこともできます。ページをリロードすると、すべての変更は自動的に元の状態に戻ります（これはページのライブなDOMを直接書き換えているだけのため）。