Visual Studio Code设置在浏览器中查看html页面

Visual Studio Code默认是在VScode的控制台下查看html页面,这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件,在浏览器中查看html页面。

工具/原料

  • Visual Studio Code

方法/步骤

  1. 首先打开程序,编写好一个html程序。

    Visual Studio Code设置在浏览器中查看html页面

  2. 然后点击左侧第五行的扩展,或者使用快捷键ctrl+shift+X打开扩展栏。

    Visual Studio Code设置在浏览器中查看html页面

  3. 在扩展栏的搜索栏中输入“open in browser”,然后就可以找到open in browser这款插件,插件右下角会显示安装字样。

    因为这里我已经安装了,所以没有显示安装。

    Visual Studio Code设置在浏览器中查看html页面

  4. 安装完成后,可以查看一下文档,里面有插件使用的快捷键。在默认浏览器中显示是Alt+B;在其他浏览器中显示是Shift+Alt+B。

    Visual Studio Code设置在浏览器中查看html页面

  5. 回到开始创建的html文档,可以使用快捷键运行。也可以对着html文档右键单击,在弹出的窗口中选择使用默认浏览器打开或者其他浏览器打开。

    Visual Studio Code设置在浏览器中查看html页面

  6. 如果是选择在其他浏览器中打开,中间的命令框会显示可以使用的浏览器,选择自己需要的浏览器名称即可,这里我们使用chrome试试。

    Visual Studio Code设置在浏览器中查看html页面

  7. 可以看到成功在浏览器中运行了程序。

    Visual Studio Code设置在浏览器中查看html页面

    END

注意事项

open in browser插件使用比较方便,功能也比较稳定。其他的相关插件也有很多,但是效果不及这款。

猜你喜欢

转载自blog.csdn.net/qq_31741481/article/details/86670489