[Malleys]

сначала сохранять файл, потом переключаться на браузер и там обновлять страницу.

Но к сожалению, этот способ смертельно устарел, я не говорю, что так нельзя, просто есть инструменты, которые позволяют избавиться от этого шага.

Песочница. Вы можете писать код в песочнице и сразу наблюдать изменения... Например, CodeSandBox, Codepen, Dabblet и др.

Вы можете использовать Chrome DevTools, чтобы написать какой-то код, и применить его к вашей странице.

Chrome DevTools, 1-ый способ. Перейдите во вкладку «Sources», затем в левой панели выберите «Snippets», затем нажмите кнопку «➕ New snippet». В открывшейся вкладке напишите ваш JavaScript-код. Чтобы запустить его, нажмите Cmd+Enter.

Chrome DevTools, 2-ой способ. Перейдите во вкладку «Sources», затем в левой панели выберите «Filesystem», затем нажмите кнопку «➕ Add folder to workspace». В открывшейся программе выберите папку с вашим проектом (например, file:///media/project/). После выбора папки в левой панели появится иерархия вашей папки, вы можете выбирать файл и менять его. Сохранить изменения в файловую систему Cmd+S, чтобы применить изменения Cmd+R (для CSS изменения происходят в живую, но нажмите Cmd+S, чтобы их сохранить!) в браузере вы увидите эти изменения на экране как из локального файла (например, file:///media/project/index.html), так и из удалённого файла (например, h​t​t​p​s​:/​/​localhost/index.html)

Brackets. Также вы можете использовать редактор Brackets, в котором вы можете получить соединение в реальном времени с вашим браузером Google Chrome. Внесите изменения в CSS и HTML, и вы сразу увидите эти изменения на экране. Чтобы увидеть изменения в JavaScript, cохраните его!

Системы сборки. Вы увидите изменения на экране почти сразу после сохранения файла. Например, parcel, webpack, rollup, и др.