検証ツールのHTMLを編集せずにテキストを直接書き換える方法があった

コーディングしていて「あるある」なのが、

構築したレイアウト内の文字数が増えたら、崩れないかな...？

そんな時、コードで文字数を増やしたり、検証ツールのHTML要素からテキストを増やしたりしていませんか？

僕もそうしていました。

しかし！この作業をもっと簡単にできる方法があったんです💡

document.desidnMode で直接編集を可能にする

document.desidnMode という設定をすることで、ブラウザに表示されるテキストが全てカーソル選択して編集することができます。

document.desidnMode = 'on';

サイトのアドレスバーでJSを入力する

こちらも同様の効果があります。

※Chromeで貼り付けた場合、javascript:が自然と抜けるので手打ち

javascript:document.body.contentEditable='true'; document.designMode='on'; 
void 0

実際の動作