Web ページは、Web ブラウザーが表示する単なるドキュメントです。しかし、Web ページに直接入力して変更できるとしたらどうなるでしょうか?ブラウザ拡張機能は可能であり、必要ありません。これは、最新のすべてのブラウザに組み込まれている機能です。この機能は、Web ブラウザの JavaScript コンソール経由で有効にできる「document.designMode」機能を利用します。最近、Tomek SuÅ‚kowski が Twitter で取り上げましたが、とてもクールだったので、読者の皆様にもシェアしたいと思います。
この機能を使用して 、Web ページを印刷する前にクリーンアップしたり 、Web ページへの変更がどのように見えるかをテストしたり、あるいは単に人々にいたずらをしたりすることもできます。 Word 文書を編集するのと同じように作業できます。HTML をいじる必要はありません。
この機能を有効にするには、Web ページにアクセスして開発者コンソールを開きます。 Google Chrome でコンソールを開くには、メニュー > その他のツール > 開発者ツールをクリックするか、Ctrl+Shift+i を押します。
ここでは例として Chrome を使用していますが、この機能は 他の最新のブラウザでも機能します 。他のブラウザでコンソールを開く方法は次のとおりです。
- Mozilla Firefox では、メニュー > Web 開発者 > Web コンソールをクリックするか、Ctrl+Shift+K を押します。
- Apple Safari で、「Safari」>「環境設定」>「詳細設定」をクリックし、「メニューバーに開発メニューを表示」を有効にします。次に、「開発」>「JavaScript コンソールの表示」をクリックします。
- Microsoft Edge で、メニュー > その他のツール > 開発者ツールをクリックするか、F12 キーを押して [コンソール] タブをクリックします。
開発者ツールパネルの上部にある「コンソール」タブをクリックします。コンソールに次のように入力し、Enter キーを押します。
document.designMode = 'オン'
これで、必要に応じてコンソールを閉じ、現在の Web ページを編集可能なドキュメントであるかのように編集できます。どこかをクリックしてカーソルを挿入し、テキストを入力します。 Backspace キーまたは Delete キーを使用して、テキスト、画像、その他の要素を削除します。
これは、ブラウザーでの Web ページの表示方法を変更するだけです。ページを更新するとすぐに、元のページが再び表示されます。別の Web ページまたはタブに移動した場合、コンソールを開いてこの行をもう一度入力するまで、デザイン モードになりません。
コンソールに戻って次のコマンドを実行してデザイン モードをオフにすることもできます。
document.designMode = 'オフ'
Web ページは編集できなくなりますが、変更内容は次にページを更新するまで保持されます。
