Дело в том, что инструменты разработчика оперируют не разметкой, а DOM.
Как браузер отображает вам страницу?
Браузер парсит текст HTML, превращая этот текст в программные объекты, которые уже записывает в память, чтобы можно было с этими объектами быстро работать прямо в памяти.
Структура этих объектов в памяти называется DOM - Document Object Model. Т.е. это программная модель того, что вы там понаписали в HTML-тексте.
Фактически браузер уже забывает о самом тексте, и работает с этими объектами.
Так же, браузер знает, с кем он имеет дело, поэтому "старается" по максимуму "исправить" все ваши ошибки в HTML, пытается понять, что вы имели ввиду и хоть что-нибудь вывести на экран.
А когда вы открываете Инструменты разработчика, то браузер берет эти объекты из памяти и просто отображает их в виде знакомых человеку тегов HTML. Оригинальный текст уже давно забыт. Поэтому все теги в инструментах будут закрыты, все лишние символы пропущены, всё будет красивенько и чистенько.
Насколько мне известно, поделать с этим ничего нельзя
