HTML ドキュメントに集中したワークスペース
完全な HTML ドキュメントを貼り付けるか記述し、CodeMirror で編集しながら横で即座にレンダリング結果を確認できます。
HTML Studio
利用可能完全な HTML ドキュメントを隔離されたブラウザーサンドボックスで編集し、ライブプレビューします。
Devary は HTML をアップロードも永続保存もしません。
HTML ドキュメント
ライブプレビュー
同期済みコンソール
0コンソール取得は Interactive モードで利用できます。Safe モードではスクリプトは無効のままです。
HTML Intelligence
1 回のローカル解析で DOM ツリー、診断、SEO/メタデータ、リソース、静的アクセシビリティレビューを生成します。
13 要素0 エラー0 警告
- <!doctype html>L1:1
- <html>L2:1lang="en"
- <head>L3:3
- <meta>L4:5charset="utf-8"
- <meta>L5:5name="viewport"content="width=device-width, initial-scale=1"
- <title>L6:5
- <style>L7:5
- <body>L46:3
- <main>L47:5
- <script>L56:5
Safe はアクティブコンテンツをブロック
JavaScript、ネットワーク接続、外部 frame、object、フォーム送信をブロックします。インライン CSS と data/blob メディアは描画できます。
隔離そのものが機能の一部
プレビューは Devary の DOM ではなく sandboxed iframe 内で実行されます。Safe モードではスクリプトとネットワーク対応リソースを既定でブロックします。
開発者ガイド
分離プレビューで HTML 文書をデバッグする
HTML Studio は編集、分離されたプレビュー、診断を備えています。本番環境と同じではない点を理解しましょう。
実践手順
設定する
完全な HTML 文書を読み込み、DOM、外部リソース、診断を確認します。
試す
整形や控えめな最小化を行い、ソースとプレビュー、コンソールを比較します。
確認する
SEO・アクセシビリティの指摘を予備チェックとして扱います。
具体例
見た目の空白を保持
控えめな最小化はインライン要素の間の空白を保持します。
設定
Conservative minify入力例
<main> <span>A</span> <span>B</span> </main>期待される結果
<main> <span>A</span> <span>B</span> </main>整形済みの内容を保持
pre 要素などのインデントと改行を変更しません。
設定
Preserve preformatted content入力例
<pre> line 1
line 2 </pre>期待される結果
<pre> line 1
line 2 </pre>制限と注意点
対応範囲
分離プレビューのリソース・スクリプトポリシーは本番環境と異なります。
本番環境での注意
自動診断はセキュリティやアクセシビリティの完全な監査ではありません。
よくある質問
プレビューが正しければ本番も問題ありませんか？
いいえ。実環境で外部リソース、モバイル表示、セキュリティを確認してください。