CSS と JavaScript を含む HTML ドキュメントを貼り付け、新しいブラウザーウィンドウで開いてページをプレビューし、スクリプトを実行します。
ブラウザ内でローカルに実行CSS と JavaScript を含む HTML をエディターに貼り付け、「プレビューを実行」を押すと、新しいブラウザーウィンドウでコードが開き、マークアップが描画されてスクリプトが実行されます。ファイルを作らずローカルサーバーも立てずに、スニペットやレイアウト変更、小さな DOM スクリプトの動きを実際のブラウザーで確かめられます。
貼り付けたページはこのサイトから切り離されたサンドボックス内のフレームで実行されます。スクリプトやダイアログは動作しますが、このページのストレージや DOM を読むことはできず、入力した内容がアップロードされることもありません。プレビューはすべてお使いのブラウザー内で完結します。
プレビューウィンドウは、sandbox 属性を allow-scripts・allow-modals・allow-forms・allow-popups に設定した iframe にコードを読み込みます。そのためスクリプトは実行され、alert・confirm・prompt などのダイアログやフォーム部品も動作し、リンクから別のウィンドウを開くこともできますが、フレーム自体は不透明なオリジンとして扱われます。
この不透明オリジンが要点です。サンドボックス内のページは親ドキュメントに到達できず、このサイトの localStorage も読めないため、出所のわからないコードを貼り付けても KivTools のタブには触れられません。このページを別の場所へ遷移させることもできず、行ったことは自分のフレーム内に収まります。
与えたコードに対して、プレビューはブラウザーのタブと同じように振る舞います。HTML が解析され、CSS が適用され、内部・外部のスクリプトが実行され、DOM の変更もすぐに反映されます。プレビューウィンドウのサイズを変えれば、メディアクエリや可変レイアウトの反応を実用的に確認できます。
このツール独自のエラーコンソールはありません。スクリプトが失敗したときは通常のページと同じ結果、つまり真っ白または途中までしか描画されないフレームが見えるだけです。手早い確認には向いていますが、原因を追うときはブラウザーの開発者ツールを使ってください。
KivTools には何も送信されません。コードの解析と実行はお使いのブラウザーが行い、どのリクエストにもコードは含まれません。サーバー側での実行もないため、PHP・Python・データベースのコードはここでは動きません。
エディターはあえて素朴で、シンタックスハイライトやファイル読み込み、履歴はありません。ページを再読み込みすると入力内容は消えます。Cookie や localStorage に依存するコードはサンドボックス内では保存済みのセッションを見つけられませんし、ポップアップブロッカーが働くとプレビューの代わりにメッセージが表示されます。