有没有办法查看网页的预览？

Question

我想知道是否有一种方法可以直接从 Visual Studio Code 编辑器在 Web 浏览器中查看我们正在处理的网页的预览，而不必单击文件以使其默认打开网络浏览器。

Answer 1

您可以通过使用节点模块 gulp-open 配置 gulp 任务，在浏览器窗口中打开您的 Visual Studio Code 项目。然后你可以在 Visual Studio Code 中运行 gulp 任务。

以下是配置 gulp 任务的方法：

var open = require('gulp-open');
gulp.task('browser', function(){
  // Define the source to match the file you wish to open:
  gulp.src('./www/index.html')
    // Designate the browser you wish the file opened in:
    .pipe(open('<%file.path%>', {app: 'google-chrome'}));
  });
});

由于我们已将任务命名为“浏览器”，因此我们可以在 Visual Studio Code 中点击命令/控制 P 以调出命令托盘并键入任务。然后开始输入浏览器。在您键入时，您应该会看到完整任务的代码。点击返回，它将在您指定的浏览器中打开您的文件。打开浏览器后，您可以调整它和 Visual Studio Code 的大小，使它们并排排列。然后，在您工作时，您可以刷新浏览器以查看您所做的更改。

您可以查阅文档以获取 gulp-open on NPM。

Answer 2

直接来自编辑器，有所见即所得的编辑器，例如 Adob​​e Dreamweaver、Kompozer 等。尽管这些通常提供的预览效果很差，除了简单的 HTML 和 CSS（即没有 JS、没有动画、可能支持不同的 CSS）。

使用 Visual Studio Code Editor、Sublime Text 或 vim 等文本编辑器，没有这样的预览功能。

理想情况下，您希望在浏览器（您希望目标受众使用的浏览器）中进行测试，以确保您了解访问者会看到什么。

为了节省编码和预览之间的时间，您只需在 Chrome/Firefox/Edge 中保持窗口/选项卡打开，然后在编辑器中保存文件后刷新即可。