F12開発者ツールの「要素」に表示されるソース全体をコピーする

こんにちは。SaitoKouです。

F12を押すと出てくるMicrosoft Edge 開発者ツールを使って調査をしていたある日、ソース全体をコピーしてテキストエディタで編集しながら調査したいと思った時がありました。

上図の囲った部分です。

そう思ってShiftを押しながら全体がコピーできるようクリックすると。。。

・・・あれ、Shiftを押していてもなんだか一行しか選べていないような気がして、右クリックしたりしてしばらくあたふたしてしまいました。この解決法を記載します。

結論：親要素を選択してコピーする

これでした。１行しか選択できていないように見えても、コピーすると子要素を含めてソースをコピーしてくれるようです。

試しに、以下画像の「id=side_menu_button」の部分を
　右クリック　＞　コピー　＞　要素のコピー
でコピーします。

それを張り付けた結果がこちらです。

<div id="side_menu_button">
  <a href="#"><span></span><span></span><span></span></a>
</div>

ちゃんとコピーされていて安心しました。

集客に強いホームページの製作はこちら。
サンプルサイトはこちら。