Chrome（または任意のブラウザ）で任意のWebページを編集する方法

Webページは、Webブラウザに表示される単なるドキュメントです。しかし、Webページに直接入力して変更できるとしたらどうでしょうか。ブラウザ拡張機能は可能であり、必要ありません。これは、最新のすべてのブラウザに組み込まれている機能です。

この機能は、WebブラウザのJavaScriptコンソールから有効にできる「document.designMode」機能を利用しています。最近TwitterでTomekSułkowskiによって強調されましたが、それはとてもクールなので、読者と共有する必要があります。

この機能を使用して、印刷する前に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 = 'on'

これで、必要に応じてコンソールを閉じて、編集可能なドキュメントであるかのように現在のWebページを編集できます。どこかをクリックしてカーソルを挿入し、テキストを入力します。BackspaceキーまたはDeleteキーを使用して、テキスト、画像、およびその他の要素を削除します。

これにより、ブラウザでのWebページの表示方法が変わるだけです。ページを更新するとすぐに、元のページが再び表示されます。別のWebページまたはタブに移動した場合、コンソールを開いてこの行をもう一度入力するまで、デザインモードにはなりません。

コンソールに戻って次のコマンドを実行し、デザインモードをオフにすることもできます。

document.designMode = 'off'

Webページは編集できなくなりますが、変更内容は次にページを更新するまで保持されます。