今度はページのソースコードを書き換えてみましょう。
その前にウェブページを勝手に書き換えて大丈夫なの？と思っている人が居るかもしれないので
説明しておきます。開発者ツールで書き換えているのはあなたがサーバーから受信したコードで
サーバーとは完全に分離されています。あなたがコードを書き換えたからといってサーバー内の
ウェブページのコードは一切書き換わりません。あなたが行っている操作も基本的にサーバー側に伝わりません。
安心してどんどん開発者ツールを使ってください。
今回はソースコードを編集して要素を追加したいと思います。
書き換えるテキスト。
上のボックス内の「書き換えるテキスト。」を変更してみましょう。
開発ツールでコードを選択し、コードを右クリックするとHTMLとして編集を選びましょう。
#box1内のテキストをなんでも良いので書き換えてください。
書き換えるとボックス内のテキストも変わりました。このようにコードを直接変更することもできます。
もちろんタグを自由に書き換え、追加、削除が可能です。コードを変更しすぎると表示がおかしくなるので
元に戻す場合はページを更新してページを再取得しましょう。開発ツールで書き換えた操作は残りません。