Как открыть веб-консоль, например консоль Chrome, в окне предварительного просмотра кода Visual Studio и динамически увидеть изменения JavaScript?

Question

Основная цель заключается в том, чтобы я хотел видеть динамическую веб-консоль, в режиме предварительного просмотра на стороне VSCode, например консоль Chrome на этом рисунке ( VSCode с отдельной консолью Crome ), и она будет обновляться динамически. Сейчас я так и делаю:

1. создал файл index.html и включил src = "laikinas.js">
2. открыл index.html с живым сервером
   расширение, это открыло новое окно браузера Chrome.
3. нажимает F12, вкладка «Консоль»
4. изменил размеры как VSCode, так и браузера Chrome.

Как вы видите, это долгий путь, и если я создаю новый файл под другим именем, мне также нужно включить его в index.html. Другой мой путь был:

1. Открыта консоль отладки VSCode
2. нажата Cntr + F5

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

Я также попробовал расширение как этот "Quick HTML Previewer" , чтобы увидеть динамические изменения, но это расширение может отображать только внешний интерфейс, мне нужна консоль .

Answer 1

Я думаю, что самым близким является использование npm nodemon для просмотра файлов в вашем локальном каталоге. Затем, когда вы сохраняете в VS, вы можете обновить страницу в вашем браузере, чтобы увидеть внесенные вами изменения. Не так хорошо, как хром из-за дополнительных кликов.

https://www.npmjs.com/package/nodemon

https://www.youtube.com/watch?v=4N0d8HhU5DE