contenteditable属性:コンテンツを編集可能にする
contenteditable という属性をtrueに設定することで、その要素をブラウザ上で編集することが可能になります。
その属性が適応されている場所をクリックするとテキストエディタのように文字の入力、削除ができ、別の場所をクリックすると編集モードは終了します。
編集内容は保存されるわけではないため、リロードすると元に戻ります。
画像はdivにcontenteditable属性を設定した場合のもの
https://gyazo.com/83861d8cba8a6b54daaf88184308d8cd
body要素にcontenteditable属性を付与するブックマークレットは以下のようなものになります。
デバッグの際などに文言の変更などがしやすくなると思います。
code:js
javascript:(function(b){b.contentEditable=!b.isContentEditable;})(document.body);
参考
codepen
https://codepen.io/sinobata/pen/BaWdJEW
参考
https://www.tam-tam.co.jp/tipsnote/html_css/post8653.html
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Editable_content
#html
Created by tabata