Редактирование JavaScript с проверкой элемента

Question

Почему при редактировании HTML в элементе inspect он запускается сразу, а когда я редактирую JavaScript, он не запускается?Есть ли какие-то решения?

Answer 1

Когда вы используете инструменты разработчика вашего браузера (в нашем случае через элемент inspect) для редактирования страницы, вы фактически не редактируете HTML, вы редактируете текущее текущее состояние дерева DOM.

Когда ваш сайт загружается впервые, ваш HTML анализируется и создается дерево элементов.Это добавляется к документу, который затем отображается для вас в окне просмотра браузера.Как только этот HTML анализируется, он по существу перестает существовать.При открытии инструментов разработчика HTML повторно генерируется из текущего DOM и отображается для вас.Это для удобства человека.

Важно провести различие, поскольку оно помогает объяснить разницу между обработкой HTML и JavaScript.

Для JavaScript он анализируется, как только вашбраузер нажимает на соответствующий тег <script>.Этот код отправляется в движок JavaScript для анализа и выполнения.В отличие от инструментов разработчика браузеров для проверки DOM в виде HTML, на самом деле в движке JavaScript нет способа воссоздать представление кода JS текущего запущенного контекста.(Профилировщик - самая близкая вещь к этому.) Следовательно, нет никакого эквивалентного представления для прямого редактирования JavaScript.

Однако! ... Некоторые браузеры, такие как Chrome, имеют функцию, которая позволяет имгорячая перезагрузка контента с диска, включая HTML и JavaScript.Это на самом деле непосредственно интегрировано в инструменты разработчика вашего браузера в разделе Источники.Если вы перейдете туда и добавите локальный каталог , это позволит вам редактировать эти файлы.Когда вы их редактируете, Chrome перезагрузит их, не перезагружая всю страницу.Если в файле , внешнем по отношению к HTML , есть ссылки на функции кода, этот код будет заменен новыми функциями в новом файле.Также полезно отметить, что вы можете отредактировать этот JavaScript во внешнем редакторе и получить те же функциональные возможности.

Просто для ясности, эта функция горячей перезагрузки работает только локально и совершенно отличается от редактирования DOM с помощьюосмотреть элемент.

Пожалуйста, добавьте комментарии, если вам нужны какие-либо разъяснения!

Answer 2

Разница заключается в разнице между HTML и JavaScript.HTML - это язык разметки, который используется для отображения содержимого на странице, поэтому любые изменения, внесенные в эту разметку, будут немедленно отражены, поскольку вы меняете основную структуру страницы.

JavaScript, с другой стороныв основном выполняется, когда страница загружена, а затем выполняется, если вы не подключили обработчики событий для событий щелчка и т. д. Редактирование JavaScript на активной странице ничего не меняет, поскольку код уже запущен.

Вы можете найти больше ответов о том, когда JavaScript выполняется и различия по этому вопросу: Когда браузер выполняет Javascript?Как движется курсор выполнения?

Если это не отвечает на ваш вопрос, опубликуйте пример кода, и я посмотрю, смогу ли я вам чем-нибудь помочь.