WEBページの文字を直接編集してみるブックマークボタン

まえおき

以前、こんな記事を書きました

HTMLデザイン検収に、WEBページを直接WYSIWYGできる「jQuery Console」を利用する
https://qiita.com/RAWSEQ/items/8cb265318d1339940f66

これ、ワンタッチでできたらよくね。

とツッコミをいただきました。

「開発ツールで該当の場所探して編集する」という手間は省けたとしても
編集する為にはウィンドウを開かなければいけない。
クールじゃないですよね。

そこで 👇👇👇

本題

EDIT PAGE -「WEBページの見た目（文字）を変えてみることができるブックマークツール」
https://ltside.com/jqc/edit.html

ブックマークをクリックするだけで編集可能になります。
これで、HTMLデザインの幅チェックとか、文言変えた感じのチェックやデモンストレーションがクールにできます。

実際はまあ、こんなことしてるだけですが・・

javascript

document.querySelectorAll('*').forEach((e)=>{e.setAttribute('contenteditable',true)});

開発ツールのスニペット等が使い慣れている方は上記１行実行するだけでテキスト編集可能になります。

その他、相性よさそうなWYSIWYGツールがあれば組み合わせてみたいです。
「もうあるよ」って方も是非教えてください！