Question

我想知道是否有办法直接从Visual Studio代码编辑器中查看我们正在Web浏览器中处理的网页页面的预览，而不是必须单击该文件以使其在默认情况下打开网络浏览器。

Answer 1

您可以通过使用节点模块gulp-open配置gulp任务，在浏览器窗口中打开Visual Studio代码项目。然后，您可以从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'}));
  });
});

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

您可以参考gulp-open on NPM的文档。

Answer 2

直接来自编辑器，有一些WYSIWYG编辑器，如Adobe Dreamweaver，Kompozer等。虽然这些编辑器通常提供除简单HTML和CSS之外的任何预览（即没有JS，没有动画，可能有不同的CSS支持）。< / p>

使用文本编辑器（如Visual Studio代码编辑器，Sublime Text或vim），没有此类预览功能。

理想情况下，您希望在浏览器中测试（您希望目标受众群体使用的浏览器），以确保您了解访问者的具体内容。

为了节省编码和预览之间的时间，您只需在Chrome / Firefox / Edge中打开窗口/标签页，然后在编辑器中保存文件后再刷新。

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

2 个答案: