この記事はホームページ制作を学習し、作ってみたホームページの確認や動作確認などを行う際にどのような手法があるのか知りたいWebデザイナーやコーダー、エンジニア、ディレクターに向けた記事になります。
以下、茶番も兼ねていますが御覧ください。
ホームページを作れるようになりたて猫とホームペーシ制作極めたい猫
ほて…、ほて……、ほて……。なんて面倒くさいんだニャ～。
ほてちゃん、どうしたミャ？
ほて…、作ってみたホームページを確認してるニャ。表示崩れがないか確認してるんにゃけど、文章をなが～く入れてみたり、いちいち面倒くさいんだにゃ。
にゃるほど、エディタで編集して、ブラウザ更新して確認ってやってるミャ？
それならこんな方法もあるミャ。
<!-- ブラウザの検証モード コンソールで下記を実行ミャ -->
document.designMode='on'ほて？
これでなにが起こるんだニャ？
ふっふっふっ、それじゃあ試しにボタンのテキストを増やしてみるミャ？
ほいニャ！えっと、まずはエディタ開くニャ…
いーや、ブラウザ上でボタンのテキストを選択することができるミャ。
検証ツールはF12か対象を右クリックして「検証（デベロッパーツール）」を選ぶニャ。
そこからコンソールタブを選択して、さっき教えてもらったコード「document.designMode=’on’」をコピペして実行ニャ！
ほてええぇぇぇええ？！エディタで編集しなくてもテキストの追加ができたニャ！！！
これでブラウザ上でテキスト量を変えたりしてチェックが可能になるミャ。
更に画像や要素をドラッグ・アンド・ドロップするとブラウザ上で移動も可能になるミャ。
まとめ：ブラウザの機能を使って検証をより快適に
この機能は古くからあったような気がしますがついつい忘れがちなブラウザの機能です。エディタ上や検証ツールでHTMLを直接編集している方がたまにいたりするので、この機能を使えば気軽に編集・確認が可能です。
検証のために余計なソースを記入して、そのままにしてしまうというヒューマンエラーも避けられるので、試してみてもらえるといいかなと思います。
